In this tutorial, you’ll learn how to use Adobe XD’s Auto-Animate feature in order to create a high fidelity interactive prototype as seen here. Now you can follow along by downloading the lesson file at this URL, or by clicking on the link in the Resources section for this video. Once you open up the lesson file, you’ll see a single art board that I’ve prepared for you. The way Auto-Animate works is by comparing two artboards, seeing if they have layers with the same name and then animating any properties that have changed between the two.

Now, again, I’ve prepared this art board for you. Go ahead and click on any image, and you’ll see that I hid a header and a footer right outside the main artboard, and these are the first two objects that are going to be animated. To see the next object that will be animated, click on the doughnut image and then in the Layers list, and click on the group Cropping Guides. In the Inspector, look for the opacity slider, and note it’s set to 0%. If you slide it to 100%, you’ll see these guides appear, but go ahead and bring it back to 0 (zero) for now.

The last objects to be animated are all of the other thumbnails except the donut. So if you click on any one of them, you’ll see they’re all grouped and that’s going to make them easier to control. Now that you know what’s going to be animated, let’s go ahead and do it. Place your cursor over at the artboard title, press your Option key and click and drag the artboard to the right. Now click anywhere inside the artboard, and click and drag the header down and the footer up. Next, click on those hidden crop guides I showed you earlier and bring the opacity to 100%.

Click on any gallery image and bring the opacity down to 0 (zero) to fade them all out. Next in the Layers list, click on the Cropping Guides group, Shift + click on the Doughnut image layer to select them both, then press your Shift key and grab the lower left corner of the selection and drag down and to the left until you can get equal spacing on both sides. Now let’s animate. Click on the Prototype tab, then click on the doughnut image in that first artboard. Grab that blue handle on the right side and drag it to the second artboard.

Over in the interaction panel, if the Trigger is set to Tap, just leave it as it is. Otherwise, click on the Menu and choose Tap. Next, click on the Action menu and choose Auto-Animate, which is what you’re all here for. Let’s go ahead and look at Easing, which is a way to control the speed of your animation. For example, choose Ease Out and this means the animation will start quickly at the beginning and then slow down toward the end. If you want to learn more about easing, be sure to check out the Resources section for this video.

Finally, for Duration go ahead and type 0.3 seconds and press Enter or Return. Now press Play to preview the animation. You can click on the doughnut, and you’ll see the magic of Auto-Animate. Every object that changed between these two artboards has automatically been animated, which is pretty cool. But go ahead and close this preview, and let’s give the user a way to get back to the initial screen. Double-click on the Cancel button here, and drag the blue handle back to the first artboard. Notice all the settings you created in the last step are the same, which is great. Press the Desktop Preview again, click the Cancel button, and notice how Auto-Animate takes care of everything once again.

And you can even go back and forth between these two screens. When you get bored with that, go ahead and close your preview. The last thing you’ll do is create an auto-animation that lets the user physically drag these crop handles, especially if they’re using a mobile device, to preview the prototype. To do this, Option + click the second artboard to make a copy, go ahead and drag that over, then click on the cropping guides and create a square crop around the doughnut like so.

You can do it by hand, or if you want to make sure it’s a true square. You can type in values for width and height here in the Inspector. I used 184 and 184. Now on the previous artboard, click on the Cropping Guides, double check they’re actually selected in the Layers list, then go to Prototype Mode, click and drag the blue handle from the guides to the third artboard. Now you’re going to change the trigger. So click on that Trigger menu, choose Drag, and for Easing choose Snap.

Preview again, and now you’ll be able to drag that handle, and if you let go at any point the animation snaps into place, which adds a little bit of realism to the whole thing. And again, I’m doing this on a Desktop Preview, but Adobe XD has a Device Preview feature that will let you interact with this on a phone or tablet, which is very cool. Thanks for watching. Be sure to check out our other Take 5 tutorials, as well as the rest of our full course catalog at Gymnasium.