Figma variants 2022

Follow-up to Rules for a Good Figma Design System

Design system principle

Make every component so the designer does not need to do anything “custom”. They just add and configure components off the shelf and change text. Make it impossible to mess up.

Variants

The key to a good system is to use variants liberally. I will walk through an example component that I made a little while ago. Let’s imagine a designer wants to put a menu on a drop down box like this:

Example menu

Starting backwards, the way I want the designer to manipulate this menu is with variants. For menus it would look like:

These variants look like this:

Item variants

Each of the variants have a text box and an autolayout.

The menu itself is just the background color and shadow, plus the sub-component.

Menu component

So after the designer enters the menu, they just type in the labels.

Menu in action

The menu grows vertically and horizontally depending on the length of text and number of items. Padding and line-height are controlled on the component.

True/False properties

Whenever possible make your variants use True/False rather than a drop down box of mixed metaphors.

Take this modal for example. There are times when a designer needs a subtitle at the top and sometimes not.

Example modal

If you make the property values be True and False, it will turn the variant UI in Figma into a toggle like this:

Notice the toggle

For my interactive tree node component, I can control it quite easily with several properties.

Controls for tree component

Summary

Not the most amazing blog post, but it’s nice to see other people’s techniques sometimes, isn’t it? If I had a professional license for my personal account, I would just give view access to all my historical work to anyone who wanted to see. It’s too bad Figma reduced the free account so much. I have to keep all my files as .fig instead of the actual file.


Whatya think?