Prototyping Lessons
Learn how to create interactive prototypes others can use to test, optimize and perfect the user experience for Beginner.
Showcase Screens
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 feel the experience like real users.
All Screens with Grid
Set the Home screen
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.
# Switch to Prototype mode.
# Click the artboard that you want to set as the Home screen. A gray home icon appears in the upper left corner.
# Click the Home icon. It turns into blue indicating that the artboard is now successfully set as the Home screen.
Prototyping
Wire up your screens
To link the artboards for an interactive prototype, you can wire up the artboards by connecting the interactive elements to a target object or artboards. Before you link artboards or screens, name the artboards appropriately. Doing so helps you identify the screen to which you want to link to.
# Switch to Prototype mode.
# Click the object or the artboard that you want to link. A connecting handle with an arrow appears from the object or the artboard. When you hover your mouse over the handle, the cursor changes to a connector.
# Click and start dragging your mouse to see the connector. Release your mouse on the destination artboard.
When you wire up the first element, the artboard of that element is set as the home artboard.
# To make your prototypes more engaging, you may want to introduce triggers and actions. To do so, click the + button on the canvas or click + in the Property Inspector, and select the on-screen options.
For example, if you want to enhance the navigation experience for your prototypes, you can choose to add anchor links by setting Scroll To as an action. For more information on this, see Create navigation links within an artboard.
A. Set to Tap, Drag, Hover, Time, Keys & Gamepad, or Voice. B. Set time Delay in seconds. C. Set to Transition, Auto-animate, Scroll To, Overlay, or Speech Playback. D. Change the destination artboard if required. E. Set to Dissolve or None. F. Select the easing effect. G. Enter the time duration in seconds
# If you select Tap as the trigger, you can now combine two actions such as Transition with a non-transitional action such as Speech or Audio playback. To add multiple actions, set the first Action + button in the Property Inspector to Transition, Auto-Animate, Overlay, Scroll to, or Previous artboard , and set the second Action + button to Audio playback or Speech playback.
Note that if you select Audio or Speech playback as the first action, you cannot add a second action.
# You can also combine multiple triggers to create advanced interactions without distributing the triggers across different objects on an artboard. To do so, use the + button on the canvas or click + in the Property Inspector, and select Triggers, Action, and Destination as in Step 4.
# To preview your prototype, click play button to preview .
