Subscribe to my newsletter and...
Get a free chapter of my book.
I regularly share the updates on new design tutorials, tricks & news. You may expect also to get notified about my tools announcements. No spam!Get free chapter + join newsletter
Creating design system library for Figma is an exciting journey. It allows not only to rethink every tiny element to serve designers in their future work, but also learn dozens of tricks & techniques.
Here is a bunch of them I learn while preparing my library.
Create separate variables collections for color foundations (primitives), semantic (components), spacing, radius.
Color foundations collection gives you flexible palette as basis
Semantic colors make easy to attach them to existing and new components. Having dedicated tokens, for text, border, background or icons make the kit super flexible and ready to act as design system library.
Having separate collections allows you to build dedicated modes - for colors dark & light, for spacing, for radius etc.
If you want to make collection private (some don’t want to expose primitives), you may simply add “.” or “_” as the prefix - just like with components. This prevents entire collection from being shared as library.
Some values should not be used as radius or spacing. Some colors should not be used for text or background. Figma variables scoping feature makes it easy to configure.
To maintain speed of use & define proper constraints for design system, you need to have generic semantic tokens & component ones. I defined global semantic tokens for background, stroke, text and icons, to be used in most of the cases but also component specific tokens for key components like buttons or inputs.
All of the semantic colors reference to base collection. To enable quick customization above raw colors I have defined brand palette to include primary, success, warning, danger & neutral. You modify only these, and get the right semantic tokens everywhere. Magic.
I have decide to use “bold”, “medium”, “subtle” for tokens with high, medium or low contrast ratios. This helps to keep meaningful naming even if you switch between dark & light mode.
For light mode it’s often the drop shadow to define hierarchy. In dark mode it is level of surface brightness. Define elevation variables that may look same in light mode (all white), but in dark mode they do the work automatically.
For some text or icons you want to keep the color even between the modes, prepare options for that. In my system there are tokens for text that appears always on dark or light background no matter the mode
I've seen variables named like "primary-button-background-default", when using native Figma variables it is better to organize those tokens in groups, thanks to this all you need for token name is "background-default". It's easier to browse the collection.
Long lists of tokens may be reduced thanks to proper grouping. I recommed to have set of variables for detault set, and prepare sub-group for states like hover, pressed, disabled etc. This allows more efficient filtering & searching.
If you feel that that your dark themed UI includes too much vivid colors, use more desaturated tones from base palette to create proper appearance.
There are at least 2 ways to organize component properties for ease of use. First, put the most often used on top. Second, order them in a way that is similar to UI element layout.
I used tip by JordanAmblin to improve optical balance of the buttons with additonal container for button label. Now no matter if button has icon, or not it will always look pixel-perfect.
Let's take a button as the example. It may include icons on both sides, but you do not have to show them by default. Let your design system users decide which icon they want to show (if any). Not every property should be visible from start.
To make your UI trully international and ready to RTL languages use leading/trailing instead of left/right naming in your component.
Some tend to create large variant groups, like the ones for the button that include all options - primary, secondary, tertiary, danger etc. This does not help to explore the the system, split major component groups into separate variants.
Asset panel tend to list components in alfabetical order, if you want to group some elements (like atoms first, modelucels next), you may use number prefixes to force the order.
Add keywords to icon component description. All words are indexed and when you search for the component they will appear in the list.
Figma feels more and more like nocode tool where you think how things work. Use Auto layout wrap for Footers or Grid Galleries to define the right responsive behavior automatically.
This technique allows you to quickly swap instances of each column, and what is also essential adjust the width.
With newest version of Prime, I decided to create color palette that will go further than WCAG 2.0 contrast checkers. I used APCA to enhance color contrast perception across the system.
It is a good practice to balance icons & text by making them a bit brighter (in light mode). With separate token structure it is easy to achieve.
Let you text primary, background primary, stroke primary work as the team - when combined together they should look well. The same applies for secondary tokens or success, danger or warning ones.
Design system is never complete. That's why it is important to prepare structure, naming conventions that will be easily expanded to include more variables, styles or tokens.
Every tip may seem as a small improvement, but combined together helps to create powerful & resiliant design structure and worflow, even if you do not plan to create design system.
If you would like to see all these implemented in real solution, feel free to preview my kit.