Prototyping interactions

Penpot allows you to prototype interactions by connecting artboards. Learn how to build interactive prototypes to visualize how users navigate through your screens.

Advanced interactions are among the main priorities of the Penpot team. Related features will be implemented soon.

Adding interactions

prototyping

Add interactions following this simple steps:

  1. Open a file with at least two artboards.
  2. Activate Prototype mode clicking at the tab at the right sidebar.
  3. Select a shape, artboard or group that will trigger the interaction.
  4. Drag a connection to another artboard or choose an artboard from the “Navigate to” selector.

View interactions

prototyping

To see the interactive prototype in action go to the View mode that can be accessed by clicking the play button at the top right.

View options

At the navbar you can find options to show the interactive areas.

prototyping

Removing interactions

There are two ways to remove interactions:

  1. In Prototype mode select “Navigate to” > “none”.
  2. Drag out the connector from the linked artboard.

prototyping