Figma’s “Components” Power in UIKit?!

“Without reflection, we go blindly on our way, creating more unintended consequences, and failing to achieve anything useful.” — Margaret J. Wheatley

That quote became my inspiration to create my latest iOS Application, Reflecta. Reflecta is an application that helps Apple Developer Academy Learners to develop their daily Reflections. With a visually stunning user interface, Reflecta can remind and help Learners create Reflections so that they will be more motivated to reflect on their day of learning.

(if you are an ADA Learner, feel free to try out Reflecta by clicking here)

During the development of Reflecta, I learned a thing or two along the way. First, I learned more in-depth about Networking and handling API calls. Because Reflecta’s main feature depends on an API call to Notion, I had to learn quite hard to trigger a JSON API call within Swift. Secondly, I learned how to design an application in Dark Mode. I know it doesn’t seem much, but my goal was to develop an application that works in the light and dark, and it finally happened! And last, I learned about how to make reusable UI elements by using enumerations and switch cases, and I am going to show you how to make one.

Intro to Enumeration and Switch Case in Swift

Before building Reflecta, this was not my first experience developing iOS applications using programmatic UIKit. I learned how to make the custom UI elements according to the design made by my team’s designers, and it turned out to be like this:

It looks really good. Hats off to the designers 🎉!! However, on the code side of things, it looked like this:

I purposely show two different viewControllers that have the same button design. Notice anything strange? Because the app has a standardized button design, we need to make all this loooooong code repeatedly in the whole application just for getting the UIButton to look like the design. Imagine that button design is available in nearly all my viewControllers: what inefficient and redundant code!

When my mentor looked at my code, especially in the initializer code, he said, “Why does it have to be this long? This shouldn’t be like this.”

After that code review, with me feeling down about my bad coding practice, he gave me a little tip: try and learn enumerations and connect that knowledge with building UI elements. At first, I was confused. “What the hell are enumerations?” But after looking all over the Internet and YouTube tutorials, I understood and connected all the dots.

Let me take you on the journey of my learning on this topic.

Definition of Enumeration and Using it with a Switch Case

Enumerations — more commonly called “enum” (pronounced “ee-num”), are a way for you to define your own kind of value in Swift. According to docs.swift.org, enumeration is

A common type for a group of related values and enables you to work with those values in a type-safe way within your code.

Usually, in other programming languages such as C, enums are considered simple little things, but in Swift, Apple adds a HUGE amount of power to them. Hence, we can *switch* (pun intended) it up using switch cases.

Here is a good example of using enums and switch cases in Swift:

Now that we have tasted a glimpse of what enums can do, let’s dive right in with my thinking process. In Reflecta, I designed the UI to be as custom as possible, with no more Apple-themed libraries. This meant custom fonts, button designs, and even text fields. Because of this, I needed a way to create my own custom UI libraries in UIKit. For this tutorial, I will demonstrate how to create your custom UILabels according to your Figma components.

How to make the Figma Components

First, you need to create your custom Text Style. This is an example that I took from Reflecta’s text style

You can create one by clicking a text which has the intended style or theme (for example like Large Title or Heading). Then head to the Text section and click the four dots icon. In the little pop-up, click the Plus icon to create a new text style.

After setting up your text style, note down the specifications for every text style. I usually look at font name, size, weight, and line spacing.

Now that you are set up, let’s jump to Xcode and build your custom UILabel!

How to build it in UIKit

First, create a new project and pick Storyboard as the interface

Then, create a new File, choose iOS, then Cocoa Touch Class

In the Subclass of section, type in UILabel and write a Class name of your choice (here, I use DemoLabel). After everything is set, hit Next and save the file

In the class body, let’s create the enum. We should create the enum body BASED ON the text style we made earlier in Figma. In Reflecta’s case, it looks like this

After we have set the enum, we need to create the initializer, which will be used when the custom UILabel class is being called. Overall, it looks like this

If we take a look here, I gave two variables: one is called style, which corresponds to the enum Style, and textString, which will set the text of the UILabel.

Before we continue, let’s import the custom font and create the Extension for UIFont. You can find other tutorials about importing custom fonts into an Xcode project and continue onwards with this tutorial. Overall, the extension for Reflecta looks like this

Notice that I used the same naming scheme as I did with both the enum Style and with the text style in Figma

Back in the DemoLabel class, let’s create a function that will handle the configuration of the UILabel when it is called. The function is called configureLabel(), and it is called in the init() method

In the configureLabel() function, I created two other functions that have separate duties when it is called. First is configureLabelText() that is used for setting the UILabel’s text and second is configureLabelStyle() for setting the UILabel’s Style

Let’s start with the easy one: configureLabelText(), which has only one setter. Here is the short code snippet of configureLabelText()

Now the fun part: configureLabelStyle(). Here we utilize a switch case that holds the different styles we have previously set in the enum above.

Here’s the reason why I asked you earlier to note down the specifications for every text style. Because every setter wrote OUTSIDE the switch case (like self.textColor and self.numberOfLines), it is applied regardless of which Style is being called! On the flip side, every setter wrote INSIDE the switch case, it is applied only when that specific style is being called.

So with that, here is how the whole class should look like:

And you are done! Congratulations on getting this far! You have successfully made a custom UILabel library for your application.

To see it in action, let’s see one example of a viewController in Reflecta.

As you can see, look at how short the code was when I called our custom UILabel library. Compared to the one I showed you before learning this trick, it has saved me so much time and lines of code, making the file much more readable and efficient.

And it doesn’t stop there! You can also create it for other UI elements like UIButton with its states like normal, disabled, and destructive states. As a little treat for getting this far, here is the code for the custom UIButton in Reflecta that can be reused in any UIKit project.

To summarize, we learned what enumeration is in Swift and how to use it to create our custom UI libraries according to our Figma design.

© 2022 Stephen Giovanni Saputra. All Rights Reserved.