Creating a design system in Figma — Tutorial 2

Let’s continue our quest to create a design system in Figma.

In the previous tutorial, we landed at a design file with 3 artboards: one for the design itself, and then another for the component documentation.

Let’s learn about overrides first.

I am going to give my button another color. I select the component and give it another color.

You can see that the change occurs in the 2 buttons: the one on “My design” and the other one on the “Buttons” page.

Now, ⌥+drag to make another button.

Let’s change the text in the second button. Double click the text layer and start typing. It’s a direct edit, nice!

Let’s change our color again. Maybe to a nice red.

You will see that every button changes along with the component.

Let’s change the color in the instance itself.

You will see that only the instance changed. In the overrides menu, you will see that we changed the fill color. You can reset it to the original fill.

For now, the only thing to remember is that we can override properties on components, without modifying the original component.

Now… maybe you actually want to document the 2 buttons.

Move the 2nd button to the components panel.

Now it’s important to realize that this is not a component, but an instance of the original button.

Right click the instance and select Detach instance.

Now, in the layers panel, you will see that the component became a regular frame again.

Let’s do some more organising work to prepare ourselves for a future design system that can grow.

Change the text back to “Button label”. This is going to be important in the future.

Let’s change the name to button/secondary/regular/label/normal.

You might remember that in Tutorial 1, we gave our button the following component name: button/primary/regular/label/normal. We noted that this was a bit of an excessive name, but we would see why later on.

Select the frame and hit ⌥+K to make this a component

If we go to the components panel (Alt+2), we see that we now have 2 buttons.

Let’s actually style it like a secondary button now.

This looks better.

Let’s do some basic color management.

Create a new artboard called colors.

The red we used is #DE1616.

Create a rectangle, and use the same color value. You can use Ctrl+C to open the color picker.

Make a 2nd rectangle, and give it the same background as the secondary button.

Create a color style called Brand / Primary.

Create another color styled called Grays / Gray 200.

If you deselect all your layers, you will see the newly created colors on the right side under “Local styles”.

Maybe you might think it’s a bit weird to document colors separately when you have a styles panel; you will see later on why this is a good idea.

This is our result for today.

We learned about overriding styles; and about adding color styles.

We will continue our lesson in tutorial 3 soon, which will be published tomorrow.

You can view the end result of this tutorial in this Figma file.

If you liked this post, give it some Medium claps, so I am a bit motivated to write part 3!