Switching from Interaction Design Tools to SwiftUI

When designing and prototyping touch interactions for iOS devices, designers typically rely on interaction design tools such as Framer, Origami Studio, Adobe XD, Figma, InVision, Flinto, Principle, and ProtoPie.

While there is nothing wrong with these design tools, they create an extra step for developers who must translate animations and interactions built with these tools to code. But what if you could remove that step altogether?

Enter SwiftUI. If you are a designer, think of SwiftUI as “Sketch meets Principle.” Using SwiftUI, designers can drag and drop views and controls from the Xcode library to create complex compositions, layouts, and interface animations with low code and minimal effort.

Keep reading to learn about:

Why You Should Use SwiftUI Over Interaction Design Tools
Best Practices for Getting Started
Examples of SwiftUI Interactions and micro-interactions
Best Resources for Learning SwiftUI as an Interaction Designer

Why SwiftUI for Interaction Design?

Recently, Stream started using SwiftUI to encourage its designers to build and code interactions for chat messaging and activity feeds with low code.

SwiftUI comes out of the box with built-in animations for interactions and transitions such as scrolling a list of chat messages and force-tapping or long-pressing a message bubble to reveal a context menu or reactions.

At Stream, the interactive prototypes, animations, and designs built with SwiftUI serve as proof of concepts, helping our designers to understand platform constraints and what interactions are feasible across the Apple platforms.

Additionally, they help our designers to collaborate effectively with Stream’s engineers and developers on our chat SDKs.

Simply put, SwiftUI can help designers build better interaction experiences. Here are just a few of the benefits it offers designers:

SwiftUI Has a Declarative Swift Syntax With a Low Learning Curve

SwiftUI helps designers sketch interfaces and build interactions using a comprehensive declarative Swift syntax with a low learning curve. For designers willing to learn how to prototype with code, SwiftUI is a great starting point because you can define what the interface should do.

For example, you can state that you want a message list consisting of user avatar, text fields, an icon, then describe the item’s font, alignment, and color as shown below.

swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var body: some View {
        VStack {
            Image("STREAMMARK")
            Text("Welcome to Stream Chat")
                .font(.title)
            Text("Select a user to try the iOS SDK")
                .padding()
            List(channels) { item in
                HStack {
                    Image(item.avatar)
                    VStack(alignment: .leading){
                    Text("\(item.name)")
                        .fontWeight(.bold)
                    Text("\(item.channel)")
                        .foregroundColor(.secondary)
                }       
                Spacer()      
                Image(systemName: item.channelListArrow)
                    .foregroundColor(.blue)
            }
               }.listStyle(.inset)
        } // All Views
    }

Since it is declarative code, it becomes comprehensive to read because it is obvious from the code that we are asking SwiftUI to put all the content on the screen in a vertical container (VStack) and the list of items are arranged with a horizontal container (HStack).

SwiftUI Simplifies Building Complex Gestures

Building complex gestures with SwiftUI is much easier than using design tools because most of the transitions and animations for gestural interactions are pre-built. Designers only need to know how to select from a collection of ready-to-use animations/effects with minimal SwiftUI code.

With this approach, Designers can build more realistic, fine-grained, and native animations and transitions than they could with a design tool. Designers don’t need to worry about creating smooth movements since Xcode handles all the steps needed to build seamless and smooth interpolations.

Xcode Provides Basic Shape Tools

Xcode provides intuitive basic shape tools like rectangle, capsule, and oval, which make it easy to design interfaces using drag and drop just like pulling legos from a bin.

SwiftUI Allows You to Preview and Test Layouts

SwiftUI allows designers to preview and test layouts, compositions, and interactive prototypes using Xcode’s instant preview, simulator, or real devices such as the iPhone or iPad without the need for a third-party application.

You Can Iterate on Designs and Prototypes—Fast

Iterating on designs and prototypes is faster and more efficient in SwiftUI than going back and forth with an interaction design tool after your developers propose modifications.

SwiftUI Offers Seamless Dark and Light Mode Support

SwiftUI supports dark and light mode so designers don’t have to build different versions of their designs when previewing prototypes.

You Can Preview on Multiple Devices

Using the built-in flexible and adaptive layout techniques in SwiftUI, designers can build complex compositions that can run seamlessly on all supported devices and adapt to different orientations such as portrait and landscape. Additionally, you can preview designs on multiple devices at the same time by embedding several device previews in a group view.

Automatic Support for Accessibility and Dynamic Type

SwiftUI has automatic support for accessibility and dynamic type. This allows designers to easily simulate dynamic text experiences such as dragging a slider knob to adjust a font size.

Best Practices for Getting Started

Want to design with SwiftUI? Below are a few actionable steps you can take to get started:

Learn the Basics With SwiftUI Resources

As a designer, learning SwiftUI may be challenging at first. Just opening Xcode for the first time and knowing where to start can be overwhelming since Xcode is a very complex and powerful platform.

Building your own app? Get early access to our Livestream or Video Calling API and launch in days!

Fortunately, there are several SwiftUI resources out there to help you get started, but most of them are created for developers:

DesignCode

The best designer-focused resource to assist you in learning SwiftUI is DesignCode. It provides online courses, tutorials and livestreams to assist designers to design apps using code. It aims at empowering designers to learn to code and developers to learn design. When I started learning SwiftUI, DesignCode’s video tutorials helped me understand layout, composition, core concepts, and interaction design techniques in SwiftUI.

Big Mountain Studio's SwiftUI Views

Another design-oriented SwiftUI resource worth mentioning is SwiftUI Views from Big Mountain Studio. Big Mountain Studio provides blog posts and SwiftUI books to help designers learn SwiftUI. It is mainly focused on visual learning.

For example, SwiftUI Views has SwiftUI code and the code’s preview side by side, which is very helpful for visual learners. It is a small, but mighty, book since it teaches you everything about drawing, painting, and compositing views in SwiftUI.

Learn to Design With No Code Tools like Kite Compositor

After I learned SwiftUI from the above resources, I wanted to use it as my main interface design, animation, and interaction design tool. At the time, I already knew how to create iOS animations based on Apple’s Core Animation (CA) framework without writing code using Kite Compositor.

Kite is a powerful user interface design and advanced interaction prototyping application for Mac and iOS. It allows you to visually drag and drop interface and animation layers from its library to build complex user interfaces on a canvas. Additionally, you can use Kite’s code generation feature to export Swift code for developers.

Moving from Kite to SwiftUI was a smooth journey since I realized that I could apply most of the animations and design concepts in Kite to SwiftUI when designing and animating interfaces. This accelerated my confidence and interest in learning SwiftUI by building transitions and interactions in Kite and recreating them using SwiftUI.

Familiarize Yourself With Interaction Prototyping Tools

There are several interaction prototyping tools in the design landscape. Before jumping into SwiftUI, it is essential to familiarize yourself with, for example, Principle, Origami Studio, Framer or ProtoPie.

Although these tools may seem different, they aim at achieving similar goals. Principle is a Mac-only application that makes it easy to design animated user interfaces on a timeline. Origami Studio is a powerful Mac application that allows you to design, animate, and prototype using a visual programming approach.

Framer is an all-in-one application which allows designers to prototype interactions without writing code. Similarly, using ProtoPie, you can build interactive no code prototypes that look like an actual application and which can be used for user testing.

Recreate Transitions and Interactions in SwiftUI

From my experience, the best approach to learn SwiftUI is to pick micro-interactions and designs from Dribbble or Mobbin, recreate them using Kite, and try replicating the Kite prototype using SwiftUI.

Examples of SwiftUI Interactions and Micro-Interactions

Below are some examples of interactions and micro-interactions you can build using SwiftUI.

Simulating User Input

Building a prototype that involves inputting information can be tedious when using an interaction design tool. However, SwiftUI’s text field makes it easy to simulate user input in your prototypes.

Pull-To-Refresh

Emulating refreshable views in interaction design tools may require the use of an animated GIF. While there is nothing wrong with this, SwiftUI’s refreshable modifier makes it easy to add pull-to-refresh to your interface as illustrated below.

Swipe Actions

Swiping to delete using swipe actions automatically comes with built-in animations. You can implement it by attaching the swipe actions modifier to, for example, a list item.

Flick to Scroll

When you wrap items in a list, it creates a momentum scrolling experience by default. You can also create a scrolling view by embedding your interface elements in a scroll view.

Touch and Hold or 3D Touch to Show a Context Menu

When you want to give users access to additional actions related to interface items, you can implement a context menu. Adding a context menu to a view automatically blurs all other onscreen items and animates the view into focus using a long-press gesture, which is very difficult to achieve using an interaction design tool.

Best Resources for Learning SwiftUI as an Interaction Designer

As an interaction designer, you may be looking for awesome SwiftUI resources to get started. Fortunately, There are several SwiftUI tutorials, guides, and how-tos available on the internet.

Below are some of the most comprehensive and useful SwiftUI resources for interaction designers to begin their journey with interaction design using SwiftUI:

Conclusion

SwiftUI empowers designers to step into code to build interactive prototypes. In this post, you learned why SwiftUI is an essential design tool, best practices for getting started with SwiftUI, and examples of SwiftUI interactions.

With commitment and hard work, you can learn to use SwiftUI to build interactive experiences without knowing how to write production-ready code.

As a designer, you can find several resources on the internet to get started, but from my experience, learning SwiftUI from DesignCode and Big Mountain Studio (SwiftUI Views) will make your learning journey much easier.

To get more in-depth SwiftUI interaction and animation inspirations, check out Stream Chat iOS Interaction Patterns and SwiftUI Animation Library on GitHub.

As always, happy “low-code” designing! 😉