Interactions

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 ⇧ 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.
• 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.
• Set variable, Set variable mode, Conditional: see Variables and conditions.
• 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. 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 ⌘C and paste it onto them with ⌘V.

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