Attributes
In the case of the Text() view, there is one attribute, the content. This can be edited in the Inspector panel text input field. It is easy to change the words on screen to “SwiftUI rocks!”, simply edit the input field text. Once you update the Text content, the code will automatically be updated. Other view elements have more attributes for finer control, and we’ll discuss those later.
As a rule of thumb, the attributes appear inside the () parentheses, and modifiers appear after and start with a . full-stop. Some views require a default attribute, while others rely on modifiers.
Modifiers are more important for changing the look of our Text view. The Inspector panel contains controls for changing the Font (which is called the Text style in Figma), Weight, Color, Alignment, and other modifiers that affect the text shape of the Text view including padding and the frame size. We can also add more modifiers that aren’t yet visible on the Inspector panel, which is discussed below.
By default SwiftUI uses system fonts and colors which are detailed in the Human Interface Guidelines. We can customize these aspects later, but for now we’ll stick with the default HIG styling.
The Human Interface Guidelines are a valuable resource which should be required reading for mobile app designers. Right now I will focus on Typography and Color. To me the best part of each document is the reference table.
Typography
When creating apps that adapt to the customer’s phone settings and needs, you want to stick to using Dynamic Type Sizes. Apple does also recommend the use of the “built-in text styles whenever possible”. The typefaces San Francisco (sans-serif UI font) & New York (serif font used in your iPhone Books app) were created to be most legible on Apple devices. And you can even soften the look of SF with SF Rounded.
Of course your app will likely want to express its own visual style that fits your brand, and this is possible in SwiftUI, however some consideration is required to maintain the Dynamic Type Sizes. Once you use a custom typeface, you need to include a fixed font size, rendering what was a Dynamic Type size, non-dynamic. This matters for all people using Apple devices, no matter if they have increased their iPhone Text Size to xxxLarge or have turned on the larger accessibility type sizes. Fortunately I have a solution which we’ll explore much later.
In the real world you would not break the accessibility of your app, and you should avoid it in design too. However, for the purpose of a prototype, we may need to break a few rules, or hack SwiftUI to achieve the correct look & feel. Afterall, no one said we were making production-quality code.
Modifying Text
Returning to the modifiers, you can see from the Preview panel that I can pick a font, increase the weight and set the text color. You may have also noticed that each modifier gets added in the code editor. This allows us to explore what other options we have in Xcode before having to start typing code.
I can turn on the Padding and set a value—my Text view has grown bigger as a result. We need to be careful with the Frame sizing as this will create a fixed size. Leaving default values will allow the view to adjust to its contents. Also, you will find Padding and the Frame will mix oddly.
Add modifiers
The Add Modifier drop down allows us to add even more customization. The dropdown contains every modifier available, including ones not applicable to views like Text. We can experiment and see what works. For example we can add the background modifier. This will give us a dropdown of the default system colors, plus the ability to use a custom color.
Selecting this option will insert a piece of placeholder code in the editor, however selecting Custom a second time will bring up a color picker so you can manually pick a color or enter the RGB values. By default SwiftUI is declaring the RGB values between 0.0 and 1.0, translating 255 to equal 1.0. While you can set the values for the additional modifiers in the inspector panel, they remain highlighted in the code editor.