Variables and modes

A variable is a named value you use in many places: color/brand, space/16, radius/card. Change it once and every layer that uses it changes. Modes give one variable several values, one per context: Light and Dark, English and French, phone and desktop. A frame picks a mode, and everything inside it shows that mode’s values.

Variables are also what your code gets. When you publish or export, they become CSS custom properties, so the site and the design share the same names.

Open variables

With nothing selected, the Design tab has a Variables section that lists your collections. Press Open variables (or a collection’s row) to open the variables window.

The + in the section has three quick starts:

• From this page’s colours turns the solid colours on the page that are not variables yet into colour variables (up to 24 at a time).
• Generate a type scale… writes a set of font sizes from a base size and a ratio. See Generate states and more.
• Generate a colour ramp… writes the steps of one colour, from light to dark.

Collections, groups and variables

Variables live in collections. A collection is a set that shares modes: Theme with Light and Dark, Spacing with Phone and Desktop.

• Use the Collections menu at the top of the sidebar to Create collection, rename, duplicate or delete one, or Reorder collections (where Sort A to Z puts them in order).
• Press Create variable and choose a type.
• Name a variable with slashes, such as color/brand/500, and it is filed in groups. The sidebar lists the groups; Search names, values, groups finds a variable by its name or its value.

Type	Holds
Colour	A colour
Number	A size, a gap, a radius, an opacity
String	Words
Boolean	True or false
Timing	How long a motion lasts
Easing	The curve a motion follows

Select rows the usual way (click, ⌘-click, ⇧-click) and right-click for Edit variable, Duplicate variable (⇧Enter), New group with selection, Copy, Paste and Delete variable. A delete happens at once, with Undo in its message.

Edit variable (the sliders on a row) holds a description, Scoping (which fields offer it), its Code syntax for Web, iOS and Android, and Hide from publishing.

An alias makes one variable point at another: press Create alias in a value cell. button/background can point at color/brand/500, so changing the brand colour changes every button.

Modes

Each collection starts with one mode. Press Add mode at the end of the mode columns: the new mode starts as a copy of the first, so nothing goes blank. Right-click a mode’s name (or use its options button) to Rename mode, Duplicate mode, Set as default, move it, or Delete mode.

The first mode is the default: it is what layers show unless a frame says otherwise.

Apply a variable to a layer

Most fields in the Design tab can take a variable: fill and text colours, stroke, radius, gap and padding, opacity, font size, line height, letter spacing, paragraph spacing, width and height, min and max sizes, gradient stops, shadows and motion.

• Press the variable button at the end of a field (Apply variable) and pick one.
• In a number field, type = to open the same picker.
• In the colour picker, the Libraries tab lists your colour variables.
• With a layer selected, the Variables section lists what is bound. Press + (Bind a field to a variable) to bind another field, or the minus to detach one.

A field that follows a variable shows its name instead of a number.

Choose a frame’s mode

Select a frame. When a collection has more than one mode, the Variables section shows a menu for it. Auto (the default) follows the mode around the frame; pick a mode to set it for this frame and everything inside it.

In prototypes

Variables can change while a prototype runs: Set variable, Set variable mode and Conditional actions count, switch themes and branch. See Variables and conditions.

What each plan allows

What	Free	Pro
Modes per collection	1	10

A file with more modes than your plan allows keeps the first ones when it is shared or pasted; when you share it, a message says the others were left out.

Catches

• Padding takes a variable only while all four sides are equal.
• Hidden from publishing keeps a variable for this file only. Layers bound to it keep working.
• Colour styles are colour variables. uxdeck has text and effect styles, but colours live here. A Figma file you import brings its colour styles as a Color styles collection.