How I use the simple iOS14 Figma library

4 min readFeb 15, 2021

Why I created the file

You may think…I know there are other free iOS libraries out there. And you are right! Here are a couple of files I’ve found on the Figma community:

(Variants) iOS & iPadOS 14 UI kit for Figma (by Joey Banks)
iOS/iPadOS 13 Design UI Kit (by Juan Arreguin)

I was using these libraries before I creating my own. The problem was that I didn’t know how the naming convention of the libraries. So instead of using the quick search, I was always diving into the library to browse for the right components.

The number of components was also overwhelming. I didn’t need all the different options that were offered. For example, dark mode. I just needed a light mode with the colors that work right for dev to automatically switch to dark mode if needed.

I’ve been using a variation of the Simple iOS14 Figma Library for a couple of months now. As I’ve been using it, I thought I would make a useful library by:

Naming the components following the HIG guidelines
Only creating text styles that are important (default size)
Only creating a light mode version
Only creating the most-used components
Creating options with variants that are helpful with those components

Watch this overview video to see an example of what’s inside:

How the file is organized

For text options I decided to go with the default size only (to keep it simple). Standard text (anything other than a title) are grouped together. Then I grouped the Titles too.

All components are organized into Bars, Views, Controls, Other. Here is a list of each component (Watch video above to see each component in action):

Bars

Tab Bar
Navigation Bar
Toolbar

Views

Table Groups
Table
Table Button (not from HIG, but helpful component)
Action Sheet
Alerts

Controls

Edit Menu
Pickers
Date Picker
Slider
Segment Controls
Menus
Page Controls

Other

keyboard
notifications
widget (sizes)

Helpful Tips

Switching Icons

SF symbols app with a list of all the icons. Checkmark is selected

Use SF Symbol App (Mac only). You can download it here
Search and find the icon you want to find
Click on the icon and then copy (cmd+c)
Go to figma where you want to change the symbol
Click into the text
Paste(cmd+v) the icon into the text

Updating Action Color

Shows the side panel with action color selected. Window is revealed to allow you to edit the color

Find the action color on the side panel (without any layer selected)
Select the controls icon on the right
Changing the color will affect all the components in the library

Quick Searching for Components

Left panel with assets selected. Cursor in search bar. List of components below search

Hit the assets in the top left, then click into the search bar. (or you can hit alt+2 to drop you right into the assets and search bar)
Type in the component you are looking for
Drag the component into your file

Table Row Options

This component is one of the trickier components. It's also the component I use the most.

The left side variants are controlled by the main component.

The right side variants are controlled by diving into the component. So cmd+click on the left title. Then click on the right side to reveal the different variants. I divided the variants into two groups: Options and Inputs.