# Variables and conditions

> Make a prototype remember: count items, switch a setting on, change to Dark mode, and do one thing or another depending on a value.

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

A prototype can remember things while it plays. Add an item to a basket and the count goes up; turn a setting on and it stays on on the next screen; press Dark and every screen turns dark. You do this with your file's [variables](/guide/variables) and three actions: **Set variable**, **Set variable mode** and **Conditional**.

Nothing the prototype does changes your file. Preview plays a copy, and **Restart** starts again from the file.

## Before you start

Make the variables first, in **Variables**, and bind the layers that should show them: a text bound to `count`, a layer's visibility bound to `isOn`, fills bound to colour variables that have Light and Dark modes.

## Set a variable

1. Select the layer, such as an "Add to basket" button, and add an interaction.
2. Choose **Set variable** as the action.
3. In **Variable**, pick the variable.
4. In **To**, type the new value. It can be a value or a sum:

| Variable type | Examples |
|---|---|
| Number | `0`, `count + 1` |
| True or false | `true`, `false`, `not isOn` |
| Colour | `#5B4BFF` |
| Text | `"Text"`, or `name + "!"` |

`not isOn` flips a switch each time; `count + 1` counts up. A value uxdeck cannot read is flagged under the field.

## Switch a mode

**Set variable mode** puts a whole collection in another mode for the rest of the prototype: choose the **Collection** and the **Mode**, such as Theme and Dark. Every layer bound to that collection follows on every screen.

A value you set belongs to the mode it was set in: switch back and the value set in that mode comes back with it.

## Do one thing or another

**Conditional** runs different actions depending on a condition:

1. Choose **Conditional** as the action.
2. In **If**, type the condition, for example `isOn` or `count > 3`.
3. Under it, choose what to do (**Do**), and press **Add action** for more.
4. Press **Else if** for another condition, or **Else** for what happens otherwise.

Conditions can compare (`==`, `!=`, `<`, `<=`, `>`, `>=`), do sums (`+`, `-`, `*`, `/`) and combine with `and`, `or` and `not` (`&&`, `||` and `!` work too).

A branch can hold up to 8 actions, a Conditional up to 8 branches, and one Conditional can sit inside another, two deep.

## Several steps on one click

Press **Add action** under the first action to run more in order on the same trigger, for example **Set variable** `count` to `count + 1`, then **Navigate to** Basket.

## Use variables for motion too

Durations and easings accept **Timing** and **Easing** variables, so every interaction can share one motion scale. See [Screen animations and easing](/guide/animations).

## Catches

- **While hovering and While pressing** cannot hold a Conditional.
- **Set variable mode needs a collection with two modes or more.** Free allows one mode per collection; Pro allows 10. See [Plans](/guide/plans).
- **Set variable** is greyed out until the file has a variable.
- **Restart forgets everything** the prototype remembered.
- **Your published site** plays variables and conditionals too, starting from the file's values.

Set variable and Conditional are on every plan.