Implementing a Sketch text design system in your Xcode project

Change text styles in Xcode as easily as in your design file

With Sketch you can harness the power of a design system to save hours of design time. First you set up text styles in Sketch. Then you apply them with a click to create a beautifully consistent design across many screens. As your design evolves you can change your fonts, sizes, colours and more in one place, and cascade them across your project.

As a developer coding up a design in Xcode, you soon find life isn’t so simple. There is no out of the box way to apply text styles consistently. Setting them in storyboards and XIBs is time consuming, because you have to set each property (e.g. font, size, colour etc.) one by one in a drop down. If you prefer to set up your views in code, you have to remember the different ways of setting properties on different text elements. The biggest problem comes when your design changes, and you have to go through every element on every screen and change it manually.

What you really need is the same leverage as for your design system. You want to be able to apply a text style from Sketch to text elements in your code. And when the design changes, you want to make changes in one place in the code and have them cascade across your project. I’ll describe how to achieve that in this article.

The Xcode project containing the code in this article can be downloaded from https://github.com/gearnshaw/TextStyles.

Text styles in Sketch

This article assumes you have a design system with text styles in Sketch. You can use a pre-made one, or you can create your own. I’m not qualified to explain how to do that, so I’ll point you in the direction of the fantastic article by Jon Moore that got me started.

5 Things to Do Before You Start Your Next Design File in Sketch, or, Preparing Your Design “mise…

Create a class that represents text styles in your design system

First create a class that describes the properties of your text styles. For this example we’ve got style (which is effectively the font size), the colour, the emphasis, and the alignment of the text.

A basic class to encapsulate the typography system

When you style a text element in your app, look at the style in the design and initialise your TextStyle accordingly. For example if you have some text that should be display, in the app’s primary colour, with style1 emphasis and centred, you’d write:

let style = TextStyle(style: .display, color: .primary, emphasis: .style1, alignment: .center)

Style your text elements

The user interface of an app contains various text elements such as labels, buttons, bar button items and more. The next step is to write some code to apply the TextStyle class to these text elements.

Add an extension to expose the properties you’ll need.

Add variables and functions to access the properties of the text style

The properties exposed are:

• font based on the size we defined in the text style and the emphasis
• colorWithAlpha based on the colour we selected and the required opacity
• attributes wrapping up the font and the colour

along with a function:

• getAttributedString which lets you apply text style attributes to a string

You could use these properties and functions as they are, but it’s not very convenient. You would have to remember the right recipe for styling each element type (for example in a UILabel you set the font and colour directly, but with a UIButton you set them indirectly with your text string via attributes). And you’d need to set each property one by one, resulting in lots of code.

To improve further, create an extension for each type of text element to apply styling quickly and consistently.

Extensions to apply styles to different text elements

In each extension, a single function handles all the styling code. I’ve included some common text elements. If you’re using others, create extensions for those in the same way.

Use the text styles in your views

Now you can apply the styles in your view code.

Applying text styles in the view controller

In your view controller, add a configureStyles function (2) to create TextStyle objects and apply them to your text elements. This should be called from the viewDidLoad function (1).

It works equally well whether you’re using storyboards and XIBs, or creating views in code with SnapKit or Anchorage.

Run your project and voilà, your styles have been applied.

Text in the storyboard compared to the styled text when you run the project

Change a style

When a style in your design changes, all you have to do is change TextStyle.swift. Re-run your project and you’ll see the new style applied. Simple!

Summary

In this article I’ve explained how to create a TextStyle class to represent text styles in your Sketch design system, and how to apply those styles to text elements in your code. I hope you found it helpful.

For app development and more, please contact me at Control F1 or say ‘hi’ on twitter at @GabEarnsh.