Member-only story
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:
- Colors — use for fills & strokes
- String — apply for text layers
- Number — use for spacing, size, text layers & corner radius
- 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:
- Typography
- Gradients
- Effects
Variables modes, groups & collections — what are these?
Variable 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…
