By Matt Rae
P
rototypes bring static designs to life, help tell a story, and demonstrate how a user will experience whatever product you’ve created. Prototypes are also an important part of the design process for communicating to development teams and other stakeholders. Adobe XD makes it easy to prototype your designs, from basic transitions to more advanced interactions. This article will explore how you can use Adobe XD’s more advanced prototyping features to create rich, robust interactions to help tell your story.
Creating micro-interactions
The little details can make a big difference in how someone experiences a product or application. Thinking through how an element responds to touch, or transitions between states, can define how an application feels.
Auto-Animate
Auto-Animate takes prototypes to a new level, well beyond simple transitions and dissolves, and allows you to intelligently move and transform elements between artboards or states. This helps you create rich transitions that feel more realistic. Auto-Animate breathes life into interactions like floating action buttons and can make animating charts and data smooth and simple.
States
Gone are the days where creating interactions for toggle buttons, dropdown menus, and hover states meant creating multiple artboards and keeping them in sync. With Component States in Adobe XD, any component can now have multiple states that can be linked together in prototype mode. This means a single component can contain reusable states for interactions like hovering, clicking, errors, and more.
Realistic scrolling
Scrolling is an often overlooked interaction when prototyping experiences, yet it has become such an integral part of interactions with mobile devices and browsing the web. Whether scrolling through a social media feed, or swiping through an image gallery, scrolling is everywhere, and being able to prototype realistic scroll experiences is critical. Adobe XD provides several methods for achieving the scroll interaction you’re looking for.
Fixed elements
Great for mobile device prototyping and creating fixed background scrolling effects, the ‘Fix Element for Scrolling’ feature in Adobe XD allows elements to be selected to remain in the same position while an artboard is scrolled. This makes creating fixed navigation items and floating action buttons simple and straightforward.
Anchor links
If you’re working on a website design that uses a single page scroll format, or buttons that navigate to different sections within a single page, anchor links will help you mirror the experience. Using anchor links in Adobe XD is as easy as selecting the "Scroll To" action in prototype mode and dragging the prototype arrow to the group the page should scroll to. Using the y-offset handle, the scroll-to position can be tuned precisely to the scroll position.
Scroll Groups
In many applications, it's common to have multiple areas of an interface that scroll when content overflows the bounds of the viewport. In social apps there is now commonly a horizontal scroll of "stories" at the top of a vertically scrolling feed. In desktop applications, often a left and right panel have scrollable containers. Prototyping these experiences and more is easy with Scroll Groups in Adobe XD.
Give your prototype a voice
With an ever increasing number of smart assistants and a focus on accessibility, the inclusion of voice and audio in digital products is increasing as well. With Adobe XD, voice and audio can be leveraged in prototypes to create realistic experiences for voice assistant applications, as well as to use audio to provide feedback to the end user.
Voice triggers
Along with Tap, Time, Drag, Keyboard and gamepad support, Adobe XD includes the ability to use voice commands as triggers for prototyping actions. That means that one or many spoken phrases can be used to initiate actions.
Audio and speech playback
Sounds and voice feedback can be important when designing an accessible digital experience. These forms of feedback augment other forms of feedback to the user, and can help to indicate errors, success, and to read content on a page. Adobe XD supports both the playing of audio files and speech playback within prototypes.
Whether you’re creating a simple mobile website or a robust voice application, the advanced prototyping features in Adobe XD put the tools in your hands to create amazing experiences.
