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 newsletterConfig 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!
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:
The Figma team promises that very soon, we will see options for the following variables:
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.
Now you know what variables are, simply look at examples of how they may make your designs better:
Now let's explain how to make it in detail.
Use variables to define design tokens in your design system. Here is the sample workflow of how you may do it in yours:
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.
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.
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.
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.
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:
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!
Let's add a cherry on top of your new knowledge about Variables. There are some recommended practices that will immediately help you:
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.
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.
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.
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).
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.
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!