Creating a design system in Figma — Tutorial 3

Whew. We’re already in tutorial 3. If you managed to follow things so far, kudos to you.

Here’s an index of all tutorials:

• Tutorial 1: Basic organisation
• Tutorial 2: Style overrides
• Tutorial 3: Component matching (This tutorial)
• 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)

So far, we created a design that looks like this.

1

It looks pretty bare, so let’s fix some of that up. For now, let’s assume we are making a website.

Change the frame size of the “My design” artboard to the more appropriate “Surface Pro 4”, and let’s evolve the design a little bit.

2

Copy paste the block with the button, heading and text we created 2 times.

3

Put your layers in groups. I called my group “Item”.

4

Now, resist the temptation to make everything a component. In Figma it’s important to know when to make something a component and when not to. This is one of those cases where you don’t.

Make a third group and call it “Hero”.

5

Within hero, put a group called “Intro”.

6

Press R to draw a rectangle and drag it over the area.

7

Right click the rectangle, and use “Send to back” to send it to the back, or alternatively, learn the shortcuts, because you are going to use this a lot.

The right click menu

The shortcuts for arranging layers are:

• Forward: ⌘+]
• Back: ⌘+[
• All the way to the back: ⌥+⌘+[
• All the way to the front: ⌥+⌘+]

Give it a more pleasing color.

Now, change the background of your document to a darker grey, so it’s easier to see your design.

You can do so by de-selecting all layers (click outside of the artboards) and then on the right hand side, on top of the design tab, change the background.

Choosing a color for the document background (top right of the UI) — Step 1

Choosing a color for the document background (top right of the UI) — Step 2

Nice.

In the next step, I tweaked the content: I changed every button to say “Read more”.

10

Now, select the button instances at the bottom of the page.

11

In the instance menu, you will see that there is a “Best match: normal”. This is slightly confusing, but click the second “normal”.

Alternatively, go through the whole dropdown tree, to select the secondary button.

The naming of our components, with the slashes (/) in between created a choice tree for overrides.

Because we have these 2…

* button/primary/regular/label/normal
* button/secondary/regular/label/normal

…the spit occurs at the second level, as a choice between primary and secondary. And there are a total of 5 levels.

Now, go ahead and change both buttons to “secondary”.

If you did your layer naming right so far, you will see that our “Read more” text stays there. Nice!

A few steps ago, we added a new color to the system, so let’s document it as well.

Here, I made a new color style called Grays / Gray 100.

It’s important to document as you go along.

If we look at our design so far, I think I might just change my mind, and make the buttons blue again.

To do so, I click edit style on the “brand primary” color.

I chose a soothing blue…

Hmm. Our button is still red. Let’s attach “Brand primary” to our button.

If we zoom out, we will see the global change across all buttons.

This is it for tutorial 3. We learned about frame sizes, component overrides, changing the global background and using styles within components.

If you want to see the design file for this tutorial, you can head over to this file.

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