Learn how to create interactive prototypes in Adobe XD that you or others can use to validate the user experience.

After you have completed designing your screens, you can connect them to each other to visualize how users can experience your app or website.

Adobe XD lets you create interactive prototypes to visualize the navigation between screens or wireframes. You can preview the interaction to validate user experience and iterate on your design to save time on development. You can also record the interactions and share it with stakeholders to get their feedback. Zoom in/zoom out to see specific portions of the prototype in detail.

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 at the upper left corner.

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

    The home icon turns blue after the artboard is set as home screen
    The home icon turns blue after the artboard is set as home screen

    To set a different artboard as the Home screen, simply click the Home icon associated with that artboard.

Link interactive elements to target screens

  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. In the pop-up window that appears, specify the transition options and the duration for the transition.

    Press Esc or click outside the pop-up to dismiss it.

  5. Repeat the steps above to link all the interactive elements in your project.

    TIP:

    In Prototype mode, to make the process of creating interactions faster:

    • You can copy and paste objects across artboards. The object is copied and pasted along with its interaction.
    • You can also copy and paste an interaction alone. Copy an object, right-click another object and then select Paste Interaction. Only the interaction is pasted.
    all-connectors
    Interactive elements linked to target screens

To point the element to a different screen, click the handle again and drag it to the required screen.

To view the connections to or from a particular artboard, select the artboard title.

To delete an interaction, drag the connector's destination handle off a target artboard on to the draft area.

Link to previous artboard

  1. In the Prototype mode, select Target > Previous Artboard.

    Select previous artboard
    Select previous artboard

  2. Set the Target as Previous Artboard. The icon changes once the target is set.

    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 grey space between the artboards).

    Link artboard to None
    Unlink artboards

    Note:

    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.

Preview and record interactions

Note:

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 in the preview window. To end the recording, press Esc or click Record again.

    preview-record
    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