How to create a styleguide in XCode & Swift

A step by step tutorial on creating a Styleguide with colors and styled labels in Swift (iOS). Github repository included.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/13/2022 at 18:29
Last Updated on 08/27/2022 at 11:55
A flower that represents Swift next to a flower that represents XCode. Beneath it sits the text that states 'Swift Styleguide'.

A step by step tutorial on creating a Styleguide with colors and styled labels in Swift (iOS). Github repository included.

The following tutorial walks you through how to create a simple styleguide that includes a single standard label style (i.e. not attributed strings) as well as two colors (black and white) for your application. It builds on our starter project which can be downloaded or discovered using the links below.

Download Open Source projectHow to create a SwiftLint enabled Swift Xcode project

If by any chance you are curious on how to create a styleguide, please read the article linked below.

Styleguide: What it is & How to create one

Step One: Create your folder

A screenshot showing how we created the Styleguide folder.

Under Coordinators, create a Styleguide folder.

Step Two: Create your Styleguide file

A screenshot showing you how to create the Styleguide.swift file.

Select the Styleguide folder and press Command + N.

This will select the Swift, iOS file type. Press Next.

After that enter the name of your file - Styleguide - and press Create.

Step Three: Create your Colors file

A screenshot showing you how to create the colors.swift file.

Under Models, Select the Constants folder and press Command + N.

This will select the Swift, iOS file type. Press Next.

After that enter the name of your file - Colors - and press Create.

Step Four: Create your colors struct

A screenshot showing you how to create a Colors struct for the colors 'black' and 'white'.

Copy the code below

Step Five: Create your Fonts file

A screenshot showing you how to create the Fonts.swift file.

Under Models, Select the Constants folder and press Command + N.

This will select the Swift, iOS file type. Press Next.

After that enter the name of your file - Fonts - and press Create.

Step Six: Code your Fonts file

A screenshot showing you how to create the fonts struct for a single font - 'Helvetica Neue'

Copy the code below

Step Seven: Code your Styleguide

A screenshot showing you the code for the Styleguide. It's available in the gist below.

Select the Styleguide.swift file that you created earlier and copy the code below.

We have made the colors available as a variable on line 14. These can be accessed using Styleguide.colors.white for white and Styleguide.colors.black for black.

The Styleguide is not a Singleton as all its functions are static, but if you are curious how to make a singleton follow our tutorial available in the link below.

How to create a singleton in Swift

Step Eight: Create your first style file

A screenshot showing you how to create the Styleguide+FirstStyle.swift file.

Select the Styleguide folder and press Command + N.

This will select the Swift, iOS file type. Press Next.

After that enter the name of your file - Styleguide+FirstStyle - and press Create.

Please note that these extensions should be named to match the style named in your typographic styleguide.

What is a Typographic Style?

Step Nine: Code your first styled label

A screenshot showing you how to code your first styled label

Copy the code below into your newly created file.

This sample creates returns a UILabel with Helvetica Neue, sized 40 in white - accessed from the styleguide.

Step Ten: Apply your Style

A screenshot showing you how to apply the created styled label.

Select ViewController and update the label constant declared on line 14 to match the newly created style using the line Styleguide.createFirstStyleLabel()

A screenshot showing you what line to remove as its no longer needed.

Given that we have made it constraints-ready in the style function, we can remove self.label.translatesAutoresizingMaskIntoConstraints = false from the ViewController+UI, setupLabel function on line 22.

Step Eleven: Verify

A screenshot of our app on an iPhone 13.

Before

A screenshot of your styled label.

After

Run the application and you should see your label update to the new style.

Incase you're curious how we made this label, follow the tutorial below.

How to add a label to a view in SwiftDownload Open Source project

Any Questions

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe