Create interactive prototypes

After you have completed designing your screens, you can visualize how users can experience your app or website by building an interactive prototype.

You can wire up your screens in desired navigation sequence and organize Multiple Flows having 2 or more artboards wired together. After your screens are set, you can share each flow as shareable links for review, gather feedback, and publish them on various target surfaces at once.

The Home screen is the first screen of your app or website. Your users begin to navigate the app or the website from the Home screen.

Also, when you preview your prototype and nothing is selected, the preview begins with the Home screen. That is, by default, your Home screen is set to the first artboard you add a wire to.

Set up Multiple Flows in your project

Multiple Flows lets you create and share multiple versions of a design from the same document, or in the same file and leverage the same set of artboards across many prototypes or design specs. Each flow retains its own set of wires and share details so you can make changes and re-publish without having to undo and redo all of your settings each time.

If you want to create versions of your design, set a second Home artboard, wire them together, and share unique links for each set. Home artboards act as a starting point for the design where you can drag wires to connect different screens together.
Use the same set of artboards across multiple prototypes without having to duplicate your work. Make changes to your designs and update your links all in the same page.

Another example of setting up different flows is when designing a website that is targeted for multiple platforms such as mobile, desktop, tablet, and so on, you can define and author multiple interaction flows where in each flow depicts a user journey and later share each individual flow with your stakeholders to gather feedback.

Read on to learn how to set one or more Home artboards and define Multiple Flows.

1. Switch to Prototype mode.
2. Set the Home artboard to define the starting point of your design.
   
3. Enter a name for each flow to organize them better.
4. If your design consists of Multiple Flows, set Home artboards for each of those flows.
5. Click the next object or artboards that you want to link. A connecting handle with an arrow appears from the object or the artboard. Click and drag to release the handle on the destination object or artboard.

Add interactions for objects and artboards

Once your screens are defined and wired, you can make your prototypes more engaging by introducing triggers and actions for objects and artboards. To do so:

You can manage and publish each flow as shareable links for review and gather feedback. For more information on how to share Multiple Flows, see Share designs and prototypes.

Tips

• To edit or delete a wire, select the wires to edit or delete them. You can also select a single interaction from the Property Inspector and edit its interactions.
• To hide the wires temporarily in the Prototype mode, hold down Option (macOS) or Alt (Windows) key. 
  
• Hover over the wire to view a tool tip that tells you the number of interactions and their type. 
• To apply the defined interaction to another object, select the object or the artboard, select copy, click the destination object or artboard, and in the right-click context menu, select Paste Interaction.

Link to previous artboard

Unlink artboards

Preview and record interactions

To test your prototype and the interactions, you can preview the prototype. You can also record the preview and save the recording as a .mp4 file. You can then choose to share the .mp4 file with your stakeholders, who can view (or review) the walkthrough of the prototype and provide feedback.

Learn more

Here's a video to help you get started with interactivity: 

Related Resources

• Create prototypes using voice commands
• Animate prototypes

Talk to us