Creating a design system in Figma — Tutorial 1

I was asked to describe some parts of my Figma workflow by several people, so I wrote a bit of a guide.

The goal of this tutorial series is not to show you how to make a pretty design but to show you how you can manage your Figma components in a larger system.

• Tutorial 1: Basic organisation (This tutorial)
• Tutorial 2: Style overrides
• Tutorial 3: Component matching
• Tutorial 4: Working with multiple pages and global components (coming soon)
• Tutorial 5 Drawing tools and organizing components (coming soon)
• Tutorial 6: Constraints (coming soon)
• Tutorial 7: Component composition (coming soon)

The thing we will be make will not be the nicest design in the world; the choices I make are based on being able to show you all features of Figma in the least complex way possible.

The basic website we will be creating

If you follow this tutorial, you will end up with a basic website created in Figma, next to a set of reusable components to build out your own system.

You can then port this knowledge to your own real design projects.

This series of guides was written in August 2018. Figma changes their application all the time, so your mileage may vary if you visit this article later. Depending on how Figma evolves the “best way” to do certain things might change.

The component system we will end up with

Disclaimer: this tutorial will tell you what to do (literally). I don’t mean to impose a certain workflow on anyone, this is just what works for me. it also makes the tutorial easier to follow, since it’s just one path from start to finish.

All shortcuts are Mac-based, for Windows equivalents, mostly you can substitute ⌘ with Ctrl, and ⌥ with ALT.

In Figma, a component is a reusable frame that contains layers, of which you can override various properties.

These components usually live on artboards with a specific name; this is going to important later on.

To start this tutorial you would start with an empty file.

1. Empty file

Next, create an artboard and call it “My design”.

2. Naming the artboard

Now fill it with some content: a button, a heading and a paragraph.

3. Adding some content

Create text styles for the heading and the paragraph from the right side menu.

4. Creating some text styles

Now, group the button layers and call the group button/primary/regular/label/normal.

This name might sound a little bit excessive and complicated, but you will find out why later on.

5. Building our first component

Hit ⌥+K to make it a component. You will see the layer name turns purple.

6. Naming is important

Give the button decent layer names, like “Button label” and “Background”. This will also become important later on. You can skip it but it might bite you in the back later.

Now duplicate the artboard to a second page (⌥+Drag the artboard).

Call the second page “Buttons”.

7.

Use ⌘+Y to see an outline view (like in Adobe Illustrator, cool!).

8.

Now, swap the buttons, so that the component lives on your “Buttons” page, and the instance lives in your design. This is the most confusing step.

In the screenshot above, the setup is wrong.

In the screenshot below, the setup is right.

9.

Go to the component tab, and verify that there is a button component.

10.

Now, make a third artboard called icons.

11.

Drop some SVGs in there. In this case I used some icons from material.io/icons.

12.

Now we have to fix up the icons. They have irregular sizes, and their names are not so great yet.

13.

First give them decent names, like icons/add.

14.

Important step here — Change all of the groups to frames. Frames enable constraints of the layers within.

Remember this… because when you might be using Framer X when it releases later this year, the concept is similar.

15.

Make the frames a 24x24 rectangle by using ⌘+drag.

16.

Position the icons in the middle of the frame.

17.

Remove any clutter from the layers, like groups that shouldn’t be there. In the below screenshot you can see a mask, and an unnecessary group. Remove these.

18.

You can use shorts like Ungroup (Shift+⌘+G) to easily remove groups.

We end up with 3 frames that are 24x24, and that have an icon in the middle.

19.

Set both constraints of the icons to scale/scale. The constraints panel is on the right side of your screen. You can select the vectors by ⌘+clicking.

20.

Now, make each of these a component by using ⌘+K (or hitting the component button on top of the user interface in the black bar)

21.

If we go to the components tab, you will see that now, the components are grouped by page.

22.

This is the basic start of organizing components in Figma.

You can view this design file by viewing this URL.

We will continue with our lesson in Tutorial 2, where we will cover more.

This is part of a multi-step tutorial. There are currently 7 lessons that average the length of this one, with multiple topics covered. These will hopefully be published over the next few days.

If you like this series, please give it some claps on Medium. It will encourage me to continue with more tutorials.