Figma Variables
Design Processes
Named values in Figma — colours, numbers, strings, booleans — that can change by mode.
In practice
Figma variables are the design-file counterpart to code tokens: a colour called surface.primary that holds one value in light mode and another in dark, a spacing scale, a boolean that toggles a state. They let a single component render correctly across themes, densities and brands, and they export cleanly to the tokens a codebase consumes.
Questions
What is Figma Variables?
Figma variables are reusable, mode-aware values applied to design properties so components adapt to themes and contexts from one definition.
Why do you use Figma Variables?
They make design tokens real inside the design tool, so what a designer builds and what a developer implements finally share a source.
How do you use/apply Figma Variables?
Define primitive values, alias them into semantic names, group into collections with modes for light/dark or brand, apply to components, and sync with code tokens.
When do you use Figma Variables?
When a product has more than one theme, brand or density — or intends to.
Who uses Figma Variables?
Design-system designers and anyone building components meant to be reused.
