Skip to content
Logo
Frame0

Prototyping

Frame0 enables interactivity by adding links to shapes. This prototyping guide explains how to add links to shapes and how to demonstrate them. Additionally, it describes how to share the prototype with others and receive feedback.

You can add links to a specific page, an external URL, or navigation action to a selected shape.

Adding a link to page

To add a link to a specific page:

  1. Select a shape to add a link.
  2. Select the page you want to link to in the Link tool from the Inspector Sidebar.

To add a link to a URL:

  1. Select a shape to add a link.
  2. Select Link to Web in the Link tool from the Inspector Sidebar.
  3. Enter the desired URL in the URL input field that appears below.

To add a link for navigation:

  1. Select a shape to add a link.
  2. Select Go back in the Link tool from the Inspector Sidebar.

To remove link:

  1. Select a shape to remove link.
  2. Select No link in the Link tool from the Inspector Sidebar.

Shapes with links are indicated by a light blue outline on the canvas. You can show or hide this light blue outline for links.

To toggle showing links:

  • Press Cmd/Ctrl L.
  • Click Show links button in the Toolbar.
  • Slect View > Show links in the Main Menu.

Presenting prototypes

You can demonstrate your completed prototype with links added to the wireframe to others.

Presentation mode

To enter presentation mode:

  • Press Cmd/Ctrl Enter.
  • Click Start presentation button in the Toolbar.
  • Select Tools > Start presentation in the Main Menu.

In presentation mode, you can navigate between pages by clicking on the links in shapes. Additionally, at the top of the screen, there is the Presentation Toolbar where you can access the following features.

  • Home: Navigate to the start page.
  • Backward: Navigate to the previous page in the navigation history.
  • Forward: Navigate to the next page in the navigation history.
  • Show links: Show or hide links. When a page appears, links flash three times to indicate their presence, but you can choose to hide or display this effect.
  • Previous: Move to the previous page by pressing ↑ or ←.
  • Next: Move to the next page by pressing ↓ or →.
  • Enter fullscreen mode: Switch the presentation view to fullscreen for better visibility.
  • Exit presentation: Leave the presentation mode by pressing ESC.

Exporting to PDF

You may want to share your prototype with others and receive feedback on it. For this purpose, Frame0 supports PDF export, making it easy to share via email or messenger. The exported PDF retains all the links in the shapes, making it interactive. Most free PDF readers allow users to easily add notes or shape markers, which is helpful for providing feedback.

To export PDF, select File > Export to PDF in the Main Menu.