Learn SwiftUI and become a better designer

How do you as a designer utilize the correct tools to create designs that can easily be implemented by developers in your team?

Do you have the right tools in your designer toolbox?

In a previous article, my colleague and I discussed how to bridge the gap between designers and developers, and we highlighted that designers and developers must be humble and learn from each other.

In this article, I’ve taken it upon me to learn how to code in SwiftUI and learn how to use standard components within the iOS system. But why should a designer code in the first place? Well, as a designer you need to have an understanding of how components are built to create a design that is possible to code by the developers in your team. If you already are a coding designer, you should challenge yourself to learn a new programming language or a new design technique.

The tutorial I used was the SwiftUI tutorial from Apple, which included four parts: SwiftUI essentials, drawing and animation and app design and layout. You don’t have to go through all chapters, but I would recommend the first three parts, excluding the framework integration. Also, I recommend you to code alongside following the tutorial, even if you are not familiar with the programming language (there are examples to help you if you get stuck).

Gotchas

Xcode doesn’t always render the new code you type in automatically if you have the simulator in live mode. One trick is to stop and start the “Live preview”.

If you have many layers in your app and you have a colour that you don’t know where it's coming from, then you need to find the correct way to debug. There is a UI debug tool called the “Debug view hierarchy” you can use to visually spread out all the layers in your app. You can read all about it in the guide which my colleague has written.

I quickly discovered the need for a “prettier” to indent my code in Xcode, as the code looked kind of messy. To indent your code, select the code and hit the following combination.

Select the code you want to “pretty” and hit control + I.

Nice things

You can edit directly inside the simulator and test your design on multiple iOS devices at once!

Test several devices at once.

Experience the design on multiple devices
You can test on several iOS devices to see if your design is working for smaller screens and have the devices in the same view. That’s really nice while developing, as the design might not look its best on smaller screens. If your design doesn’t look that good on smaller screens, maybe you should start designing for the smaller screens first, and then move upwards in screen-size. Then you don’t have to worry about the design on smaller devices.

Live editing
The live editing is so nice! Not only can you edit the display of a title or alignment of a layout, but the best part is also that the code is edited accordingly! Be aware that to reveal this menu, the “Live preview” must be turned off.

Turn off the Live preview to reveal the SwiftUI Inspector.

Reveal the SwiftUI Inspector to change fonts, layouts and spacing.

CMD + Click on the component in the simulator and select the “SwiftUI inspector”.

Built-in animations and transitions
Standard animations and transitions are important to know as a designer while designing for iOS. When you know how the animations work, it will help the design to match the code and again is already available for the developers in Xcode.

When you know the types of animations and transitions that easily can be used in Xcode, you know more about how an app is constructed and most likely avoid introducing complex transitions or animations that the developers don't want to implement.

Animations in Xcode.

A better designer?

When you know more about how the app is structured and how changes are made, then you have more knowledge if a design change could cause more or less work for the developers. Personally, after completing the tutorial, I know more about the essentials on how to structure an app and how to create a design and use standards components in iOS.

If you don't have the time or resources to dive into the code, there are plenty of resources you can use to find out how an app is composed, such as Apple’s Human Interface Guidelines that will provide you with insights from visual design to app architecture.

Some might find it more useful to complete a tutorial where you are coding alongside, some might find it better to read about new features and some might learn more from watching a youtube tutorial from their favourite developer. Find out what you prefer and how you learn the best.