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.
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.
In the pop-up window that appears, you can specify the following:
- Transition options and the duration for the transition: 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.
- Overlay: If you want to simulate the states or transitions such as menu dropdowns and sliding keyboards, select Overlay.
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 delete an interaction, drag the connector's destination handle off a target artboard on to the draft area.
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.
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.