Skip to main content

Events & actions

Any object on your canvas can be interactive. Select a rectangle, add a Click event with an Open URL action, run preview — you just made a button. Events and actions are how you turn static designs into working prototypes.

How it works​

Events are triggers — things users do (click, hover) or things that happen (an element reaches a certain size). Actions are responses — what your design does when an event fires (open a modal, hide an element, navigate to another artboard).

One event can trigger multiple actions in sequence. Click a button and it might open a modal, hide another element, and update some text — all from a single Click event.

Any object, not just components​

Events and actions aren't limited to components. You can attach them to anything on the canvas — rectangles, text, frames, images, groups.

Components can have events and actions too, and they're saved as part of the component definition. Every instance inherits the same interactions. Edit the source component's interactions and all instances update.

Events​

EventTriggers when
ClickUser clicks or taps
Double ClickTwo rapid clicks
Mouse DownPress begins
Mouse UpPress releases
Mouse EnterCursor enters the element
Mouse LeaveCursor exits the element
Size Enters RangeElement size crosses into a specified range
Size Exits RangeElement size crosses out of a specified range
CheckCheckbox or radio state changes (requires matching behavior)
ToggleToggle state changes (requires toggle behavior)

Event options​

  • Check: Filter by state — Any, Checked, or Unchecked.
  • Toggle: Filter by state — Any, ON, or OFF.
  • Size range events: Choose a property (Width or Height), set a From value and a To value. To can be set to infinity.
  • All events: Stop propagation — prevents parent elements from also receiving the event. Off by default.

Behavior-specific events​

Check and Toggle events only appear on components with the matching behavior. All other events are available on any object regardless of behavior.

Actions​

ActionWhat it does
Set Symbol VariantSwitch a component instance to a different variant
Change VisibilityShow, hide, or toggle an element's visibility
Open ModalDisplay an artboard as a modal overlay
Close ModalDismiss the current modal
Go To ArtboardNavigate to another artboard
Open URLOpen an external link
ResizeChange an element's dimensions
Set TextUpdate text content dynamically
ResetRestore an element to its initial state

Action options​

  • Set Symbol Variant: Target instance, which variant, optionally resize to match the variant's size.
  • Change Visibility: Target element, type (Show / Hide / Toggle).
  • Open Modal: Target artboard, close on click outside.
  • Go To Artboard: Target artboard, transition (Instant, Crossfade, Slide Over, Slide Out, Push).
  • Open URL: URL to open.
  • Resize: Target, mode (Absolute / Relative), width, height, transition (Instant / Animated).
  • Set Text: Target text element, new content.
  • Reset: Target element to restore.

Targeting rules​

Most actions target elements reachable from your current selection — siblings, children, or parents on the same artboard.

Go To Artboard and Open Modal are different: they target top-level artboards on the current page. This is how you build multi-screen prototypes and modal dialogs.

Adding events and actions​

  1. Select the object that should respond to interaction.
  2. Open the Interactions panel.
  3. Click Add event and choose a trigger.
  4. Add one or more actions to that event.
  5. Configure targets and options for each action.
  6. Preview to test.

You can reorder events and actions by dragging them in the Interactions panel. Events stay at the top level; actions stay within their parent event.

Events and actions on components​

Interactions defined on a component are inherited by all its instances. When you select an instance that has inherited interactions, the panel shows a Go to inherited interactions button that navigates to the source component.

This means you can build a fully interactive button component — complete with click handlers, hover effects, and modal triggers — and every instance of it works identically without any per-instance setup.

Events and actions on nested elements inside a component also persist. The component stores the full interaction tree for all its children.

Troubleshooting​

My Check or Toggle event doesn't fire​

These events require a component with a matching behavior. Set the checkbox, radio, or toggle behavior on the component set.

My target is missing from the action dropdown​

The action can only target reachable elements. For most actions, the target must be on the same artboard. For Go To Artboard or Open Modal, the target must be a top-level artboard.

My action isn't doing anything in preview​

Check that:

  1. The event is on the correct element (the thing being clicked, hovered, etc.).
  2. The action target exists and is correctly selected.
  3. For visibility actions, the target isn't already in the desired state.

I want an instance to have different interactions than its source​

Interactions are inherited from the source component. To customize per-instance, you'll need to detach the instance or restructure your component.