SwiftUI is hands-down the best way for designers to take a first step into code. Thanks to its live Preview, you can iterate quickly and create powerful user interfaces with a few lines of code that works for all of Apple’s platforms. Take your static design to the next level and build real apps with the simplicity of a prototyping tool.
We’re using Sketch to design the interface and Shape for the illustrations. All design and source files are provided so that you can upgrade your UI skills while following the lessons.


This Course

This course is unlike any other. We care about design and want to make sure that you get better at it in the process. It was written for designers and developers who are passionate about collaborating and building real apps for iOS and macOS. While it’s not one codebase for all apps, you learn once and can apply the techniques and controls to all platforms with incredible quality, consistency and performance. It’s beginner-friendly, but it’s also packed with design tricks and efficient workflows for building great user interfaces and interactions.
SwiftUI makes it super easy to animate and add gestures to your app. The code is lightweight and easy to understand, even for newcomers who come from React or Flutter.


Requirements

Minimal coding experience required, such as in HTML and CSS. Please note that Xcode 11 and Catalina are essential. Once you get everything installed, it’ll get a lot friendlier! I added a bunch of troubleshoots at the end of this page to help you navigate the issues you might encounter.


States and Animations

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.


@State var show = true

.onTapGesture {

self.show.toggle()

}


Animations

SwiftUI provides a number of ways to animate your transitions. They even have their own physics-based built-in functions that allows you to use overshoot and apply bounciness to your animations.

// Linear

.animation(.linear)

// Ease Animation

.animation(.easeInOut(duration: 0.3))

// Animation with Delay

.animation(Animation.easeOut(duration: 0.6).delay(0.1))

// Spring

.animation(.spring())


Stacks

If you’re new to stacks in SwiftUI, I suggest using Spacer a lot. By default, views take min size of child elements. This is an image I made to help you understand.


Here are some of the tricks I’ve learned while using Stacks in SwiftUI.


// Stack views vertically and take full height

VStack {

Spacer()

}

// Stack views horizontally and take full width
HStack {
Spacer()
} // Gap between views
VStack(spacing: 20) {} // Stack views on top of each other in a Z (depth) unit
ZStack {
VStack {}
HStack {}
} // Take maximum width without Spacer()
.frame(minWidth: 0, maxWidth: .infinity) // Align elements to the top left
ZStack(alignment: .topLeading) {}



SwiftUI for All Devices

SwiftUI works for iPad, Mac, Apple TV and Watch. There are minimal code changes and you can reuse a lot of the same components. The StacksControls and Layout system will work the same, with a few adjustments. The philosophy for SwiftUI is not to write once, apply everywhere, but to learn once, apply anywhere.
For example, modals are automatically contextual giving you the dismiss gesture and sizing them properly for you. Most controls and data work across all platforms, with some minor layout changes and navigation. Those controls will be automatically translated for you, using the appropriate UI for their specific platform. For example, a Picker will look like a List in iOS, but it’ll look like a drop-down for Mac.


// All

ZStack, VStack, HStack, TabView

NavigationView, Picker, Stepper, Slider, etc.

SF Symbols

// iPad / Mac
TabView // Mac
Keyboard Shortcuts


Drag and Drop UI

ViewsModifiers and Images can be dragged to the Preview and to the code. Everything you build are automatically translated to production code.

In code just like in the Preview, you can Command + Click to get a contextual menu where you can Inspect the element and access a bunch of useful options like Embed in VStack or Extract to Subview.


Modifiers

You can easily drag and drop Modifiers next to your Views and they can be enhanced with new properties such as colors, transforms, visual effects, built-in controls and gestures.

.frame(width: 100, height: 100)
.background(Color.blue)
.shadow(radius: 10)
.offset(x: 10, y:10)
.blur()
.padding()


SF Symbols

You’ll need to download the newest San Francisco fonts from Apple to open the design files. Apple provides 1000 icons in their new SF Symbols app which can be used as a vector asset in Xcode or in the design tool.

In SwiftUI, you can easily generate icons from SF Symbols using their name. Make sure to download the app. Additionally, you can customize the size (small, medium, large) and change the icon color.


Image(systemName: item.icon)
.imageScale(.large)
.foregroundColor(.blue)
.frame(width: 32, height: 32)


Views and Controls

Basic elements you’d find in design tools or more complex and interactive controls like the Toggle, Slider and Data picker are available for free in SwiftUI. They’re extremely easy to style and to customize the functionalities and the data.

Text
Image
Rectangle
Toggle
Picker
Stepper
Slider

Visual Effects

SwiftUI gives you a bunch of visual effects for free so that you can play with them. Most importantly, you can even animate them and it’ll transition nicely for you!

.rotationEffect(Angle(degrees: 30))
.rotation3DEffect(Angle(degrees: 60), axis: (x: 0, y: 10, z: 0))
.scaleEffect(0.9)
.blendMode(.hardLight)
.blur(radius: 20)


UI Components

Just like in your design system or in React, you should break down your UI as much you can into components. To create a new component, Command + Click on a container like a VStack and select Extract to Subview.

VStack {

Text("Card Back")
}
.frame(width: 340, height: 220.0)


Reference the component by writing its name. Components are Views and can still receive additional Modifiers without even passing properties!

CardView()
.background(show ? Color.red : Color.blue) .
.cornerRadius(10)


Live Preview

What’s interesting about SwiftUI is that all the changes that you make is live, including the data that you work with. The Debug code allows you to quickly test data and preview environments in Swift UI. It’s really powerful for quick iterations.

You can preview your SwiftUI design on multiple devices at the same time. You have to Group your Content Views first and you can the preview and data settings. In this case, we’re making the Preview window to be adaptive. On top of that, you can Pin your preview so that you’ll always see the same screen as you make code changes.


Group {
ContentView()
ContentView()
.previewLayout(.sizeThatFits) // Preview components
.environment(\.sizeCategory, .extraExtraExtraLarge) // Accessibility
.previewDevice("iPhone 8") // Specific device
}


Dark Mode

To preview your layout in Dark Mode, you need to add a modifier to the Content View in the Debug area. Please note that to make your design work well with Dark mode, you should use their default colors and controls like the Navigation View as much as possible.

ContentView(courses: testData)
.environment(\.colorScheme, .dark)


Declarative Code

In SwiftUI, you’ll write shorter code that’s declarative, so it’s all about telling what the UI should do. It’s readable and straight to the point.


Auto Indent Code

As you edit your code, it will eventually become hard to read, so you can use Re-Indent in Xcode to keep everything clean. This is a bit similar to Prettier, but you have to select the code and press Control + I.


Round to Nearest Pixel

SwiftUI does the pixel fitting for you so that your views will look sharp all the time.

Swift Packages

Swift now has a package manager that lets you easily install third-party libraries from the community. To install a Library, go to your Project Settings > Swift Packages.

Install Catalina and Xcode 11

Catalina and Xcode 11 are required to run SwiftUI with the live preview features. To download Xcode, go to the Mac App Store and search for Xcode. Once everything is installed, you’ll have to install a bunch of new components and follow the instructions.

Your First SwiftUI App

To create an app, click on Create a new Xcode project. Then, select Single-View app. After, you have to set the project settings. The identifier is typically your domain name in reverse. Finally, make sure to check Use SwiftUI.

After you finish setting up your app, you’ll be greeted with the SwiftUI code editor alongside the Preview. Make sure to click on Resume at the top right to see the results in real-time. You can also hide the Left navigation and right inspector by clicking on the top right buttons.

Importing Assets

If you use images or glyphs, you have to import PNGJPG or PDF assets. Photos are usually saved as JPG while vector glyphs like icons should be in PDF. PNG are used for more complex transparent images that require a level of accuracy and pixel perfection that can’t be replicated in PDF, like gradients, drop shadows infused with bitmaps.

App Icon

In Sketch, you can find a template to create your App Icon. Once you customize the visual, you can export everything to a folder. Then, drag and drop the images into the App Icon inside the Assets. Make sure to remove the unassigned images and move the missing 3 images: Icon.png to 1024, icon_83.5@2x.png to iPad 83.5pt (2x), icon_76@2x.png to iPad 76pt 2x.

Color Sets in Assets

I recommend setting the colors for your app in advance directly in the Assets. Like this, you can easily reference those colors from the Inspect and from the code. On top of that, those colors will support Light/Dark modes. I prepared an Assets.xcassets folder where you can expand and drag and drop the Colors folder to your assets.

Colors set in Assets can be referenced in code like this.
Color("accent")

Keyboard Shortcuts

The most important Xcode keyboard shortcuts are the following:
Cmd + Click: Contextual menu for code or UI.
Option + Click: Quick info for code.
Cmd + 0: Show/hide Navigator.
Cmd + Shift + L: Insert new element.
Cmd + R: Run the app.
Cmd + . : Stop the app.

App Name

To change your App Name that appears next to your App Icon, you need to go to your Project Settings > Info > Bundle Name.


Test on Device

Using your app on your device is a magical experience. Keep in mind that what you’re building is fully native and extremely performant. To be able to test your app on your phone, you’ll need a free developer account, and to connect via USB.


Tutorials

The tutorials made by Apple are fantastic and extremely well-executed. They tend to speak more to developers though and the complexity jumps VERY quickly. But after you take my course, I believe that you’ll be able to go back to those tutorials and understand them a lot better.


SwiftUI by example

If you want quick references to how you do certain things in SwiftUI, I suggest the excellent quick tutorials by Paul Hudson from Hacking with Swift.


Resources

It would be impossible to cover everything within such a short period, so it’s important to continue your journey with awesome resources. This is an excellent list.


Newsletters

There are excellent newsletters for getting the latest resources about iOS: iOS Dev Weekly and iOS Goodies.


More Videos

In my YouTube channel, I post a bunch of shorts experiments and new techniques, so if you want to take your SwiftUI skills further, you can check them out.



Layout and Stacks


Creating a layout in SwiftUI requires very little code compared to traditional Swift with Auto Layout constraints. The way you create adaptive layouts in SwiftUI is now more akin to Flexbox with a few key differences. As a result, your layout will be flexible and adaptive from the start.






Components and Visual Effects 2


In this section, we’ll take a deep dive at all the visual effects that are available in SwiftUI. We’ll learn how to create components that can reused throughout the app.




Animations and States


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.




Gestures and Events


Since the iPhone X, gestures have become an essential part of the iOS user experience. The drag gesture especially is now more used than ever. You can really elevate your design by allowing people to manipulate your interface like real objects.




Timing Curve and Delay Animation


Learn how to apply multiple transforms to show a screen sliding from the bottom using timing curve values, delay, speed and repeat methods. We’ll also use smooth corners for our bottom card animation.







Dismiss and Drag Anchors


Let’s dive deeper into the gesture events and add conditions to create different anchors for our bottom card UI. We’ll replicate the card interactions found in apps like Apple Maps.



SF Symbols and Props


With SF Symbols, you have access to thousands of free icons that are consistent with Apple’s system icons. You can even implement them easily in the code and they come with different sizes and outline weight. In this section, we’ll learn how to use them and customize. We’ll also learn how to pass values to our components.



Color Literal, Gradient and Overlay


Xcode has the ability to embed colors directly in code. These colors are called Color Literal and allows you to use a GUI for editing the colors quickly using preset colors or the Mac color picker. We’ll also learn how to create a Gradient and use an Overlay modifier to float an element on top.



Animation Between Screens


In SwiftUI, you can summer any component or screen. That makes the job of creating menu animations and custom screen transitions super easy. In this section, we’ll learn how to bring a screen, customize its style and animate it. Please note that this technique is only recommended for light views like a menu or a simple modal. It’s not recommended for heavy screens since that may affect performance.




Drag Progress and Tap Background


The Drag Gesture gives us values in real-time. We can use those values and use operators to transform them into a progress that we can translate to animations. In this section, we’ll use the position Y and translate it to values that make sense for 3D rotation.





Binding and Screen Size


Binding is important for synchronizing your states across multiple components. Also, instead using hard-coded widths and heights, we’ll detect the screen size and use dynamic values to make our UI more adaptive.





ScrollView and Repeat


When you start having a lot of content, you’ll need to allow scrolling. In this section, we’ll learn how to design a bunch of cards and wrap them inside a ScrollView so that we can scroll horizontally. You can use this technique to apply scrolling to the rest of your app as well.




Data and Image Literal


Working with data is necessary for keeping your code clean and separating large amounts of content from the styling. It allows you to loop through multiple items without having to manually code them. Also, as you get more familiar with data, you can manipulate it with powerful functions.






3D Scroll Animation


The GeometryReader is very powerful for detecting the size and position of your views. In this section, we’ll use the scroll position to apply a 3D transformation to scrolling items.




Modal Presentation


Now that we have a lot of interactive content like cards and floating buttons, we can use those to initiate different interactions like calling a modal or an alert. In SwiftUI, the modal interaction is fantastic and has a built-in drag to dismiss gesture. I recommend using it often, even for large content.



Navigation View and List


The NavigationView is preloaded with a ton of features that make list layouts extremely easy to create and add navigation items like a dynamic Large Title, NavBar buttons, List styles. There is also a Navigation Bar that appears as you scroll and you can quickly add new buttons to it. On top of that, if you use NavigationButton, you’ll transition to a Detail screen and it will use the default interactions like the back button and swipe to go back.




Navigation Style and Passing Data


When you navigate to another screen, you can easily pass data in the destination just like with components. In this section, we’re going to add an image to our List and create a detail screen with some layout challenges.



Combine and Edit Data


Advanced interactions like swipe to delete and edit mode come for free with NavigationView. Combine allows you to manipulate your data by listening to changes and apply them across components. They’re like states, except that they exist externally. In this section, we’ll learn how to create a basic store for your data and add records, apply swipe to delete and drag to re-order in a navigation list.





Tab Bar and Test on Device


The Tab Bar is the recommended way to set up the main navigation for your app. When you have important sections in your app, you should put them in the Tab Bar menu. In this section, we’ll learn how to easily set up your tab bar menu and configure the initial screen.






Ring Progress Circle


SwiftUI has really good support for creating shapes from scratch. For example, we can create the Apple Watch Ring UI by using a circle with stroke options. Also, we can use those values to animate.





Ring Component and Formula


In this section, we’ll learn how to create a fairly complex component with a lot of customizations. We’re going to apply some formula to our values for the multiplier and progress percentage.







Ring Animation


Now that we have a fully customizable component, we’ll learn how to animate the ring UI. Also, we’ll learn how to implement and reuse the RingView component.





Custom Fonts and Modifiers


Just like CSS Style guides, you can create custom modifiers that include multiple modifiers like drop shadows, shapes and fonts. In this section, we’ll also learn how to implement a custom font from Google Fonts.





If Show View and Transition


In SwiftUI, there are several ways to show a new View, such as Modal, Tab Bar or by hiding outside the screen. The last option can be taxing on the performance if you have heavy views and background animations. Instead, you should use the If statement. We’ll also learn to apply the transition modifier.





Custom Transition


In this section, we’ll learn how to create a fully custom transition to full-screen using new layout and animation techniques. This is similar to the UI you’ll find in the Today tab in the iOS App Store, but we’ll add our own twists to the animations.







Stacked Cards Animation


Now that we have the basic full-screen card animation, we’ll animate some new content underneath. Additionally, we’ll implement a close button that will dismiss the full view.




Transition with Scroll


Now that we have a single card transitioning perfectly to full-view, the next challenge is going to add a ScrollView and deal with multiple cards. In this session, we’ll learn to use GeometryReader to detect the minY card position within the scroll and animate the offset to fill the top gap for each card.





Animation States Array


In SwiftUI, you can also store states inside an array as well, which allows you to dynamically create items with their own states. In this section, we’ll use static data to populate the animated cards and make sure that each card has their own show state.





Z Index and Status Bar


When you’re dealing with multiple UI elements in a Z Stack, you’ll want to be able to control the zIndex value. In this section, we’ll learn to animate the zIndex modifier and add a background animation as well as a blur effect.






Passing Index to Cards


To make our custom transitions even more interesting, we’ll learn to target individual cards using an index value. Like this, we can decide to animate the currently active card, as well as the inactive cards in the background.






Dismiss Gesture with Scale


Learn how to create a dismiss gesture using Scale Effect, 3D Rotation, Hue Rotation and opacity to create an interesting animation with the Drag Gesture.





Dynamic New View


When you create a custom transition with a lot of content, you may want to explore having a completely new View that holds richer content with scrolling. In this session, we’ll learn how to bring an entirely new view on top of the animated cards.





API and JSON


Pulling data from an API is an extremely useful technique in SwiftUI. In this session, we’ll learn how to fetch JSON data from sample posts and populate a List View using the onAppear modifier.







API and Combine


Let’s take our API data and make it observable across our entire app so that any change will update all the views using that data.




SPM and Contentful


Swift has a ton of libraries that you can use to power your iOS app. Thankfully, in Xcode 11, you can use the Swift Package Manager without third-party downloads. Using the Contentful library, we’ll learn how to create data from a CMS to bring rich and always up-to-date data to our app.






Contentful and Combine


With the data received from the Contentful library, we’ll populate our existing Cards UI. In this section, you’ll learn to use API data and make it work with your existing Data model and Data sample. On top of that, we’ll make it all work with Combine.






URL Images


When you start dealing with data from an API, the image content is often a URL. In this session, we’ll learn how to load images asynchronously using a Swift Library.





Background Blur


SwiftUI doesn’t come with the background blur yet, so we’ll have to use UIKit for that. Luckily for us, we easily use Swift code for our SwiftUI project. The new blurred layer in iOS 13 is called Material and has new styles that are adapts to both light and dark modes.



Dark Mode and Accessibility


The biggest update in iOS 13 is a system-wide support for Dark Mode. All of the most used apps by Apple will support it, so users will come to expect this feature in your app. Lucky for us, this is fairly trivial to do in SwiftUI. In this section, we’ll learn how to change our Preview to show Dark Mode, how to make the appropriate changes and test on the device with the new Environment Overrides.






Neumorphic Buttons


While SwiftUI doesn’t have a direct way to create inner shadows with the shadow modifier, you can still use the background modifier and create multiple layers of colors with blur to recreate this effect.




Long Press Gesture


Now that we have a button, we can add a Long Press gesture and detect both the short and long taps. With a delay of 0.1 second, you can reverse the animation back, giving an awesome tactile effect. With the long press, we can do a full animated switch of the button.





Circle Button Animation


There are different ways to create inner shadows. Previously, we used multiple layers with blur. This time, we’ll use a shape stroke and apply a clear color, plus a drop shadow to create the inner shadows.






Tap Progress Animation


The Long Press gesture gives you another event called .updating, which which auto release when you’re no longer pressing. This allows us to create a progress animation depending on how long we’re pressing.




Haptic Feedback


Haptic feedback has become a standard in iOS. It’s present in most interactions such as buttons, context menus and face ID. In SwiftUI, it’s pretty straightfoward to create a haptic feedback, allowing you to use presets such as error and success, and also different strenghts to single pulses.





Login and Variable Font Size


This is the start of a long series of videos that will teach you how to create a login screen from the ground up. We’ll cover many topics such as variable font size, text fields, keyboard interactions, alerts, Firebase authentification, Lottie files and persistent data.





3D Parallax and Looping Animation


With the background cover done, let’s create a looping rotation animation and add a 3D parallax effect using gestures by setting the drag position directly to the rotation3DEffect’s axis.






TextField and Password


In this section, we’ll learn how to create a form using text fields for email and password. Make sure the LoginView.swift file is open in the editor and let’s get started!







Keyboard and Alerts


Learn to center the screen and show alerts for your form.





Lottie Loading Animation


In this section, we’ll learn how to implement animated assets in a Lottie format. Open the Assets folder you downloaded, drag the two files in the Lottie folder and drop them next to the Assets Catalog. Make sure that you’ve checked the items appearing in the modal.







Success Sequence Animation


In this section, Let’s start by creating a new file. Right-click on LoadingView and then New File. Select SwiftUI View and name it SuccessView.





Login with Firebase


In this section, we’ll learn how to implement Firebase with SwiftUI. Head over to Firebase and login with your Google account. Let’s start off with creating a Firebase project. Additionally, here’s the link to a step-by-step guide for installing Firebase.





Login Environment Object


Let’s start off by creating a new file. Right-click on LoginView and then New File. Select SwiftUI View and name it UserStore. In here, we’ll store the environment objects.





Persistent Login with UserDefaults


In this section, we’ll learn about user defaults. Let’s get started by heading over to XCode and opening UserStore.swift.



Adapting for iPad


As we’ve covered multiple screens and interactions, we should look at how it’s adapting to the bigger screens like the iPad Pro and the smaller screens such as the iPhone SE. In this section, we’re going to learn how to deal with GeometryReader for screen size and how to fix various layout issues for screen orientation change and iPad’s Slide Over.






Environment Size Class


We’ll start with CourseList. Head over to CourseListView.swift and resume the preview. Now, let’s get started!






Fixing the UI and Animation


In this section, Adapting for multiple screens and fixing the animation for Safe Area and ScrollView






TabBar Below Views


In this section, Showing content and modals on top of the Tab Bar








Scrollable Card Content


Make the animated cards UI content scrollable.


Submit to the App Store


In this section, Step-by-step guide for publishing your app to the App Store.