Figma Variables cheat sheet

What variables hold, and how collections, modes and aliases fit together.

Figma2 rules, updated 7 Oct 2026Verified 7 Oct 2026

Viewport: All

Viewport references are useful starting points. Design breakpoints should respond to the content, not specific device models. Choosing a viewport changes what is emphasised; nothing is hidden.

Basics

What variables hold

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

A variable stores one raw value: a colour, a number, a string or a boolean. Apply it wherever that value would otherwise be typed in.

Colour: Solid fills and strokes. Palette and semantic colours.
Number: Any numeric property. Spacing, radius, sizes.
String: Text. Copy that changes by language or context.
Boolean: True or false. Showing and hiding layers.

Why?

A value typed in a hundred places has to be changed in a hundred places. A variable is changed once.

Common mistakes (2)

Variables named after their value, such as blue-500, used directly in designs.
A variable for every one-off value.

Official guidanceFigma

Figma
Variables store reusable values that can be applied to all kinds of design properties and prototyping actions.
Figma Help, Guide to variables(opens in a new tab)Tool documentation
Figma
Variables can store single, raw values.
Figma Help, The difference between variables and styles(opens in a new tab)Tool documentation

Structure

Safe starting point

Two collections

Collections, modes and aliases

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

A common setup: a primitives collection of raw values, and a semantic collection that aliases them and carries the modes, such as light and dark.

Primitive
blue-600
A raw value with a neutral name.
Semantic
color-action
What the value is for. Modes switch here.
Component
button-background
Where it is used.

Each layer points at the one before it. The names are examples, not Figma's or any system's. Change the primitive and everything downstream follows.

Why?

Designs point at the semantic layer, so switching a frame's mode re-themes everything without touching a component.

When to deviate. Add a component-level collection only when one component needs values the semantic layer cannot express.

Common mistakes (2)

Modes on the primitives, so every colour needs a dark twin.
Designs pointing at primitives, which do not change with the mode.

Official guidanceFigma

Figma
Use variables and modes to implement design tokens and switch designs between contexts such as light and dark themes.
Figma Help, Guide to variables(opens in a new tab)Tool documentation
Figma
If you want different contexts for your design elements, you will need variables and variable modes.
Figma Help, The difference between variables and styles(opens in a new tab)Tool documentation

Basics

What variables hold

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

A variable stores one raw value: a colour, a number, a string or a boolean. Apply it wherever that value would otherwise be typed in.

Colour: Solid fills and strokes. Palette and semantic colours.
Number: Any numeric property. Spacing, radius, sizes.
String: Text. Copy that changes by language or context.
Boolean: True or false. Showing and hiding layers.

Why?

A value typed in a hundred places has to be changed in a hundred places. A variable is changed once.

Common mistakes (2)

Variables named after their value, such as blue-500, used directly in designs.
A variable for every one-off value.

Official guidanceFigma

Figma
Variables store reusable values that can be applied to all kinds of design properties and prototyping actions.
Figma Help, Guide to variables(opens in a new tab)Tool documentation
Figma
Variables can store single, raw values.
Figma Help, The difference between variables and styles(opens in a new tab)Tool documentation

Structure

Safe starting point

Two collections

Collections, modes and aliases

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

A common setup: a primitives collection of raw values, and a semantic collection that aliases them and carries the modes, such as light and dark.

Primitive
blue-600
A raw value with a neutral name.
Semantic
color-action
What the value is for. Modes switch here.
Component
button-background
Where it is used.

Each layer points at the one before it. The names are examples, not Figma's or any system's. Change the primitive and everything downstream follows.

Why?

Designs point at the semantic layer, so switching a frame's mode re-themes everything without touching a component.

When to deviate. Add a component-level collection only when one component needs values the semantic layer cannot express.

Common mistakes (2)

Modes on the primitives, so every colour needs a dark twin.
Designs pointing at primitives, which do not change with the mode.

Official guidanceFigma

Figma
Use variables and modes to implement design tokens and switch designs between contexts such as light and dark themes.
Figma Help, Guide to variables(opens in a new tab)Tool documentation
Figma
If you want different contexts for your design elements, you will need variables and variable modes.
Figma Help, The difference between variables and styles(opens in a new tab)Tool documentation

Figma Variables cheat sheet

Filters

Basics

What variables hold

Structure

Collections, modes and aliases

Figma Variables cheat sheet

Filters

Basics

What variables hold

Structure

Collections, modes and aliases