Learn how to create interactive prototypes others can use to test, optimize and perfect the user experience.

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.

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.

  1. Switch to Prototype mode.

  2. Click the artboard that you want to set as the Home screen. A gray home icon appears in the upper left corner.

  3. Click the Home icon. It turns into blue indicating that the artboard is now successfully set as the Home screen.

    Set as Home screen option
    Set as Home screen option
    Home screen set
    Home screen set

    To set a different artboard as the Home screen, simply click the Home icon associated with that artboard. To view all the artboards after publishing, ensure to link all the relevant artboards.

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.

  1. Switch to Prototype mode.

  2. Click the object that you want to link. A connecting handle with an arrow appears on the object. When you hover your mouse over the handle, the cursor changes to a connector.

    Linking interactive elements to target screens
    Linking interactive elements to target screens
  3. Click and start dragging your mouse to see the connector. Release your mouse on the target artboard or screen.

    When you wire up the first element, the artboard of that element is set as the home artboard. 

  4.  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.

    Prototyping options
    Prototyping options

    A. Set to Tap, Drag, Hover, Time, Keys & Gamepad, or Voice. B. Set time Delay in seconds. C. Set to Transition, Auto-animate, 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 
  5. 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.

    Remember that you can apply Tap, Drag, Hover, and Time triggers only once, and Voice, and Keys & Gamepad many times. 

    Combine multiple triggers
    Combine multiple triggers
  6. To preview your prototype, click Desktop preview  .

Tutorials

"As prototyping workflows continue to evolve, there are more and more ways to interact with your design. Everything from touch, drag and tap gestures, to keyboard shortcuts and voice recognition can not only be used, but combined to trigger a variety of interactions."- Dani Beaumont, Principal Product Manager, Adobe XD.

Watch this tutorial to learn how to combine multiple triggers for a variety of interactions.

Watching time: 1 minute.


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.

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 on the destination object or artboard, and in the right-click context menu, select Paste Interaction.

Link to previous artboard

  1. In the Prototype mode, select the element you want to link. When a small arrow appears, click and drag the arrow to the previous artboard, or select Action > Previous Artboard.

    Select previous artboard
    Select previous artboard
  2. When the Action is set to Previous Artboard, a tail icon appears at the end of the wire.

    Set the target
    Set the target
  3. Use the preview window to preview the linking.

Unlink artboards

  1. In Prototype mode, select Target > None.

    You can also drag the wire from the artboard to the draft area (the gray space between the artboards).

    Unlink artboards
    Unlink artboards

    The None option is available only if the artboard is linked to a target.

  2. Preview the linking in a browser. Any target link previously set from the element is removed. To view all the artboards after publishing, ensure to link or unlink the relevant artboards.

Preview and record interactions

Recording prototypes is not supported in Adobe XD on Windows. However, there's a workaround. Press the Windows + G keys and use the native recorder to record the Preview window.

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.

  1. Click the Desktop Preview icon. The Preview window appears and displays the artboard in focus.

    To test the navigation between screens, click the interactive elements.

    You can edit the design and interactions in your prototype while previewing in the preview window. The changes are instantaneously available for preview.

  2. To record the interaction, click Record icon in the preview window. To end the recording, press Esc or click the Record icon again.

    .
    Record prototype interactions
  3. Specify a name and location where you want to save the recording. The recording is saved as a .mp4 file.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy