# Variables and modes

> Keep colours, sizes, words and motion in named variables, give them modes such as Light and Dark, and apply them to layers.

Source: https://uxdeck.app/guide/variables (checked against uxdeck on 16 October 2026)

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](/guide/generate).
- **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, <kbd>⌘</kbd>-click, <kbd>⇧</kbd>-click) and right-click for **Edit variable**, **Duplicate variable** (<kbd>⇧</kbd><kbd>Enter</kbd>), **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 <kbd>=</kbd> 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](/guide/prototype-variables).

## 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.