Auto-Animate in Prototypes with Adobe XD
Hello! Today I’m going to show you how to use one my favorite features in Adobe XD — Auto-Animate within prototypes.
To watch the whole tutorial as a video, view the video file below. Or, you can keep reading!
The basis for this tutorial is a project I worked on recently; it’s a free UI Kit I created for Adobe XD, which you can use to design a website for a non-profit. You can download the UI Kit on Behance here.
For this tutorial, I’ll show you how to add animations to the donation form prototype.
Start with artboards for every state of your form
I started with an artboard for each of the states of my form. There are five states in all:
- The default state
- The state for a user who wants to donate a custom amount
- The state for a user giving a one time donation
- Two states showing different donation amounts selected
By default you can view the prototype for these states by pressing play in the top right corner of Adobe XD, then tab through them using your left and right arrow keys on your keyboard. However it’s much better to make our prototypes clickable, so they feel more like a true recreation of how users will interact with our interfaces. Thankfully, making prototypes clickable is super easy in Adobe XD.
Making prototypes interactive
To make a prototype interactive, simply go into prototype mode and click on the element that should be interactive. A small blue arrow will appear to the right of the element; click and drag this arrow to point at the artboard that depicts the result of clicking that element.
As you can see when you preview the prototype, the user of this form has a choice to enter a custom donation amount, or if they choose they can enter a set donation amount. By clicking this link, they can now expand or collapse the radio buttons, which change to an input field, and vice versa.
Note the way this transition looks; this is using Adobe XD’s default action — which is transition — with an animation style of dissolve.
You can set different types of transitions and animations styles for this action, as we can see here in this panel that appears once you’ve connected your elements.
Create richer interactions with Auto-Animate
The default transition doesn’t look bad, but we can do way better with Auto-Animate.
To switch to Auto-Animate, go back into prototype mode and click on the element again to bring up the options panel again. Click in the Action drop down, and change the action from the default of Transition to “Auto-Animate.”
Repeat this with the other element that gets the user back to where they started.
With Auto-Animate as the action, the transition between artboards is much more reflective of how we’d want this to look live on the web. Instead of fading in between changes, the form resizes automatically, and elements shift up and down just as they would in the browser.
Another example of Auto-Animate in action
There are also two radio buttons which give the user the option to donate monthly or one time, and we can prototype the interaction of toggling between these radio buttons using Auto-Animate as well.
To do this, click on the deselected radio button and drag the prototyping arrow to the artboard that shows what this looks like when it’s selected.
You can see in the video above that XD has remembered my choices from the last transition I set up, so it’s selected auto-animation as the action by default.
I’ll also apply that same transition to the other radio button, again to allow the user to toggle between the two options.
And now, when we preview our prototype again, we can see the Auto-Animate feature in action here. Notice how the active state indicator seems to slide between these two buttons. This is a pretty cool effect, and one that’s super easy to set up.
One more example of using Auto-Animate
To set up the rest of my form fields to be interactive, we want to repeat these steps between the other artboards. Basically just keep dragging arrows from clickable elements to the artboards that show their related state. It’s super simple!
And now, when we preview those auto-animations in our prototype, you can see the effect. Again, the active state slides between these radio buttons in a smooth and easy way. This didn’t require any animation software or knowledge, just some super quick point and click actions in XD.
So here is our completed form prototype, showing all the different states for this screen:
I hope this has been helpful! You can download Adobe XD and try it out for yourself by visiting adobe.ly/meaganxd. I can’t wait to see what you create!
