Build Your Team’s Design System with Figma
To create beautiful and consistent interface for your product, you need design system. Design system is a set of reusable component, color, typography, style, and other elements that assembles your product UI design. This system help development team to design the product easier and consistent.
If you familiar creating high-fidelity prototype using Figma — a browser-based interface design application — you should be understand how to create design system in it. If you don’t, we’ll find out together in this article.
In this article, I assume you have already familiar with basic of Figma.
Component
Component is the most important feature to allow users to create design system on Figma. Component is a reusable element. Let’s jump to example.
Suppose that you want to create button. Button will used everywere on your app. You will not create a button from scratch every time you need it, right? You probably duplicate the existing button and change the text. That would work. But what if in the middle of designing, you (or your client) want to change the color of the button. What you gonna do? Change the color of every single button you duplicate? That’s exhausting. This is where Component come in handy (and should be always used for reusable element).
So, to create Component, create the element first. In this case, a button.
Group or select all the element of that button. To convert it to Component, you can do it in three way:
- Click the four-diamond icon on the top toolbar.
- Right Click -> Create Component
- Press Ctrl-Alt-K on keyboard
Now, the button has become Component marked by filled four diamond icon on the left frame bar.
If you copy-paste the component, that duplicate will become Instance. Now, try change the text of the instance. Changing the text, color, or other properties of instance means overriding the properties of component.
If you change the color (or any other properties) on the Component, the color on instance will change too! But if you change the text on Component, the text on instance will not changed because you already overriding the text on instance by changing the text.
State
What if my button has state? For example, my button will be unclickable (in mute state) when the form field is invalid. You can create button (or any element) state by creating more Component.
First, duplicate the button component and change the color to gray. After that, convert this instance to new component. Rename the component using “/” so the component can be categorized.
Create instance of one of that component. In this picture, Active Button component. This instance can be swapped to other component (e.g. Mute Button) by click instance dropdown on the right bar and select Mute Button.
Now, the state of the button changed without alter the text.
Icon
Component can also be benefited to create icon component. With component, you can find, reuse, and swap icon easily.
All components you create can be found easily in the left bar on Assets menu.
Style
The second most important feature on figma to create design system is reusable style. With this feature, you can reuse style so your design can be consistent and changed easily.
Color Style
To create consistent color, you should create color library or Color Styles.
To create Color Styles, create any shape with chosen color first. After that, select that shape and add that color to styles by click the four-dot button in the right bar on Fill section.
Name your color. I suggest to create several shade by using “/” in the name (just like component).
Actually, the best practice is name color based on its functionality, not the color name.
After creating several color style, you can access the color on four-dot button.
Text Style
To create consistent font size and style, you need to create typography or Text Styles.
To create Color Styles, create any text with chosen font size, color, and type first. After that, select that text, add that text to styles by click the four-dot button in the right bar on Text section and give it name.
After creating several text style, you can access the text style on four-dot button.
Effect Style
Some times you also need Effect Styles to create elevating impression on your elements.
To create Effect Styles, create any shape with chosen effect style first. After that, select that shape, add that effect to styles by click the four-dot button in the right bar on Effect section and give it name.
After creating several effect style, you can access the effect style on four-dot button.
I think all features above is enough to create consistent and reusable component across the teams on Figma.
