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.
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.
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.
In the Interaction panel that appears in Property Inspector, you can specify the following:
- Action: Select Transition.
- Duration: Enter the duration value to indicate the duration of the easing effect. The acceptable range is 0.2-5 seconds.
- Preserve scroll position: Transitions to the next artboard while maintaining the position from the previous artboard. For more information on creating vertical scrollable artboards, see Create scrollable artboards.
- 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.
A. Home screen B. Linked artboards
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.
Timed transition in Adobe XD enables you can transition across artboards based on a specific delay. This is useful to create rich prototype experiences such as onboarding flows, looping animations, automatic redirection to a different screen, or progress bars.
For more information on time transitions, see Create timed transitions.
Adobe XD allows you to stack or overlay content on top of another artboard to simulate interactive slide effects. For example, drop-down lists or slide-up keyboards. With overlays, you can also reuse an artboard multiple times without duplicating the overlay content for each artboard.
For more information on overlays, see Add overlays.
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.