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.
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:
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:
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.
So after the designer enters the menu, they just type in the labels.
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.
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.
If you make the property values be True and False, it will turn the variant UI in Figma into a toggle like this:
For my interactive tree node component, I can control it quite easily with several properties.
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.