Page actions let you define logic and behaviour for a page and any components on it, which do not involve direct interaction.

By using a page action you can trigger a transition without needing user input, such as a loading state. Page actions can also be applied at the component level and allows the states of a component to influence another.

After a set time

Setting a time lets you automatically trigger an action after a delay. This allows you to create sections of your prototype that automatically advance to other pages without requiring input from the user.

For example, you could create a lock screen banner notification which displays for half a second before automatically transition out and back to the resting lock screen.

Follow these steps to create a Timer action:

  1. On Page 1 of your prototype, create your first state
  2. On Page 2 of your prototype, create the state you would like to appear after the time delay is completed. Optional: to make an animated transition, copy & paste any elements from between your pages and alter their starting and ending properties.
  3. On Page 1, with make sure no elements are selected, then in properties pane to the right locate the ‘Page Actions’ section. Press the + button to add an action, and select ‘Timer’ from the menu.
  4. Wait: Refers to how many milliseconds you’d like Page 1 to appear before advancing to Page 2.
  5. Action: Lets you select the destination page to advance to after the delay.
  6. Motion: Lets you define the easing curve of the transition.
  7. Preview your prototype. After the time you set elapses, it will automatically progress from Page 1 to Page 2. That’s it!

See a this in action here – which you can copy into your own account.

Known limitation: If you have a timed action on a page, all hotspots on that page will be disabled.

When a component changes

Component events let you listen to when a component on the page changes state, and trigger an action when it does. This provides a way for components to talk to each other.

There are two types of component events that can be listened to: when a component “starts changing” or “has changed”.

To set a component event, select the component and then under interactions select the plus button.

Starts changing lets you trigger an action when a component on the page begins to change its state. This will trigger at the start of a component transition, or immediately if the component has no transition.

Has Changed lets you trigger an action after a component on the page has changed its state. This will trigger at the end of a component transition, or immediately if the component has no transition.

Have a look at this sample file to see this event in action. Toggle (swipe right) the star filter to preview the interaction. Then, copy it into your own account and select the star toggle component in the editor to see how the event has been set up.

When a variable changes

Learn how to use variables in your prototypes.

Related articles:

Did this answer your question?