25 Tips for Figma Design Systems

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.

Tip 1 - Don't limit yourself to 1 Variable Collection

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.

‍

‍

‍

Tip 2 - Variable modes adds flexibility & automation

Having separate collections allows you to build dedicated modes - for colors dark & light, for spacing, for radius etc.

‍

‍

‍

Tip 3 - Control collection visibility

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.

‍

‍

‍

Tip 4 - Scope your variables to increase ease of use

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.

‍

‍

‍

Tip 5 - Balance semantic variables

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.

‍

‍

‍

Tip 6 - Use variable references to create easily customizable system.

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.

‍

‍

‍

Tip 7 - Have a consistent naming for different contrast variables within the system.

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.

‍

‍

‍

Tip 8 - Plan elevation layers

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.

‍

‍

‍

Tip 9 - Not everything switches equally in dark mode

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

‍

‍

‍

Tip 10 - Simple variable naming & structure is important

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.

‍

‍

‍

Tip 11 - Group semantic variables depending on state

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.

‍

‍

‍

Tip 12 - Reduce the saturation of dark mode

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.

‍

‍

‍

Tip 13 - Organize component properties.

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.

‍

‍

‍

Tip 14 - Optical balance matters.

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.

‍

‍

‍

Tip 15 - Don't show all properties upfront

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.

‍

‍

‍

‍

Tip 16 - There is no left or right

To make your UI trully international and ready to RTL languages use leading/trailing instead of left/right naming in your component.

‍

‍

‍

Tip 17 - Expose components proper way.

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.

‍

‍

Tip 18 - Order elements in the Asset panel

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.

‍

‍

‍

‍

Tip 19 - Increase speed of finding the icons with keywords

Add keywords to icon component description. All words are indexed and when you search for the component they will appear in the list.

‍

‍

‍

Tip 20 - Use Auto layout wrap for larger components

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.

‍

‍

‍

‍

Tip 21 - Create table columns components instead of rows for faster configurability

This technique allows you to quickly swap instances of each column, and what is also essential adjust the width.

‍

‍

‍

Tip 22 - APCA is better than WCAG 2

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.

‍

‍

‍

‍

Tip 23 - Icon tokens of the same level, should have less contrast than text tokens

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.

‍

‍

‍

‍

Tip 24 - Prepare sets of the tokens (variables)

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.

‍

‍

‍

Tip 25 - Plan for expansion

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.

‍

‍

Summing up

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.

‍

‍