Adobe XD's profile

Adobe XD Pro Tips: Prototyping

Add multiple interactions to a single element

In Adobe XD, any element or group of elements can be used as a trigger when adding interactions in a prototype, but you’re not limited to just one trigger or action. Adobe XD allows multiple interactions to be stacked on a single element, so for instance, you could add a Tap, a Keyboard, and a Voice trigger all to a single menu icon, and each can have different actions. 

To do so, once one trigger is created, click on the + icon either in the Properties Inspector, or on the start of the last wire created. Next, select the desired trigger type and action to use. You’ll notice once a Tap or Drag has been used once it cannot be used again, however triggers like Voice can be used multiple times with different commands.
Paste interactions between elements

In the same way that you can copy and paste styling between objects, you can also copy and paste interactions to save time recreating the interactions. 

This feature currently works between elements outside of component states, and works best when pasting between elements that share a target destination. In Prototyping mode right-click and copy an element, then select that target element and in the right-click menu select Paste Interaction.
Create multiple hover states on a single component

By default, when creating a new state on a component, there is an option for creating pre-wired Hover and Toggle states. These work by animating between the Default State and their state. However, you’re not just limited to a single toggle or hover interaction on each component, additional states can be created by navigating to the Prototype mode and using either the Hover trigger to create hover states, or Tap trigger to create toggle states. This unlocks the ability to have two versions of a component (i.e. light and dark) with all the same interactions.
Use speech playback to simulate a screen reading experience

Speech playback is helpful for creating virtual assistant workflows, but can also be critical for testing and prototyping accessible experiences like simulating screen readers, reading menus or reading out text on a screen.

To set this up, enter the text you wish to have spoken, but ensure it is written in a way that reflects how it should be read. If you wish to include breaks in the speech, include a line break between sentences or paragraphs.
Adobe XD Pro Tips: Prototyping
Published:

Adobe XD Pro Tips: Prototyping

Adobe XD is a helpful tool for efficiently prototyping experiences and interactions in different ways. The included prototyping tools and feature Read More

Published: