Auto-Animate is one of the most powerful features in Adobe XD, allowing designers to add slick motion effects, microinteractions, and smooth transitions to website and app prototypes with just a few clicks. A new update pushes the possibilities even further; you can now animate the properties of a stroke, including the width, dash, and gap values. So much dynamic potential at your fingertips — here’s how to make the most of it.
How to use Auto-Animate in your XD files
In Prototype mode, simply click and drag a prototyping wire to connect two separate artboards; XD will detect the differences between them and create animations for you. You can learn more about prototyping with Auto-Animate and other XD features in this guide.
I’ve put together a demo file with a variety of use cases to experiment with and explore, and explained each in more detail below.
Loaders
One of the most common use cases for animation in UI and UX design is to convey status, through something like a loading indicator or progress bar.
Create an infinite circle loader by drawing a circle; duplicating your artboard at least three times; changing the dash and gap values in each artboard; then using Auto-Animate to animate the transitions. (The number of artboards used will determine how granular your animation will be.) You can take the effect even further by moving the circle in one of your artboards to create a “dropping” effect.
Fingerprint scan animation
Fingerprint scanning can be a useful feature for online payment apps.
When a user touches the fingerprint button, you can animate the strokes in and customize the easing to create a scanning effect. Consider adding a similar stroke animation for a check mark to indicate to the user that the scanning is complete.
Onboarding screens
One of the best places to leverage animations is in your initial onboarding screens. This is a place where you can delight users right away and make a great first impression!
I created illustrations in Adobe Illustrator and brought them into XD for prototyping and animation. There, I can select the strokes and modify the dash and gap values, and use Auto-Animate to build in the animations. On the Share Location screen, I used the Fancy Maps plugin to generate a map and placed strokes on top of the map to create the effect.
Hot tip: It’s so easy to import from Illustrator to XD! Just copy and paste.
Charts and dashboards
Who said dashboards have to be boring? Give life to graphs and charts to draw users’ attention to key data points.
Draw a line graph; duplicate your artboard; and tweak the gap values across artboards to create the “write-on” effect. Then, link together the artboards in Prototype mode and use Auto-Animate to create the animation.
Hot tip: Components can make your life much easier. Create different UI elements to use in the dashboard and save each as a Component. Then, you can edit the Main Component and push changes automatically across all of the instances in your dashboard artboards.
Website illustrations
Time to take it up a level, and this is one of my favorites functions.
Copy and paste complex line illustrations from Illustrator to XD. Then, edit the dash and gap values to create the animation, and move each illustration on the artboard to create the sleek scroll effect. You can also change the direction of lines with Illustrator if you are looking to spice things up as a user scrolls up or down.
With Auto-Animate, the sky's the limit!
