Variables in Figma <> Collections Setup

If you’re here reading this, chances are you already know the immense importance of a design system and might have even built one yourself. And if you’re using Figma, then you’ve probably heard about their latest update, which introduces Variables.

We have a few words about variables, but to make things easy to digest, we’ve split them into a couple of chapters, where we’ll talk about variables and how to harness their powers.

Let’s go

Chapter 1. Variables Structure

Experts often suggest having Primitives and Semantics as the foundation of your design system. From there, you can introduce your layout, colors, and localization, with values inherited from the Primitives and Semantics. However, based on our own humble experience, we’ve learned that simply following this approach can lead to an explosion of variables, making control and discoverability a nightmare. To address this challenge, we’ve introduced an additional layer called Contextual and separated the other collections.

Let’s decipher what we just said.

Categorization: For a Better Context

We’ve organized the collections into categories to make them easier to track in the variable window and give more context when connecting them to your design.

1. Core/Foundation Collections: These collections serve as the building blocks of your UI. Here, you store raw values that are not directly related to the design. We’ve divided the Core/Foundation Collections into two groups: Primitive Tokens and Semantic Tokens.
2. Contextual Tokens (optional): This stand-alone collection acts as the glue between the Core/Foundation and Theme Collections, defining how variables are used in your UI. It’s totally optional, but its value becomes clear later in this article.
3. Theme Collections: As the name suggests, these collections are specific to your UI. We recommend splitting them into two groups: Layout Tokens and Color Tokens. Remember, Theme encompasses everything from colors to padding, margins, sizes, shapes, typography, and more.
4. Localization/Translation Collection: This collection is dedicated to the languages you’ll be using. You can choose to group all your translations in one collection or have them separated for each product or app. We recommend following the latter approach for better organization.

📣 Note. It may be tempting to combine the Theme Collections (Color and Layout) together into one collection, but that would be a common and significant mistake. Variables would become overwhelmingly large and difficult to trace, making them harder to work with and maintain. The solution lies in separating the collections.

Once you’re done with creating your collections, your variable window should look something like this:

This is how all the collections will look in the variables window.

Defining the Collections: What Goes Where?

Let’s delve deeper into the purpose and definition of each collection:

Primitive Tokens

This collection stores raw values stripped of any meaning. Think simple names like Blue, Purple, or Green, or even more specific shades like Baby Blue or Navy Blue.

You need to set up the variables in primitives; they are the basis of what is to come.

Semantic Tokens

This collection gives meaning to the primitives. Colors become primary colors, success colors, neutrals, and so on.

The values in this collection are inherited from the Primitive Tokens. We’ll explain the inheritance hierarchy in a bit.

Contextual Tokens (optional)

This is where you associate values from the Semantic Tokens to the UI you are building. This layer enhances the control and maintenance of variables.

The values here are inherited from the Semantic Tokens.

Layouts Tokens

Here, you can create layouts based on the devices and breakpoints you want to target.

The values in this collection are inherited from the Contextual Tokens.

Color Tokens

This collection is dedicated to your color modes, such as light, dark, anniversary, celebration, and more.

The values in this collection are also inherited from the Contextual Tokens.

Localization Collection

Here, you define the languages your project supports.

The values in this collection are not inherited from anywhere; you’ll need to set them up.

📣 Note. There is a master group called Colors in the screenshots above; this is because there will be other groups than Colors. For instance, you could have numbers to store pixel values in the primitive tokens. When you give them meaning in semantic tokens, they become spaces.

Separating Collections: Improving Your Workflow

When you separate collections, they become easier to work with. Since you’ll be working with a specific set of variables, you don’t have to go through tons of variables that you don’t need.

When you separate, you can hide a certain collection, or keep it accessible. As you can see below, selecting the right color is not easy when you see all collections.

You can still apply all your collections or some of them to your UI, even if they are separated. That totally depends on you and your workflow. For example, you can apply colors to one frame and layout to others, or you can apply both to all.

Applying multiple variable modes to your frame.

The “Inherit” Hierarchy: How Variables Flow

Let’s break down the hierarchy and pay attention to three key things:

1. Each layer inherits its values from the layer above it. Any change in the upper levels cascades down to the child collections. For example, if you make a change in the Contextual Tokens, only the Layout Tokens and Color Tokens will be affected. If you make a change to the Primitive Tokens, everything inherited from it will change.
2. Layout Tokens and Color Tokens inherit values from the Contextual Tokens.
3. Localization does not inherit from any other collection.

The Inherit hierarchy

By establishing this hierarchy, you can maintain better control over your variables. Each collection serves its purpose and feeds into the next layer, creating a seamless and hierarchical structure.

Contextual Tokens: Better Control and Efficiency

The purpose of the Contextual Tokens is to define how and where we use variables in the UI, reducing potential errors and keeping things on track.

When your UI team starts working, they’ll know exactly which colors to use for backgrounds and borders, for instance. Let’s say they want to select a color for a border. They have a set of border colors to select from. There is no room for inconsistency.

We believe it brings immense value to your workflow, but to truly understand its value, let’s explore an example.

Suppose you have the following setup in your variables, where borders and background are inheriting their values from NeutralGray500 = Gray500, in the Semantic Tokens.

Variables structure without the Contextual Tokens.

So, imagine you want to change the color of your borders from Gray500 to Gray200. How would you do that? By re-inheriting the values of all your borders from NeutralGray200 = Gray200 in the Semantic Tokens. In this example 4 times.

Now, let’s introduce the Contextual Tokens, the bridge between Core and Theme Tokens.

Variables structure with the Contextual Tokens.

How would you change the borders? Make them Gray200? Easy, in the Contextual Tokens, re-inherit the border color from NeutralGray200 = Gray200 in the Semantic Tokens. That’s it. Only one time.

You want to edit only the field border? Re-inherit it from another color in the Contextual Tokens.

Introducing a fresh new color? Start at square one! Add it to Primitive Tokens, then build up the inheritance chain from there.

If you would like to inspect these diagrams in a better quality, head to this FigJam file.

Conclusion

Building a well-structured design system takes time and iteration. As you navigate these scenarios and make adjustments along the way, you’ll refine your understanding and skills, ultimately mastering the art of variables. So don’t be afraid to experiment, learn from your experiences. This worked for us. You need to find what works with you.

Thanks for reading. If you have any more questions or want to go deeper into this topic, I’m here.

Happy designing!

This article would not have been possible without my collaborator, Anton Parkhomenko, and countless brainstorming sessions and many rounds of trial and error. We’re hoping this will provide valuable insights for you when building your design system with variables.

Peace ✌️

Update: Some readers asked for the variables file, in order to study and analyze them. I’ve built a simple file, you can find it in Figma Community. Cheers!