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.
Google fiber speed test by ookla. Google Fiber speed test is performed by performing various speed tests using your Google Fiber internet connection. This happens when our speed test service sends a chunks of bytes to Google Fiber's nearest server. Firstly, we perform a download test in which chunks of bytes are downloaded from remote server to your computer and the transfer. What speeds should I expect? Learn more About. Blog; Careers; Privacy & Terms; Social Media. Google+; Facebook; Twitter; YouTube.
First, let’s start with Jonathan’s animations:
Filter Coffee App
Adobe XD is prevalent in both my work and personal life. While I mainly use it for prototyping web pages and apps (which is its primary purpose), I thought i'd test its boundaries—and it definitely delivered. I wanted to tell a story using XD's auto-animate feature. This was the first time I built something in XD with such heavy animation. Nov 02, 2019 For a layer to animate, it’s name must be the same on both artboards. This includes but is not limited to groups and components. Each element within a group or component can be animated separately (This is because Auto-Animate sees the changes to each element within the group independently).
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.
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:
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.
Auto Animate Adobe Xd
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!
Xd Auto Animate Tutorial
For more UX insights sent straight to your inbox, sign up forAdobe’s experience design newsletter.
Xd Auto Animate Examples
Design, prototype, and share all in one platform with Adobe XD. Adobe XD is the fastest way for design teams to create user experiences for websites, mobile apps, voice experiences, and more.