Events and actions reference

This page lists every event and action the Interactions tab offers, with its parameters and the rules the panel does not show. For when events fire, the order actions run in and which layers an action can target, see How interactions run. Also called: triggers (events), breakpoints (size range events), on load (Appear), navigation, overlay or modal, conditional logic (actions).

Events

Where: Interactions tab → the + button (tooltip Add event).

Event	Fires when	Options
Click	The viewer clicks or taps the layer	—
Double Click	The viewer double-clicks the layer	—
Check	The viewer clicks an instance whose component has the Checkbox behavior	State
Toggle	The viewer clicks an instance whose component has the Toggle behavior	State
Pick	The viewer picks an item from the list of a Dropdown or Menu instance	—
Component Event	The instance's component emits an event of this name; on a Repeater, an item does	Name
Pointer Enter	The pointer moves onto the layer	—
Pointer Leave	The pointer moves off the layer	—
Pointer Down	A press begins on the layer	—
Pointer Up	A press is released on the layer	—
Drop	The viewer drops a dragged item into the Sortable frame	—
Appear	The preview shows the artboard, as the page or as a modal	—
Size Enters Range	The layer's width or height comes into the range, or starts inside it	Property, From, To
Size Exits Range	The layer's width or height leaves the range, or starts outside it	Property, From, To

There are no keyboard, focus or timer events. Which events also reach the parent layers is covered in How interactions run.

Size Enters Range and Size Exits Range

Also called: breakpoints.

• Type infinity into To for a range without an upper end.
• The size is the layer's own, not the viewport's. The displayed artboard takes the viewport's size, so put the event on the artboard to react to the viewport.
• A layer that layout sizes is measured as rendered, so its events follow viewport resizing and reflow: a Flex or Grid item set to Fill, a layer anchored Left + Right, Top + Bottom or Scale, and a Flex or Grid container set to Hug content.
• Any other layer is measured at the size set in the editor plus the session's changes to it, such as Resize actions and Resizable gestures. Content alone does not count: a text layer that grows after a Set Text action reports its earlier size.
• From is inclusive and To is exclusive: a width of 600 is outside 0–600 and inside 600–infinity, so adjacent ranges share a boundary number.
• Both events also fire for the starting state — on load, and again each time the layer's artboard is shown: Size Enters Range if the size is already inside the range, Size Exits Range if it is already outside. After that each fires only when the size crosses a boundary.
• A new event starts at Width, 0 to infinity. To run actions each time an artboard is shown, use Appear on the artboard instead.

Appear

Also called: on load.

• The Add event menu lists Appear only when the selected layer is an artboard.
• It runs each time the preview shows the artboard: when the preview opens on it, when a Go To Artboard transition to it has finished, each time it opens as a modal, and when a comment thread on it is opened. The page and each open modal count separately, so an artboard opened as a modal over itself appears again.
• It does not run again while the artboard stays shown: not for a Go To Artboard to the artboard already shown, not for edits or a resized preview, and not when a modal over it closes.
• A Go To Artboard replaced by another navigation before its transition finishes never shows its artboard, so that artboard's Appear does not run.
• An instance opened as a modal has no Appear.
• An Appear left on a frame that is no longer an artboard, after nesting it in another frame or turning it into a component, stays in the list with a warning icon and never runs. Moving the frame back onto the page brings it back.
• When artboards keep showing each other through Appear with no click or key press from the viewer, the preview stops running Appear after 20 in a row and reports it in the debug console. The next click or key press resumes it.

Check and Toggle

• The Add event menu lists Check and Toggle only when the selected layer is an instance, so add them on the instance. The item is disabled when the instance's component has a different behavior.
• Check comes from the Checkbox behavior and Toggle from the Toggle behavior. Radio button, Button and Input dispatch neither (→ Component behaviors).
• State compares against the state the click produced: Checked fires when the click checks the instance.
• They fire only for a viewer's click — not for the starting state and not when a Reset action restores it.
• When the component's behavior changes later, existing Check and Toggle events stay in the list with a warning icon and never fire.

Pick

• The Add event menu lists Pick only when the selected layer is an instance, disabled unless its component has the Dropdown or Menu behavior (→ Dropdowns and menus).
• It runs each time the viewer picks an item by click or key, on a Dropdown after the pick has become its Selected value, also when the picked option was already selected.
• In its expressions $event.item is the picked item of the array the list's Repeater shows, and $event.index its position there. An Emit Event passes $event on.
• It does not bubble.

Component Event

• Name — the event to handle, as the component's Emit Event actions name it. Names match exactly: confirm is not Confirm. The field suggests the names the component emits.
• The Add event menu lists Component Event only when the selected layer is an instance or a Repeater. It runs as one of the instance's own events, whichever variant the instance shows; on a Repeater it runs for every item's instance, with $item and $index in its expressions (→ Reacting to an item).
• It does not bubble, and a component cannot handle its own events (→ Component events).
• $event in its expressions is what the event that started the chain carried: a Drop's dropped item or a Pick's picked item, passed on by the Emit Event, or null for an event that carries nothing, such as a Click (Drop).

Drop

Also called: drag and drop.

• Drop runs on a Sortable frame when one of its items, or an item from another list, is released into it (→ Sortable).
• The Add event menu lists Drop on every layer, disabled until the layer has the Sortable behavior, its own or one its main component gives it. A Drop left on a layer that loses the behavior stays in the list with a warning icon and never runs.
• In its expressions $event describes the drop:
  • $event.item is the dragged item, when the dragged layer is an item of a Repeater or sits inside one, and null otherwise. A list inside one item, sorting that item's own rows, drops no item.
  • $event.itemIndex is that item's position in its Repeater when the drag started, and null without an item.
  • $event.dropIndex is where the dragged layer landed in the frame's list, counting from 0.
• A drop into a Sortable Repeater runs Drop once the new order is written to the array. A move that cannot be written puts the item back and runs no Drop (→ Dropping items).
• It does not bubble. An item released outside every Sortable frame goes back to its place and drops nothing.

Actions

Where: Interactions tab → Add Action under an event, or under Then / Else in a Conditional.

Action	What it does
Go To Artboard	Shows another artboard of the same page, with an optional transition
Open Modal	Shows an artboard or an instance over the current artboard
Close Modal	Closes the most recently opened modal
Open URL	Opens a web address in a new browser tab
Set Text	Replaces the content of a text layer
Change Visibility	Shows, hides or toggles a layer
Resize	Sets or offsets a layer's width and height, instantly or animated
Reset	Clears the session's changes on one layer
Set Component Variant	Switches an instance to another variant of its component set
Set Component Input	Assigns a value to one input of an instance
Emit Event	Sends a named event from inside a component to its instance
Set Variable	Assigns a value, or the result of an expression, to a value variable
Set Items	Replaces a Repeater's items with the result of an expression
Conditional	Evaluates an expression and runs one of two nested action lists

Everything an action changes lasts for the viewer's session and is never written to the document (→ Variables in preview). Which layers a Target field lists is covered in How interactions run.

Go To Artboard

Target lists the other artboards on the same page.

Transition	What moves
Instant	Nothing; the artboards are swapped
Crossfade	The current artboard fades out while the new one fades in
Slide Over	The new artboard slides in above the current one
Slide Out	The current artboard slides away and uncovers the new one beneath
Push	Both move: the new artboard pushes the current one out

• Direction is the direction of travel: with Left, the new artboard enters from the right edge.
• Easing None animates the same as Linear. This also applies to Resize.
• The new artboard is shown at the current viewport size, not at the size it has on the canvas.
• The next action does not wait for the transition to finish (→ How interactions run).

Open Modal

• Target — another artboard on the same page, or an instance placed directly on the page.
• Close on click outside — closes the modal on a click on the backdrop itself, not on a click inside the modal.
• The modal is centered over the current artboard on a dimmed backdrop. Several modals can be open at once: the most recently opened one sits on top, and Esc closes it.

Close Modal

No parameters. It does nothing when no modal is open.

Open URL

URL is literal text, not an expression. The address always opens in a new browser tab.

Set Text

Target lists text layers only. Content is literal text, not an expression.

Change Visibility

Target and Type; no rules beyond what the panel shows.

Resize

• Type — Absolute sets the size, Relative adds to the current size (a negative number shrinks, and repeated runs add up).
• Width, Height — leave a field empty, showing (No change), to keep that dimension. Transition is Instant or Animated.
• When the action fills in Width, the editor changes the target's layout settings so that the width can be set:
  • Horizontal sizing that is Fill or Hug content is switched to Fixed, whether the target is a Flex or Grid item, a Hug content container or a text layer.
  • Horizontal anchoring that is Left + Right or Scale is switched to Left.
• Height does the same on the vertical axis: Fixed, and Top in place of Top + Bottom or Scale.
• The check runs when you edit the events of the layer that holds the action, not when the target's sizing or anchoring changes later.

Reset

• Target — the only parameter.
• Clears the session's changes on that layer — size, visibility, text, variant, input values, drag and resize results — but not on the layers inside it.
• On an instance it also returns the component behavior to its starting state (a checkbox returns to its Checked value) and clears the overrides that a variant switch carried onto the instance's children.
• A value that a variable binding drives stays as the variable has it: the layer shows the session's variable value again right after the reset. A bound built-in input such as Checked or Input value included: the control keeps the variable's value, not its starting value (→ Two-way binding on controls).
• It never touches variables, Sortable order (→ Draggable, Resizable and Sortable objects), or pan and scroll position (→ Scrolling in preview).
• To restore variables, add Set Variable actions that assign the starting values.

Set Component Variant

• Target — an instance of a component set. Change to — the variant to show. Resize to variant size — the instance takes the new variant's size.
• Picking a Target fills in the other two: Change to with the instance's current variant, and Resize to variant size on when the instance still follows its component's size, off when it was resized.
• When the component set has a behavior, Change to leaves out the state variants such as :hover or :checked; the behavior switches those.
• The switch is instant, also when the component set has a transition for its behavior.
• Overrides and session changes on the instance's layers are carried over to the new variant (→ Overrides). Afterwards the instance runs the new variant's events (→ How interactions run).

Set Component Input

• Target — an instance. Input — one of its component's inputs. Value — a control that matches the input's type; for an Array input, the JSON editor (→ Arrays and objects).
• Input lists the inputs that have a row on the instance: those bound to at least one property, plus the built-in inputs (→ Assigning inputs). Slots are never listed, and neither is an input the instance binds to a variable: the variable owns it, so use Set Variable (→ Two-way binding on controls). A radio button's Selected value is never listed, and its Checked is not while Selected value is bound (→ A radio group bound to a variable). An action whose input was bound after it was authored does nothing in preview; the Properties panel flags it, and an open debug console shows an error.
• Changing Target keeps Input and Value only when the new target is an instance of the same component — in a component set, of the same variant.
• The value applies on top of the one assigned on the instance until a Reset on that instance or a reload.

Emit Event

• Name — the event to send. The field suggests the names the component already emits.
• Offered on a component and on the layers inside it; elsewhere the menu shows it disabled, since nothing would receive it.
• The event reaches the instance of the component the action belongs to, and nothing beyond it. That instance's Component Event actions of the same name run at once, then the list continues (→ Component events).
• The handlers read the same $event as the list holding the action, such as the dropped item of a Drop (Drop).

Set Variable

• Variable — value variables only; expression variables are never listed (→ Value and expression variables).
• Value — a control that matches the variable's type. The ƒ button (tooltip Switch to expression / Switch to value) swaps it for Expression; switching back restores the earlier value.
• When the value comes from a control the viewer uses, a toggle's state, a radio button's choice, a field's text or a picked color, binding the control's built-in input to the variable is usually the easier path: no event, no action, and every change reaches the variable at once (→ Two-way binding on controls). Set Variable remains the way for everything else: counters, choices made by clicking a button, values computed from an expression.
• The expression is evaluated every time the action runs, against the session's values at that moment, so count + 1 increments and !open toggles (→ Expressions).
• An expression that fails, or whose result does not match the variable's type, leaves the variable unchanged, and the rest of the action list still runs. An open debug console shows a warning (→ Errors).
• Deleting the variable or switching it to an expression empties Variable (→ Changing or deleting a variable).

Set Items

• Repeater — a Repeater on the same artboard, or in the same component. Added among a Repeater's own events, the action targets that Repeater.
• Items — an expression over $items, the Repeater's current array, that yields the new array: $items.concat([{ "id": "c", "title": "Three" }]), $items.filter((item) => !item.done). In a Component Event on the Repeater, $item and $index name the emitting item too (→ Reacting to an item).
• The new array goes back to whatever drives the items: the array variable, or the array input of the instance the Repeater sits in, and from there on to the variable or item that fed that input. A list that follows an expression variable writes the array the expression reads, matched by item id (→ Lists computed from other lists); a list with Writes to bound reads $items from that variable and replaces it.
• A result that is not an array, an expression that fails, or a target that is no Repeater leaves the items as they are; an open debug console shows a warning.

Conditional

• If — an expression (→ What you can write). Then, Else — two action lists, each with its own Add Action.
• A truthy result runs Then; false, 0, "" and null run Else.
• An empty If, or one that fails, runs neither list; a failure shows as a warning in an open debug console.
• Both lists take any action, further Conditional actions included. Actions below the Conditional in the same event run in every case.
• The condition is evaluated when the action runs, not again when the variables change later.

Related

• How interactions run — targets, order, bubbling, variants and instances.
• Variables — what a session keeps and what a reload restores.
• Expressions — the language used by Set Variable and Conditional.
• Preview — opening and reloading a preview.