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.
Deliverables & ArtifactsVariables 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
You may ask
Frequently Asked Questions
What is the difference between Figma variables and design tokens?
Design tokens are the general concept — named design decisions shared between design and code. Figma variables are one implementation of that concept inside the design tool, and they can be exported to feed the code side.
What are Figma variable modes used for?
Holding different values of the same variable for different contexts — light and dark themes, density settings, brand variants — so switching a frame's mode re-resolves everything bound to it.
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.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us