Variables and conditions

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

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