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

  3. Click the Home icon. It turns into blue indicating that the artboard or screen 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.

Link interactive elements to target screens

Before you begin to link artboards or screens, name the artboards appropriately. Doing so helps you identify the screen to which you want to link a given screen.

  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 Interaction panel that appears in Property Inspector, you can specify the following:

    • Transition and duration: If you want to maintain scroll position when you transition to another artboard, select Preserve Scroll Position. This option is useful for when you are prototyping navigation bars or fixed footers. If the user scrolls in the original artboard, the next artboard recognizes the scroll position from the original artboard. When you click an artboard or any element in the artboard, you can control the scroll position to keep the original place from one screen to the next. The control prevents repeated scrolling back and forth in the project file. For example, if a user scrolls down to y=1000 on artboard A, the transition to artboard B defaults to y=1000. If the original artboard has no scrolling defined, the Preserve Scroll Position option is inactive.
    • Overlay: If you want to simulate the states or transitions such as menu dropdowns and sliding keyboards, select Overlay.

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

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


    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.
    • 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.
    Interactive elements linked to target screens
    Interactive elements linked to target screens

    A. Home screen B. Linked artboards C. Outgoing connection D. Incoming connection 

    Adobe XD lets you use keyboard shortcuts and gamepad triggers to simulate native desktop applications and prototype an enriched game experience or design. When wiring a prototype, you can select Keys/Gamepad from the Trigger drop down list and assign any key. You can use these triggers with Tap, Drag, Time, and Voice to prototype for different use cases like desktop apps, games, and presentations.


    The gray links indicate outgoing connections, and the blue links show incoming connections.

Use timed transitions

Timed transition in Adobe XD enables you to create rich prototype experiences such as onboarding flows, automatic redirection to a different screen, or progress bars. Just like you Tap to trigger transitions, you can use Delay to specify the transition duration. For example, when you create onboarding workflows, you can use the Delay option to link and transition between artboards.

As a designer, you can also use time to trigger transition to another artboard. For example, if you are designing onboarding flows, you can use timed transition to get start with a splash screen of an app flow and automatically transition between a few onboarding screens.

Create a timed transition for onboarding workflows

Timed transitions
Timed transitions

A. Select trigger to time B. Set time delay  C. Select action to transition D. Select destination artboard  E. Select animation effect  
  1. In XD, switch to Prototype mode.

  2. To view the connector, select the artboard and use the mouse hover on the handle.

  3. Click drag-and-drop the connector from the source artboard to the destination artboard. When you wire up the first element, the artboard of that element is set as the home artboard.

  4. Click the connector to view the Interaction panel in the Property Inspector and select the following options:

    • Trigger: set it to Time.
    • Time delay: set the transition delay period in Seconds.
    • Duration: set the transition duration in Seconds.
    • Action: set it to Transition.
    Set trigger, delay, duration, and action
    Set Trigger, Delay, Duration, and Action

    A. Set Trigger to Time B. Set Delay in Seconds C. Set Action to Transition D. Set Duration to Seconds 
  5. Select the Desktop Preview icon  to preview the changes.

Review the prototype link on the web

  1. In the desktop app, click the Share button at the upper right and choose Share for Review. When the link is created, you can copy the link and open the prototype on browser. Time transitions play as you design in the XD desktop app.

  2. To stop the time transition, press the back-arrow key or the back-arrow navigation button, which takes you back to the previous screen.

  3. When you stop the transition for the first time, Adobe XD displays a notification that the time transition has stopped. To resume, press the right-arrow navigation button or the right-arrow keyboard key.

Link to previous artboard

  1. In the Prototype mode, select the element you want to link. When a small arrow appears, click the arrow, and it automatically sets the action as previous artboard. You can also link the element to an artboard, and select Action > Previous Artboard.

    Select previous artboard
    Select previous artboard
  2. When the Action is set to Previous Artboard, the icon changes.

    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.

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
    Record prototype interactions
  3. Specify a name and location where you want to save the recording. The recording is saved as a .mp4 file.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid