Artwork by Matt Rae
Adobe XD is a helpful tool for efficiently prototyping experiences and interactions in different ways. The included prototyping tools and features can help you create prototypes with simple transitions, as well as more robust prototypes including rich interactions and animations.
This guide will explore some pro tips you can use when prototyping in Adobe XD.
The basics
These tips will help you with the basics of setting up prototype links and working faster when applying multiple interactions within a document.
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.
Show all wires in the document
By default, Adobe XD displays prototyping wires for the currently selected artboard as a way of reducing visual clutter on the canvas. However, if you wish to see all the connections between artboards in a file you can do this by selecting all artboards in Prototype mode. The keyboard shortcut for selecting all is Command / Control + A.
Apply time-based triggers on artboards
Adobe XD has several helpful triggers for creating interactions like Tap, Voice, Drag, and Keys and gamepad. However there is one more that can be found when selecting an individual artboard, rather than a specific element. Time can be used between artboards to create delays, and automatically progress an animation after a set amount of time. This is a helpful trigger for loading animation and notifications.
Auto-Animate
Auto-Animate is the backbone of micro-interactions in Adobe XD and helps to create the smooth motion in prototypes. It works by animating properties of an element between two points (this can be two artboards, two states, etc). Here are some tips for maximizing your use of Auto-Animate.
Create animated borders with dash and gap
Dash and gap controls on border strokes make it easy to create dashed lines and borders, but they’re also helpful for creating animated lines for use in charts, graphs and more.
To do this, set a Gap value large enough to encapsulate the full length of the border. This does take some guess work, but eventually you’ll find a value where the Dash and Gap values are the same, the border is complete, and as you reduce the Dash value, the line length reduces. In the first state set the Dash to zero, and then match the Dash and Gap values in the end state to make it animate.
Change the speed objects fly-in
Auto-Animate is a linear animation which means it is animating points, lines, and positioning from A to B in a straight line. This also means all elements follow the same animation duration to move from A to B. To create an effect where objects move at different speeds, the distance between A and B needs to be increased.
This can be done by including an object inside of a group (of which an element always remains on the artboard) and moving it off of the artboard as far as desired. Moving objects to different distances will create varying effects.
Component states
Component states are incredibly helpful tools for defining reusable elements when building out a design, but they’re also critical pieces when it comes to prototyping because of their ability to store interactions between states. Here are some tips for integrating components and states into your prototypes.
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.
Cascade changes from the default state
There is a reason the Component State menu includes indentation from the Default State. Any new states created on a component act as children to the default, much like the relationship between a Main Component and an instance of that component.
If you’re adding elements, or making changes that should apply to all states, make them to the Default State. If you don’t want something to appear in the Default State but you wish to animate it into place in a subsequent state, include it in the default, but hide it in the Layers panel or turn down the opacity.
Copy appearance when creating a new state
When creating new states, the currently selected state can play an important role, as it dictates the style of the new state. With this in mind, if you’re creating states that build on each other, you can save time by creating one state, selecting it and adding a New State as it will copy the style of the selected state.
Use nested components to create single selects
Currently components are not capable of communicating with other components to control the state based on an interaction. So for instance, if you have a checkbox component and wish to create a radio button group where only one element can be selected at one time, this won’t be achievable with individual components.
However, wrapping each of these components in a group and then combining them into another component with individual states for each selection will give you the ability to define the broader interaction, while still receiving visual updates on the checkbox component.
Apply global interactions on a Main Component
Since components, and their interactions are reusable across a design, and in other files through libraries, interactions can be added to a Main Component to have it show up any time a component is used.
This is helpful for interactions you wish to show up all the time, like on a menu component where each instance should be directed to the same set of pages or artboards. If you’re creating an interaction that may have a variable destination, set the interaction on the instances instead.
Prototyping with voice and sound
When prototyping in Adobe XD, triggers and actions are not just limited to visual motion. Voice triggers paired with audio and speech playback can be used to create robust virtual assistant prototypes, design accessible hands free flows, and provide better feedback to a user.
Use voice recordings to create custom narration
When using speech playback, you can enter text that the speech engine will read out when playing the prototype. However using Audio Playback you can upload audio files with custom narration to define specific voice characteristics for the prototype.
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.
With these tips and tricks in your back pocket you can accelerate your prototyping workflow and gain back time. Interested in learning more tips and tricks? Check out this guide on layout tips and tricks, or this one on design styling.
