The struggle with prototyping is that most design software has minimal interactive and motion prototype features, but Adobe XD is closing this gap with its latest round of updates, and I’d like to share my thoughts on a few of these, specifically the Tap, Drag, and Voice triggers.
These are a few small demonstrations of each of these features, which I created to get a better understanding of how to implement and use in my designs.
Tap Trigger
I started by creating a demo to showcase the “Tap” trigger and display various transitions. I identified fade, swipe, and overlay as valuable effects for prototyping. Each of these interactions have distinct properties and, when used properly, can be very effective in bringing your prototypes to life.
- Fade for example is simply just that, a fade transition from one screen to another. I’m also using Auto-Animate to make this transition slightly more interesting by changing the size and transparency of the buttons.
- Swipe, on the other hand, is great effect for mobile menus. Pushing screens from left to right, or top to bottom.
- Overlay is great for demoing search functionality or pop-ups. This feature was rolled out in the summer, but I think it’s worth highlighting.
Overall, these actions are very easy to implement and helpful prototyping effects. My only recommendation to Adobe to improve this functionality would be to add a “hover” trigger to the list of options, to help convey desktop button states.
Drag Trigger
Another new prototype trigger is the “Drag” effect, which simulates the drag functionally that users have come to expect while browsing on a mobile device. This effect makes our design feel alive and interactive, and helps convey animation and timing.
I did note that this feature is not fully interactive, and limited to a linear demonstration, meaning that the users must drag the items to the end before they can go back. Also, this feature is only available in the prototype and must be demonstrated in Preview mode or a Video Recording.
Voice Trigger
(View with the sound on!)
Finally, the “Voice” trigger is another exciting feature, which was surprisingly easy to use. Voice and speech recognition is becoming a more common UX approach, and I think this feature opens the door to some really interesting work.
In my opinion, Adobe XD added some pretty awesome features to prototyping. I can see these being leveraged for client presentation or user testing. The new features do favor mobile, which makes sense, especially since mobile is how most people browse the internet today.
Overall, I know I’ll be leveraging all these features in my work, and hopefully impressing both clients and colleagues with my prototyping skills.
