Figma Variables
Named values in Figma that hold colours, numbers, strings and booleans, with modes for theming — the design file's version of design tokens.
Variables store a value once and reference it everywhere: a colour, a spacing number, a string, a boolean. Modes are the feature that matters most — one variable can hold different values for light and dark, for compact and comfortable density, or for brand themes, and switching a frame's mode re-resolves everything bound to it. That makes theming a property of the file rather than a duplicated set of screens.
The point is the link to code. Variables map naturally onto design tokens, so a colour ramp or spacing scale can live in one place and be exported rather than transcribed. Where teams go wrong is naming: variables named by appearance (`blue-500`) rather than by role (`surface-brand`) recreate the problem tokens were meant to solve, because the name stops being true the moment the value changes.
In practice
A team maintained separate light and dark versions of every screen — 240 frames, drifting constantly. Rebuilding on semantic variables with two modes cut it to 120 frames with a mode toggle, and the first brand colour change afterwards took minutes instead of the two days the previous one had.
Where teams get it wrong
- Naming by appearance instead of by role, which breaks the first time a value changes.
- Variables in the file that do not correspond to tokens in code, so the two drift.
- Modes used for one-off variants rather than for systematic dimensions.
- Collections structured so nobody can find the right variable, so people type raw values.
- Treating it as a Figma feature rather than as the design half of a token pipeline.
( Learn more )
Related terms
All terms- Design TokenA named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
- Color SystemThe palette plus the rules for applying it — semantic roles, contrast requirements, and the values behind each mode.
- Spacing ScaleThe fixed set of gaps, padding and margin values a product is allowed to use, usually built on a 4 or 8 pixel base.
- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.