# Interactions

> Choose what starts an interaction and what it does, from going to another screen to playing a video, and chain several actions.

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

An interaction is a trigger and an action: **On click**, **Navigate to** Checkout. Every link you draw on the canvas is one, and the **Interactions** section of the Prototype tab lists them all for the selected layer or screen. Open one to change the trigger, the action and how it moves.

## Add one

1. Select a layer, or a whole screen.
2. In the **Prototype** tab, press **+** next to **Interactions**.

A new interaction takes the first trigger the layer is not using yet (**On click** when it is free), with no delay, the **Ease out** curve and 300 ms. Its popover opens beside the panel. Hold <kbd>⇧</kbd> to fade the popover and see the canvas under it.

**Select matching** at the top of the popover selects every layer on the page with the same interaction.

## Triggers

| Trigger | When it fires |
|---|---|
| **On click** | A click or a tap. |
| **On drag** | A drag or a swipe. With a sliding animation, the next screen follows the finger and goes back if you let go early. |
| **While hovering** | For as long as the pointer is over the layer. |
| **While pressing** | For as long as it is held down. |
| **Key/Gamepad** | A key you record: press **Press a key**, then the key. |
| **Mouse enter**, **Mouse leave** | Once, as the pointer comes in or goes out. |
| **Mouse down**, **Mouse up** | Once, as the button goes down or comes up. |
| **After delay** | By itself, after a wait (800 ms to start). Use it on a screen for a splash. |
| **When video ends**, **When video hits** | On a layer that plays a video; **When video hits** fires at the second you set in **At**. |

Every trigger also has a **Delay** (0 to 60,000 ms) before the action runs.

## Actions

- **Navigate to:** another screen. **Preserve scroll position** keeps the page where it was.
- **Back:** the screen shown before this one.
- **Change to:** the layer changes (move, scale, turn, fade, colour). On a click, each click flips between the layer as designed and this state. On a component with variants, it shows another variant: see [Interactive components](/guide/interactive-components).
- **Scroll to:** a layer on this screen. **Offset** stops that far above it, the height of a header that stays on top.
- **Open link:** a web address, with **Open in a new tab**.
- **Open overlay**, **Swap overlay**, **Close overlay:** see [Overlays](/guide/overlays).
- **Set variable**, **Set variable mode**, **Conditional:** see [Variables and conditions](/guide/prototype-variables).
- **Play/Pause video**, **Mute/Unmute video**, **Set video time**, **Jump in video:** on a video layer of this screen.

An action greyed out in the menu has nothing to act on yet: no other frame, no variables, no video.

## Several actions on one trigger

Press **Add action** under the first action. Each one added (labelled **Then**) runs in order on the same trigger, up to 8 actions in all (not on **While hovering** or **While pressing**). Remove one with the minus beside it.

## How it moves

A screen change has an **Animation**, with its direction, curve and duration: see [Screen animations and easing](/guide/animations). A **Change to** is **Instant** or **Animate**, with its curve and duration.

## Rules for a layer

- **One interaction per trigger** on a layer. **Key/Gamepad** is the exception: one for each key.
- **On click and While hovering do not share a layer.** Use **Mouse enter** and **Mouse leave** with a click instead.
- **While hovering and While pressing** hold one action, and it can only be **Change to** or **Open overlay**. The layer goes back when the pointer leaves or lets go.

## Advice in the panel

The Prototype tab flags interactions that tend to feel wrong: hover feedback slower than 0.4 s, a press slower than 0.25 s, a click that waits more than a second, or a layer that reacts to the pointer but does nothing on click.

## Catches

- **Play/Pause animation and Set playhead** are listed but not available yet.
- **Video triggers** can be chosen only on a layer that plays a video; elsewhere they are greyed out. Adding a video is on Pro; a video already in a file plays on any plan.
- **Interactions are set one layer at a time.** With several layers selected, the tab shows only their shared effects. To give many layers the same interaction, copy a link on the canvas with <kbd>⌘</kbd><kbd>C</kbd> and paste it onto them with <kbd>⌘</kbd><kbd>V</kbd>.

Interactions play in Preview and on your published site, on every plan.