SwiftUI is a bit of a paradox. Apple introduced the new UI toolkit at their developer conference in 2019 as a way to eventually replace the standard UIKit code and storyboard approach. Replacing a WYSIWYG app layout tool with one using code, Apple made implementing app designs both harder and easier.
SwiftUI code is a lot simpler and modern compared to the way UIKit is implemented. The use of storyboards was always a running argument for developers, with some preferring to use only code to express the UI. This may seem odd for designers who would never dream of writing out the markup that under the hood constructs any Sketch or Figma layout. The storyboard offered a graphical layout tool which had many limitations, and became hard to use with the introduction auto layout constraints. Using the storyboard was also more similar to a presentation app than a proper design tool.
Without an immediate visualization of an app screen, developers have to build and run an app to see the code results and compare to the design. SwiftUI puts that preview inside the Xcode editor with live updates as code is written. Interacting and multi-device previews are only a click away.
SwiftUI is a design tool, and learning it is similiar to learning another tool.
In Xcode, when you create a new SwiftUI View file, you are creating the equivalent of an artboard. By default it contains a text element which you can modify or delete. Since you will likely need text elements in your layout, we will get familiar with Text().
Like the text box on your Figma artboard, you can modify the appearance in SwiftUI. There are two ways in Xcode—code and the Inspector panel. Let’s put the code approach aside and focus on the Inspector, and making changes the old WYSIWYG way. Even putting the code approach aside, as you make changes in the Inspector panel, SwiftUI code will be added automatically for you—this is an excellent way to learn the code.
You may wish to follow along in Xcode, which means you’ll need to have Xcode running on your Mac. However Xcode is not required just yet!
With the ContentView file selected and the preview panel open, there’s no need to type code into the editor yet. Instead by clicking on the Hello world text in preview, the Inspector will display controls for that element. The Inspector has two sections—basic attributes (property) and modifiers.