Links

Prototype enables you to create both internal and external links between artboards (webpages).

There are 4 types of Links:

  1. Page Link - A link between different artboard
  2. Anchor Links - A link within the same artboard
  3. External Links - A link to an external website
  4. Overlay Links - A link that displays an artboard (webpage) over the existing one it was clicked from

In Prototype, each artboard represents a webpage. You can create Links to connect different artboards (webpages):

  1. Select the layer which will trigger the navigation event (Usually this will be a button)
  2. Click Links in the Flow section of Prototype
  3. Select the target artboard (webpage)

Creating Page Link

You can create Links to a different section in the same artboard (webpage).

To create an Anchor Link:

  1. Select the layer which will trigger the navigation event
  2. Click Links in the Flow section of Prototype
  3. Select the target Layer in the Layers List (webpage)

❗️Note: This does not work with Groups, only Layers & Symbols

Anchor Links

Many times you want to create links to external websites that aren’t a part of your website, for example, links to Facebook, Twitter, App Stores, etc..

To create an External Link:

  1. Select the layer which will trigger the navigation event. Usually this will be a text layer or a button
  2. Click Links in the Flow section of Prototype
  3. Point arrow and click External Link button at the top bar
  4. Enter the URL for the external website

External Link

If you created a link and now you want to remove it:

  1. Select the Layer with the link you want to remove
  2. Click the Trash Icon in the Links section

Remove Links

Home page

Every website needs a Home page. The Home page is the page that visitors will see first when they visit the site.

To set the Home page for your website:

  1. Select the artboard you want your Prototype or Website to start from
  2. Click “Set as Home” in the Flow section of the Prototype Panel.

Set Artboard as Home

Overlays

An Overlay is a link type that lets you display another artboard on top of the existing one rather than as a separate destination screen.

Overlays can be used for modal windows, drop-down menus, pop-up notifications, all without leaving your current screen.

Creating an Overlay is as easy as creating two links:

  1. Select the Layer that will trigger the Overlay
  2. With Links , connect it to the Overlay artboard
  3. Check the Overlay box in Links
  4. Now, select the Overlay component and link it to the “Dismiss Overlay“ option at the top menu bar
  5. Change the Overlay artboard background color to transparent by moving the transparency slide to the left. Make sure that “Include in export“ is checked in

ℹ️ Overlay Tips:

  • For a cooler Overlay effect, set its artboard background color to 70% Transparent

Transparent Overlay Background

[Download] this High-Fidelity Prototype Sketch file to try it yourself.