How to Build a Design System in Figma
By: Ana Boyer
Tags: Design, Atomic Design, Figma, UX, Design Systems

However, let’s say I need to update the color and spacing of all my banners. It would be annoying and time consuming to apply those kinds of changes on every banner. To avoid this, I create a primitive. Primitives are the parents of a set of components. The hero banner primitive is composed of all the elements found in its different versions, and its responsiveness is constructed so that all its children resize and respond in the same way. In the example below, when the parent changes color or type placement, all the different hero banner components change as well.

Unfortunately, primitives cannot always be built out for every component due to Figma’s limitations with responsiveness. For example, the single line tooltip needs to stretch out horizontally, while the multiline tooltips expand vertically, while the key/value tooltips need to both vertically and horizontally resize while maintaining consistent spacing between its columns. Because of these differences in responsiveness, it’s impossible to create a primitive that encompasses all these components.

However, I could still organize and reduce the tooltip component into one by making variants.

Group using variants

Variants simplify component selection. Before Figma created variants, my team would organize components by manually naming them: hero/button, hero/button+info, etc. To switch components, we’d directly select a different component.

Now, with variants, the hero banner is one component with four variants:

Variants really shine when used on components with multiple states — like form input fields. In my design system, I have six types of input fields and up to ten different states for each input field.

Rather than navigate through six different components to choose the desired input field type, there is now only one input component whose type, population, and state can be changed via dropdowns.

Create responsiveness using autolayout

To keep all instances of a component linked to the design system, it’s important to use autolayout to make components resize and respond as intended. Unfortunately, Figma cannot always perfectly implement this, so if a designer needs to detach a component to make a change (e.g. increase the number of key value pairs in a tooltip), I leave a note somewhere in the documentation where they can easily see it.

Name all layers

Because Figma lets a component change its instance’s properties without detaching from the master, having a naming system helps designers better navigate through component’s layers and understand what can be changed. For my team, I capitalize layers whose properties can be changed and mark *optional* layers that don’t need to be in the component (ie further descriptive text or links).

Organize into files and pages

In addition to organizing a component’s layers, it’s also important to organize the entire design system. My design system is split into files with different components (Type, Color, Cards, Buttons, Forms, etc.) which are then further divided into pages such as different form components (checkbox, radio, input).

Conclusion

Creating a design system is a big feat, but ultimately made my team more efficient and consistent. I hope these tips will be helpful to others, but it’s also important to keep in mind that there’s no one-size-fits-all system and how you structure yours really depends on what works best for your team. Please leave a comment with any other suggestions or tips you have on creating a design system!