Skip to main content

How interactions run

An interaction is an event on a layer plus the ordered list of actions that runs in preview when the event fires. This page covers what such a list can reach and how it runs; the events and actions themselves are in the Events and actions reference. Also called: prototyping, triggers, prototype interactions.

Events and action lists​

Where: right sidebar → Interactions tab → Events.

  • The + button next to Events (tooltip Add event) adds an event to the selected layer. Add Action under an event appends to that event's list.
  • The same event can be added to a layer more than once. Each copy runs its own list, in the order shown.
  • Drag to reorder. Events move among events. Actions move within a list, to another event, and into or out of the Then and Else branches of a Conditional.
  • The + button is disabled for a multiple selection, for a component set and for a layer inside an instance. A component set carries no events; add them to its variants. A layer inside an instance shows its events read only; edit them in the main component.
  • An event without actions does nothing, and the Validation console lists it.

What an action can target​

Where: Interactions tab → an action → Target.

  • Target offers every layer inside the same artboard, at any depth, including the layer that carries the event. The artboard itself is not offered. An action that acts on one kind of layer, such as Set Text, lists only that kind.
  • Inside a component, Target offers that component's layers only, and not the component itself. Each instance then acts on its own copies. To hide, resize or switch the component as a whole, add the event on an instance, which can target itself.
  • From outside, a main component and the layers inside it are never offered. An instance is offered, but the layers inside it are not, because a variant switch can replace them. The exception is content you placed into a slot of the instance.
  • Layers inside a boolean operation are not offered. A layer that sits directly on the page, outside every artboard, gets an empty Target list.
  • Go To Artboard and Open Modal pick a destination on the page instead of a layer (→ Events and actions reference).

When a target is deleted, moved to another artboard or moved into a component, the action stays and its Target is emptied; the Validation console lists the action as missing a target.

Order, bubbling and failures​

Actions run top to bottom. A Conditional runs the branch it chooses in place, then the list continues.

  • Lists of different events run in the order the events fired. A later list starts only when the earlier one has finished.
  • An animated transition is started, not waited for: the next action runs at once.
  • Click, Double Click, Pointer Down and Pointer Up bubble: they run on the layer under the pointer first, then on every ancestor in turn, up to and including the artboard. No option stops this; to keep a parent from reacting to clicks on a child, guard the parent's list with a Conditional. Every other event runs only on the layer that carries it.
  • When the pressed layer is replaced before the pointer is released — by a variant switch on press, for example — the Click and Double Click events of its ancestors still run, provided the pointer is released inside the area the layer occupied.
  • An incomplete action — no target, no variable, no condition — does nothing, and the rest of the list runs; the Validation console lists it. The rest of the list also runs for a Set Variable or Conditional whose expression fails (→ Set Variable).

Layers removed while hovered or pressed​

When a layer leaves the preview — a variant switch replaces the layers inside an instance, or the layer's artboard or modal leaves the display — its Pointer Leave event runs if the pointer was over it and its Pointer Up event runs if it was pressed, so hover and pressed feedback does not stick. Only the actions that change layers or variables run, also inside a Conditional. Go To Artboard, Open Modal, Close Modal and Open URL are dropped.

Events belong to a variant​

Each variant of a component set carries its own events, and an instance runs the events of the variant it shows at that moment. While a Button instance shows Button:hover, a Click defined only on the default variant is absent — and the pointer is over a button whenever a mouse clicks it.

  • Add the event to every state variant that can be showing when it should fire, or
  • add it on the instance: an instance's own events run whichever variant is showing.

Object behaviors follow the same rule (→ Draggable, Resizable and Sortable objects). States and the behaviors that switch them: Interactive states, Component behaviors.

Interactions on instances​

Where: right sidebar → Interactions tab, with an instance selected.

An instance runs the events of its main component and then its own, added in the Interactions tab like on any layer. No detach is needed.

  • Inherited events cannot be edited, removed or replaced on the instance.
  • Inherited events do not appear in the instance's list. A button above it, labeled for example 3 inherited interactions (tooltip Go to inherited interactions), counts the inherited actions and selects the main component, or the layer inside it, that carries them. When the main component was deleted, the button is disabled and Restore deleted component brings the component back.
  • The Layers panel marks a layer that has events in its own list. An instance that only inherits events carries no mark.