Prototyping

With Prototyping, you can preview your designs and navigate between Artboards with animated interactions. With features like Overlays, scrolling Artboards, and fixed elements, you can bring your designs to life in ways that match whatever you’re designing.

Note: This section reflects the Prototyping upgrades in Release 90, which includes the addition of a PROTOTYPING tab in the Inspector and the new Overlay functionality.

The main elements of Prototyping are:

1. Artboards are the building blocks of any prototype. You can set them as either:
   • Screen (default) — fills the entire window and replaces the previous Artboard, or
   • Overlay - displays this Artboard on top of the previous one.
2. Interactions connect different Artboards to re-create what you might experience in a website or app, such as clicking a button or tapping an image. You can create them using:
   • Links trigger an interaction, like moving to another Artboard or showing an Overlay, when you click or tap on a specific Layer as you preview a prototype.
   • Hotspots allow you to create tappable/clickable areas that link to Artboards but are not defined by the size of a specific layer.
3. Start Points define the Artboards that a prototype will start playing from.
4. Scrolling Prototypes are based on an Artboard Template with an increased height.
5. Fixed elements and Scroll positions can help to mimic the final behavior of a prototype design.
6. Previewing can be done directly in the Mac app or via the Workspace in the web app and iPhone app.

We’ve also included a hands-on guide to Prototyping inside the Prototyping Tutorial. You’ll find it under the Templates tab in the Workspace window in the Mac app.