Config 2023 introduced many game-changing updates to Figma. One of them is for sure Variables.

Many of us expected to see straightforward design tokens feature, but Variables are dedicated to be used as tokens and may do much much more!

Grab the mug of your favorite coffee, and let's discover all mysteries of the new Figma feature!

What are Variables?

Variables are dedicated to store values that may be used as properties across your designs. Their goal is to help you make the design more intelligent; they may become tokens for your design system or adjust prototypes to specific rules. Advanced prototyping with them just became much simpler.

This tutorial feature was in public open beta when I was writing and is still dynamically developed.

Variables can store the following values:

1. Colors - use for fills & strokes
2. String - apply for text layers
3. Number - use for spacing, size, text layers & corner radius
4. Boolean - true/false values for layer visibility of variant instances

The Figma team promises that very soon, we will see options for the following variables:

1. Typography
2. Gradients
3. Effects

‍

Variables modes, groups & collections - what are these?

‍

ariable modes allow you to define alternative values applied to a different mode.

The most practical & popular usage may be to create background variables for light mode and dark mode. An alternative example may be spacing - apply width or padding for breakpoints - desktop, tablet & mobile.

‍

‍

‍

Once you have variables and their modes, you may start to think of how to manage them easily.

There are several ways to organize your variables. Just like with styles, you may group them by adding "/."

You may create groups for colors, text, radius, or spacing. They will work within one collection.

‍

‍

‍

So, what are collections? They are the next additional layer of organizing variables.

If you work in design systems, you often define primitives like a wider range of colors and full typography scope; then you build more semantic colors and reference primitives, and finally, you apply semantic colors to specific component tokens.

This is where collections are useful. You may separate primitives as separate collections, then another one for semantic tokens, and the third for the component layer. There are obviously other practical usages, but this is the most straightforward case.

‍

‍

How Variables may be used in designs

Now you know what variables are, simply look at examples of how they may make your designs better:

1. Use variables as tokens to manage design systems better
2. Define properties for different breakpoints
3. Prepare your designs for light & dark mode, or even multiple themes superfast
4. Prepare designs in multiple languages on the fly
5. Create advanced prototypes with conditional logic

Now let's explain how to make it in detail.

‍

‍

1. Variables in Design Systems

Use variables to define design tokens in your design system. Here is the sample workflow of how you may do it in yours:

1. Add your entire color palette as a "Primitives" or "Foundation" Collection.
2. Prepare a collection of semantic colors (backgrounds, strokes, text, etc.). As values use references from the Primitives collection.
3. At this point, you may also add a mode to make tokens for "Light" & "Dark" themes
4. If you want to add the final layer to your design system, define the collection of components. It will also include Light & Dark modes. Add variables for "button-background," "modal-stroke," etc., and put references to semantic tokens as values.

Now you have quite a solid foundation for color tokens in your design system! Follow the same pattern for number variables to create spacing & corner radius.

‍

‍

2. Variables for different breakpoints

When it comes to adding spacing values with number variables, you may consider adding modes for specific device breakpoints.

Depending on your project requirements, add the default for desktop, then tablet, and mobile options.

If your product is going to have a customizable UI, you may consider making spacing modes for "standard," "compact," and "spacious" options.

‍

‍

‍

3. Light & Dark mode with Variables

As I already mentioned in the first point. When you add a variable, you may add an extra mode to it.

The most intuitive way of taking advantage of modes is to define "Dark" & "Light" ones.

‍

‍

4. Multi-language designs with Variables

If your project handles multiple languages, it is always hard to prepare every design tailored to different countries.

Now, when you define collection for the project copy, define languages. Every mode of the variable will be a different language. The first is always a default one.

Now when you have a section in Figma that uses a specific mode, all your designs will turn into a specific language.

‍

‍

‍

5. Advanced prototyping thanks to Variables.

Have you ever prepared a prototype that looked like spaghetti? Use variables to build advanced prototypes that are far more intelligent and simple!

Thanks to variables, you may create prototypes that make calculations or rely on conditional logic.

To keep your variables clean, you may add a separate variable collection dedicated to prototyping values.

Calculations are possible thanks to the prototyping option "Set variable." You may set a specific value or even calculate it based on other referenced variables.

Here is an example of how to prepare an interactive prototype with variables:

1. You have to connect the variable to a specific layer (text label showing the number of items in the cart)
2. Jump to the component that, when clicked, will initiate the calculation (in most cases, this will be a button).
3. With the button selected, switch to prototype mode and add "on-click interaction."
4. Pick the "set variable" option and select the variable you applied to the text label from the first point.
5. In the next Section, called "to," you will configure the target value that will appear after interacting with the button. This might be a constant value, mathematical operation, or expression.

‍

‍

Conditional action allows you to use "if else" to provide specific logic. Use an example from the calculations above. Without a conditional, your items in the cart may go to an infinite number; if you want to limit the number of items (or prevent it from displaying negative values), add a conditional option to the button component mentioned above. You may drag your "set variable" option into a specific conditional section and set an alternative path within the "else" Section.

The best way to learn all these possibilities is to play around with them for a while. A few iterations, and it will become familiar to you!

‍

‍

‍

‍

‍

Additional Tips for Figma Variables

Let's add a cherry on top of your new knowledge about Variables. There are some recommended practices that will immediately help you:

‍

‍

Tip 1: Making collections private

There are several reasons why you may want to make variable collections private. For instance, you may want to hide primitive values and expose only tokens.

To make collections private, just like with components, add a dot "." or underscore "_" as the prefix of your collection name.

It's that simple.

‍

‍

‍

‍

Tip 2: Styles or Variables?

It is obvious to ask yourself a question which feature to use for my designs? Figma allows us to use both and achieve almost the same results.

However, Variables are much more advanced, and if you are building a kind of design system or doing more prototyping work - go for them! On the other hand, there are no variables for some properties like gradients or effects, where styles work very well.

Also, it is good to know that variables are more atomic; they store single values, whereas styles may be a composition of values.

Finally, variables may reference other variables, which makes them much more configurable. Styles cannot do that.

‍

‍

Tip 3: Use Sections (or Pages) to show the variable options set.

Once you put your designs in a specific Section, you may select this Section and configure the Collections & Modes used within the area.

Thanks to the above configuration, you may be sure that all designs within that Section use a specific set of variables.

It is worth mentioning that you may apply the same technique to the entire Page. This means that you may split different languages and dark/light modes into different Figma document pages.

‍

‍

Tip 4: Reordering Variables

Variables are organized in alphabetical order. This means you cannot (yet?) drag & drop to customize it like styles.

This, unfortunately, means that in the core file, you will see all your private Variables on top of the layer list because they start with "." or "_." The rest of them may be organized better thanks to the good naming convention (collections may start with numbers).

‍

‍

Tip 5: Using Variables in different files

Just like with styles, you may publish Variables in your Library document. Then enable Library, and you will be able to see them in different documents. Super helpful for more complex design systems.

‍

‍

‍

To conclude

Figma Variables are a powerful weapon for every designer. Obviously, you may skip them and work as you used to prepare designs. However, leveraging the power of new features will boost your workflow a lot, so I highly recommend exploring them and include in your daily design activities.

Now let me get back to work on preparing massive upgrade for Prime Design System Kit. This won't be just an update, I want to craft it to get most of the new Figma features. Stay tuned.

Thanks for reading!

‍