How I Structured My Design System Using Figma’s New Variables

I will walk you through how I used Figma’s new variables to create smart Design Tokens for a comprehensive design system in just a few days.

Announced in June, Figma released a series of new features that greatly improves the way we build and use design systems, lowering our dependancy on third-party plugins.

Figma clearly understand the power and success of Design Tokens, and have now made it possible for us to create them using Variables. For a more comprehensive explanation, read Figma’s release notes here.

In this article, I will demonstrate how I’ve organised a design system using these Variables. I will also explain how these Variables will be used throughout my daily design process.

Variable Collections

Collections are Figma’s name for grouping Variables of the same type. This is the main way your Variables will be organised.

I created the following collections of Variables:

• Base Colors
  (edit: Figma suggests naming these ‘Primitive Colors’ or ‘Primitive Tokens’)
• Color Tokens
  (edit: Figma suggests naming these ‘Semantic Colors’ or ‘Semantic Tokens’)
• Number Tokens
• Devices

Color Variables

Creating Variables for color styles allows us to style components in a smart way, making the most of the capabilities of Variables.

The Relationship Between Base Colors and Color Tokens

To create Variables that resemble the structure of design tokens, I’ve create two collections:

1. Base Colors: Defining the Hexadecimal color value (#123456) of all of the colors in your team’s color palette.
2. Color Tokens: Defining the semantic colors / use cases that will be used to style objects and components.

Base Colors

An alias of these Base Colors are used when we define our Color Tokens.

Color Tokens are the variables we will use to style components and used everyday by the design team.

Design Tokens

If you’re not familiar with the power of Design Tokens, here’s a brief overview to give you context to the benefit of setting up the design system this way:

If a designer hands over a design to a developer with Hex values (i.e. #123456), or linked to a ‘Base Color’ (i.e. Yellow500 or BrandPurple), it requires the designer to provide detailed specifications to communicate to the developer what color to use for different color themes (i.e. light vs dark mode), which is time-consuming, or (more common) the developer is left without the necessary information, causing them to waste time following up with the designer, using a Hex value, or creating a new color style within their environment that has no connection to the design system.

To prevent this issue and support designer-developer relationship, it’s highly recommended across product teams to establish Design Tokens (also known as semantic colors or use cases) for use within your team’s design system.

In this article, I will refer to these design tokens as Color Tokens, which are Figma Variables, that allow us to define a color for each Mode (also known as theme).

I will go through how to set-up Color Tokens as Variables shortly, firstly, it’s necessary to establish your design system’s Base Colors.

Step 1: Create a New Collection: ‘Base Colors’

Base colors are defined once, and rarely updated. This base color palette represents all of the colors that can possibly be used in your design system. It will contain all of your brand colors and colors used for your UI elements, to give you as much flexibility of color that your product desires. However, the less colors, the ‘better’ and more efficient your design system is. Less means less human error on both designer and develop side, especially when linking the colors, and when maintaining the design system. Most of the colors will be shades of grey that are used for different UI elements such as dividers, icons, etc.

Base colors are:

• Only used within the Design System Figma File
• Not to be used to style components within the design system
• Should not be used by your design team to avoid them ending up in developer handover.
• Should not used by developers as there’s no defined link between different themes (light and dark, for example)

This is what it looks like adding a color variable to my new collection called ‘Base Colours’.

Once I’ve added all of the colors I want available in my color palette, it should look something like this:

There’s one last step for the Base Colors. It’s highly recommended that the base colors themself should not be used everyday by your design team, nor should they be used when defining colors for components, screens.

For this reason, before publishing these to your team libraries, I highly advise you to select ‘Hide from publishing’ on all of these Base Colors.

Tip: Figma will soon release an update which gives the entire collection a ‘Hide from publishing’ checkbox. Until then, you can add “.” or “_” before the collection name to hide the entire collection from publishing.

This prevents these colors from being visible when your design team is working on a feature in another file linked to this design system.

With the above Base Colors set-up, you will eventually link these Base Colors to ‘Color Tokens’ which will be used for the components within your design system, and by your design team everyday.

Step 2: Create a New Collection: ‘Color Tokens’

Also known as semantic colors, use cases, design tokens, etc.

Colour Tokens are:

• Used to style components in the design system
• Used to reduce the amount of design specifications needed in design handover
• Makes it possible to quickly preview designs in different color modes/themes
• Shared and used by the entire design team
• Used by developers

Setting up for Light & Dark Mode

When setting up a Color Token, you define The colors that the element should be in each ‘Mode’, for example, light and dark mode, and any other themes your product has.

Defining colors for Light and Dark mode, for example, gives designers (and developers!) the ability to quickly preview how a design will look, with very little effort:

Linking back to the Base Colors

When setting the color variable, it’s important that you don’t use Hex values, instead link the Base Colors to form an alias between the Color Token and the Base Color. This step is critical, as it makes sure:

1. You are only using the colors your team has already defined, preventing ‘new’ random colors from being used.
2. You are creating a link between the Color Token and the Base Color. Which means if the Base Color needs to be updated throughout the product (for example maybe the branding team wants to change the brand color) then you do this in one place, which update all of the linked Color Tokens and components using these Color Tokens.

You should end up with a list of Color Modes that might look something like this:

The amount of Color Modes will depend on your team and product. You will notice I have used a Hex values for the iOS Status Bar — this is because I don’t want to use my design system colors for native elements I don’t have control over (however, I could create an iOS white and iOS black Base Color, but since they will only be used once, I don’t yet find it necessary).

Step 3: Create a New Collection: ‘Number Tokens’

Here, I’ve created variables to define rules for Spacing and Radius for use throughout the design system. Note that these are a different type of variable to the Color variables used above, here we use Number variables.

This is extremely useful for improving consistency and increasing the speed at which a design team can design, as they don’t need to go too far to search for rules and guidelines, as the variables can be defined to be available in the exact location they will be used.

This can be achieved by limiting where the variable can be used. Open the variable’s settings and defining the appropriate Number Scoping that relates to the Token’s use:

You can use this to limit a variable in the following locations:

• Corner Radius
• Width and Height
• Gap and Padding
• Text

Create a New Collection: ‘Devices’

Honestly this is a great hack for quickly previewing design responsiveness on different devices within Figma. It means you only need to produce one design, making it much more efficient to manage, as there’s one source of truth.

To achieve this, create a new collection called ‘Devices’, and add Modes for each device type your product and team design for (mobile, tablet, desktop, etc.) and create Number Variables for each device’s width and height.

When to use

Use these variables wherever you create a frame for a specific device size, i.e. screens in your design system, and during everyday designing.

Whenever you create a new frame that should represent a device, set the frame’s width and height using the Device variables, like the following:

Once you’ve linked the device variables to the screen’s width and height, Next, put that frame into a section.

Finally, to auto-size the section’s children to a specific device, link the section to the Device mode of choice. Do this by selecting the section and on the ‘Layer’ panel in the right sidebar, tap on the variable icon and select a device mode you want the children frames to auto-size to.

Note: You can’t add a mode to a section unless there’s an object in the section that has a mode applied to it.

Using Variables for Min and Max

As you can spot, I’ve gone even further with device variables and used them to define Min and Max column widths for different breakpoints. This improves the responsiveness of content when it changes between different devices.

Example of where I’ve used Min and Max width for small columns:

Example of where I’ve used Min and Max width for default columns:

This results in auto-responsive designs:

Text Styles

As of the date of this article, Text Styles aren’t yet connected to Variables. However, Figma have outlined that they are working on adding this in the near future.

Conclusion

This is how I’ve structured a fairly simple design system, in less than a few days. I’m sure I will improve it over time, and as the system grows, but for now it’s allowing me to build components extremely quickly, with constraints that make sure my system maintains consistency.

Please give your feedback in the comments section so I can improve this article over time ♥.

Big shoutout to iOS developer and incredible human David Jangdal for working with me on this and providing a developer’s perspective.

This design system is based on a hobby project ‘The Good Guide’, and is not yet a live product, which gives me a lot of flexibility to experiment with new Figma functionality such as Variables.

Update: December 2023

Book a Mentor Session with Me!

Do you want to ask me questions about design systems and Figma Variables in a 1 on 1 session? Book a mentor session with me for free on ADPList! This is my way of growing my own knowledge, and giving back to the design community ❤️

FYI there are only a few sessions available each week.