How I use the simple iOS14 Figma library

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:

  1. Only creating text styles that are important (default size)
  2. Only creating a light mode version
  3. Only creating the most-used components
  4. Creating options with variants that are helpful with those components

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.

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
  1. Search and find the icon you want to find
  2. Click on the icon and then copy (cmd+c)
  3. Go to figma where you want to change the symbol
  4. Click into the text
  5. 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
Shows the side panel with action color selected. Window is revealed to allow you to edit the color
  1. Select the controls icon on the right
  2. 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
Left panel with assets selected. Cursor in search bar. List of components below search
  1. Type in the component you are looking for
  2. 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.

Building Pages Using the Library

Updating and using tab bar component

  1. Go to tab bar component
  2. Pick the number of tabs you want
  3. Change the labels of the icons to
  4. Use the SF symbols app to pick icons to copy and paste
  5. (Optional) Can remove other component options
Changing Labels
Changing Icons
Removing other options in component

Creating an edit screen

  1. Search for navigation bar and then drag into frame
  2. Select the modal variation option
  3. Search for table group and then drag into frame
  4. Search for table and then drag into frame
  5. Copy (alt+drag) each table row and cadd options
Add navigation bar & change. variation options
Add table group
Adding table row content

Purchase the file

Designer, husband, and father of two girls.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store