SwiftUI Handbook — A comprehensive series of tutorials covering Xcode, SwiftUI and all the layout and development techniques.

Dream big, anything is possible now.

All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.


Design your layout using the inspector, insert menu and modifiers

In this tutorial, we’ll take a quick look at how to create a simple layout by only using the visual editing tools and without touching the code.

Learn how to use HStack, VStack, ZStack with spacing and alignment

Stacks in SwiftUI are similar to the stack views in UIKit. By combining views in horizontal and vertical stacks, you can build complex user interfaces for your application. There are 3 types of stacks: HStack, VStack and ZStack.

How to import images from Figma to Xcode using PDF, PNG and JPG

In this video, I want to discuss how to import images from Figma in different formats, such as PNG, PDF and JPEG.

How to use shapes like circle, ellipse, capsule, rectangle and rounded rectangle

With SwiftUI, you get access to five built-in shapes which are circle, ellipse, rectangle, rounded rectangle and capsule.

How to use system icons for Apple platforms with different size, scale and multicolor

Apple provides a set of over 2,400 configurable symbols that you can use in your app. They work seamlessly with San Francisco, the system font for macOS, iOS, iPadOS, watchOS, and tvOS.

Use the color picker and images list to set your colors and images directly in the code

Xcode has the ability to embed colors and images directly in code. This is done with the help of Color Literals and Image Literals.

Learn how to create a Sidebar navigation for iOS, iPadOS and macOS

Use the Toolbar modifier to place multiple items in the navigation bar or bottom bar

Use the Toolbar modifier to place multiple items in the navigation bar or bottom bar

Using the Toolbar in SwiftUI, you have more control over the placement of your navigation buttons such as the navigation bar or bottom bar. Additionally, these action items will adapt accordingly to iOS, iPadOS, watchOS, macOS and tvOS.

How to work with the Image View and its resizable, aspectRatio, scaleToFit and resizingMode options

Image View gives us access to many features such as rendering mode, resizable and aspect ratio.

How to ignore the Safe Area edges in a typical layout with a background

SwiftUI automatically makes your content fit within the bounds of the safe area. For background elements and some layout cases, you can ignore those edges by using ignoreSafeArea.

A deep dive into how to use the Text View and its modifiers such as font, color, alignment, line spacing and multiple lines

In this tutorial, we’ll take a deep dive into how to use the text view and its modifiers.

How to set a custom font in iOS using info.plist and the font modifier

Aside from providing system fonts, SwiftUI also gives you the option of adding custom fonts. In this tutorial, you’ll learn how to add a custom font from Google Fonts and use in your project.

An alternative to stacks and spacer is to use frame max width and alignment to avoid the pyramid of doom

A typical way to align elements is to use HStack + Spacer(). However, this can necessitate too many containers, especially if you want to align to the top left. An alternative is to use the frame modifier with maxWidth and alignment.

The most flexible way to add shadows to your UI in SwiftUI

Drop shadows are perfect for adding depth to your user interface. When your text, buttons and cards blend too much with the background, you can use drop shadows to make them stand out.

How to use mask to clip the content with opacity and gradient

The mask modifier is even more versatile than the clipShape because you can use colors and even opacity to clip your content.

How to create a continuous corner radius, also known as super ellipse

SwiftUI lets you mask any view with a clipShape modifier. A popular technique is to apply the Super Ellipse, also known as continuous rounded corners.

Tab View PaginationCreate a simple user onboarding layout using Tab View with the PageTabViewStyle

In SwiftUI, you can create a user onboarding layout with horizontal pagination with a few lines of code using the TabView.

How to set up a simple animation using states, toggle, withAnimation and onTapGesture

Animations are an amazing addition to any project. In this tutorial, we’ll go through how animation works in SwiftUI. Animations in SwiftUI are automatically responsive, interruptible and automatic. There is virtually no set up — only customizations. Transitions are like Magic Move in Keynote. You only need to set the states and SwiftUI will figure out for you the transition between the two states.

View Transitions and Animations

SwiftUI provides a great way to show and animate a new view on top of your current view. You have access to preset transitions like opacityscale and slide. You have even more control with movescale and offset transitions.

How to apply a different animation timing on separate elements using the animation modifier

SwiftUI also gives you the ability to set the animation timing to specific elements. Like this, during a state change, multiple elements can have different animation timing. Additionally, you can set a timing curve and duration for your animations.

How to animate a card using offset, scaleEffect, rotationEffect and rotation3DEffect

SwiftUI has a number of transform modifiers that you can use for animation, including offsetscaleEffectrotationEffect and rotation3DEffect.

Expand and contract a button using the tap gesture with delay

In this tutorial, we’ll learn how to create a button that expands and contract after a delay. This is a fun effect that can be seen on a lot of buttons and cards.

Detect the long press duration to expand a button and bounce back

Using the LongPressGesture, we can create an interesting bouncy button similar to the camera button on the iOS lock screen. This will also detect the duration of the press, which we can use to affect the animation progress.

Learn how to create a draggable card using DragGesture, onChange, onEnded events and the offset modifier

In SwiftUI, you can attach a gesture modifier to detect the position of the drag. Using this position, you can apply to the offset modifier to make your element draggable and reset on release.

Create a custom transition between views using the matchedGeometryEffect modifier, namespace and id

The matchedGeometryEffect modifier allows you to create beautiful custom transitions between two different views. It enables shared elements to animate smoothly from one space to another. This also makes animations much more manageable. All elements like texts, buttons and backgrounds will animate individually without having to set animation states.

Recreate the Music app transition using matched geometry effect and learn how to pass Namespace to another view

To create a smooth transition between two views with matched geometry effect, you need to make sure that both views have shared elements. In this lesson, we’ll learn how to synchronize two separate views and pass the Namespace. We’ll recreate an interaction from the Music app.

How to install SwiftUI packages using the Swift Package Manager

The built-in Swift Package Manager (SPM) allows you to use third-party libraries. All you need to do is to enter the git URL and you will be able to install the latest version with only a few clicks.

How to apply a frosted glass sheet in your user interface using Apple's sample code

The frosted glass effect has been around since iOS 7 and it’s only recently used more in a trend called glassmorphism. To create this background blur effect in SwiftUI, you’ll need to use Apple’s sample code and apply a BlurView.

How to add animated assets using Lottie in SwiftUI

Animations bring more life to your applications, these can also affect the user experience in a positive manner. In this tutorial, we’ll learn how to add Lottie animations in SwiftUI.

Learn how to build an adaptive or fixed grid layout that expands vertically or horizontally

Lazy Grid allows you to create flexible and easily adaptable grid layouts. You can create one of the two: LazyVGrid or LazyHGrid. It allows you to create a container that grows vertically or vertically. The grid view will not render items until it’s needed, hence the word “lazy”.

Group 6 CopyCreated with Sketch.

More Information?

Fill out your details and we will get back to you as soon as possible.