The Power of Auto-Animate: 10 Examples of How Adobe XD Can Improve UX Design
Illustration: Justin Cheong.
Auto-Animate, which enables you to easily create prototypes with immersive animated transitions, is the biggest addition to Adobe XD’s prototyping features yet. To demonstrate the slick effects you can create with Auto-Animate, we caught up with Howard Pinsky, senior XD evangelist at Adobe, who also runs a popular YouTube channel covering XD news, and Jonathan Pimento, senior product manager on Adobe XD.
Both Howard and Jonathan have been tinkering extensively with Auto-Animate, and in this article, they’ll show you some stunning examples of the new feature in action and how it can improve your UX designs.
First, let’s start with Jonathan’s animations:
Filter Coffee App
With the help of Adobe XD’s new Auto-Animate feature, I was able to animate the vector paths to modify the different levels of coffee, water, and milk. The ability to animate different vector paths enables you to create some nifty animations for icons and other UI elements.
Reel iPad App
Auto-Animate allows you to animate the difference in properties for the same object. Even without a timeline, you can achieve some basic sequencing in XD. Notice how the scenes slide up from the bottom in a sequence? You can achieve the same effect by moving them off the artboard on the start screen and stacking them so that they animate in one after the other.
Reel Mobile App
This example demonstrates how you can easily combine gestures like tap, drag and time with Auto-Animate to build end-to-end experiences for mobile. The subtle easing effects are achieved by using the new easing functions like bounce, snap and wind up.
Sliding Cards
This example shows how you can also animate the position of the mask and image using Auto-Animate. I’ve set up the example to use drag, and then with Auto-Animate, I’ve easily animated the card images by repositioning and resizing their masks.
Next, take a look at what Howard has been creating with Auto-Animate:
Burger Explosion
This was a fun interaction to work on. After stumbling across a static image of an exploded burger on Dribbble, I had the idea to bring it to life. With Adobe XD now supporting Illustrator files, I grabbed a delicious-looking burger spread from Adobe Stock and popped it straight into XD. From there, I utilized Auto-Animate and drag triggers to create the interactions to simulate how a user could simply drag toppings away.
Photo Editing Prototype
Creating smaller interactions is fun, but for this project, I wanted to dive into something more in-depth. Seeing that I’m constantly editing photos on my phone, I wanted to build out a similar experience using Adobe XD, complete with a gallery, cropping/rotating, and image adjustments. The cropping interaction, in particular, was a fun interaction to tackle as it involved animating masked shapes and images.
Mobile Scrolling Interaction
This shot came to be after a few users asked me if XD supports ‘scroll’ as a trigger. While it doesn’t (just yet), it is certainly possible to create a similar interaction using just two or three artboards and Auto-Animate.
Parallax Landing Page
I’m not sure why, but I’ve always been a fan of parallax interactions (when they’re done correctly), so once Auto-Animate was released, I decided to start experimenting. Like many of the other examples, I simply had to design the various artboards, and XD took care of all the complex keyframing in the background. The idea with this interaction is that a user would be able to hover overtop of the various destinations to expand them, then click on one to see more details and kick off the parallax effect.
Day to Night Toggle Switch
While I love designing complete projects, sometimes it’s fun working on a single element – like this switch! Using an imported Illustrator file, I added the various day/night layers into a pill-shaped mask, then designed both states (day/night), making sure to move the elements on each artboard. Since paths animate beautifully in XD, creating the shifting moon was quite simple.
Tesla Apple Watch Concept
As tech savvy as Tesla is, it surprised me to find out that they don’t have an official Apple Watch app. So like any curious designer would do, I started to think about use cases. Using XD, I envisioned how a trunk/frunk interaction could look and feel like using a simple drag gesture.
Many more examples can also be found on Howard’s Dribbble page.
Join the community
The possibilities of what you can do with Auto-Animate are endless. We’d love to see what you are creating with the new feature, so please reach out to the team @AdobeXD on Twitter and make sure to include the #AdobeXD hashtag. You can also talk to the team on Facebook, and share your prototypes on Behance, tagging them with #MadeWithAdobeXD and selecting Adobe XD under “Tools Used” for the opportunity to be featured in the Adobe XD newsletter.
Let’s animate the web!
Further resources
- January 2019 Release of Adobe XD: Auto-Animate Comes to the Browser
- Making Animation Accessible to UX Designers with Adobe XD
- Animation for UX: How Animation Adds Meaning to UI
- Ask a UXpert: How Micro-Interactions Can Enhance the User Experience
- Best Practices for Using Auto-Animate in Adobe XD
For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.