How to add interactions to a prototype

How to add interactions to a prototype

Prototype interactions let you connect screens or elements and define what happens when users interact with them.

Before you start

  1. Make sure your board has the screens or elements you want to connect.
  2. To add or edit interactions, switch your board to Prototype mode.

How to add an interaction

When in the Prototype mode, you can add an interaction in either of these ways:

Drag to connect

  1. Select the screen or element you want users to interact with.


  2. Drag the connector from the selected screen or element to the target screen or element.


  3. Configure the interaction settings in the Prototype panel.

Add from the Prototype panel

  1. Select the screen or element you want users to interact with.
  2. In the Prototype panel, click Add interaction.


  3. Choose the trigger and action for the interaction.

Info
Interactions can start from a screen or from an element within a screen. The available settings may vary depending on the trigger and action type you choose.

Configure the interaction

After you add an interaction, you can customize its settings in the Prototype panel. Common settings include:
  1. Source: The screen or element where the interaction starts.
  2. Trigger: How the interaction begins, such as when a user clicks, hovers, drags, or uses a keyboard shortcut.
  3. Action: What happens after the trigger, such as navigating to another screen or opening an overlay.

Info
To edit an existing interaction, select the connection line or the element where the interaction was applied, then update the settings in the Prototype panel.
If the interaction is connected from a screen, select the screen and click View existing interactions to edit it.

​
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.