By Dani Beaumont
Auto-animate transitions allow you to create simple yet powerful micro-interactions between objects. The way that it's implemented in XD is pretty incredibly simple, but it's definitely easier to understand once you see it in action, so let's just jump in.
The first thing I want to do is switch over to Design mode. I'll do that by clicking here in the upper left-hand corner of the application, and I also want to open up the Layers panel, so for that I'll come to the lower left-hand corner and click on the Layers icon. Next what I want to do is make sure I have this "Onboarding 01" artboard in view. One easy way to do that is to click on the title, and then hit CMD-3 or CTRL-3 on Windows. That's going to basically resize the artboard to fit the active window space. With that said I'm going to hit the spacebar and I just want to move that artboard towards the left-hand side. What I want to do is duplicate a second version of this exact artboard. With that artboard selected, I can always come to Edit and select Copy and then Edit again and select Paste, but there's a nice shortcut that I'd like to teach you as well, and that's simply holding down Option on the Mac or Alt on Windows, and pressing and dragging a second copy. So I'm going to hold down Option and then just press and drag a second artboard. I want some space between the two, so that looks pretty good to me. When I release I can come on in now and double-click on the title and give it a better name. So we'll just come in and call this one "Onboarding 02", and I'll hit return. Now the fun part starts here. The rule when it comes to auto-animate is that as long as the name of the object is the same between two artboards, XD will animate any of the differences in attributes between the two. To see a full list of all the attributes that change with auto-animate, take a look at the help tutorial that I've linked in the description below this video. For now let's just go ahead and give it a try.
What I want to do is simulate the advancing of a carousel, so the image that you see here in focus is going to move towards the left, and then an image that's here on the side is going to get larger and move into view. I'll go ahead and hit the spacebar again and bring that second artboard a bit more into view. From here let's use the Layers panel to make selecting these nest of objects easier. What I want to do is make sure that I'm on the "Onboarding 02" artboard so, when I click on it, I can see it here in the Layers panel. From there I'm going to double-click on the icon to the left which actually brings me into a detailed view of that "Onboarding 02" artboard, Notice that I've got a number of elements here. I want to click on this group of images right in the center in the Layers panel. I could have also clicked on "Product Showcase "to select it. If I click on the folder to the left of Product Showcase I can see the 3 images, so Product 1, Product 2, and then Product 3. What I want to do is make the first product small and the one in the middle larger, so when I click on that third object I see the size is about 192 in height and width roughly speaking.
So I'll come to that first product. Again the easy way to do that is just click on the name product one here in the Layers panel, and then the Properties Inspector change the value to be 191 in width and 191 in height, and then hit return. I'll come to that second object now, so Product 2, and I want that one to be larger. I think a value of about 300 in height and width is going to be pretty good. And now have kind of a bit of a mess for each of my objects so I'm going to come here to the Layers panel and click on Product 1, hold the shift key and click on Product 2 and 3, so shift select all 3 of them, and then here on the right in the Properties Inspector I'm going to center the images with one another by clicking on this center icon and then distribute them evenly by clicking on the last icon in that section there towards the side. All right, with that set, I'm going to go ahead and hit escape so that I move up a level in the hierarchy. You can see it here I could also have clicked on the group there in the layers panel. I just want to then come in and press and drag to move that new larger image into view. Now it looks like I'm getting just the nubbins of my artwork on the left and right. Let's compare that to what we have over here. Looks like it could use just a little bit more presence.
So I'll come in once again and select Product 1 and I'm just going to move it over a little bit. If I come in and just press and drag just a little bit more visibility I'll do that for Product 3 and move that in just a bit more. Okay that looks good I now have the differences in my graphics. I want to create some differences with the description as well and when I click on it you can see that I have a group of three different text block. What I want to do now is just come in and select that, and press and drag until that second text block is centered there underneath the first images. With that all set I now want to focus on my navigation here towards the bottom. I want to kind of zoom in a bit more to get some detail so I'm going to hold down the Z key which is going to bring up that magnifying glass for me, and then just press and drag so that I can zoom in more tightly. And when I release I've got a nice zoomed in view of the navigation. What I want to do is make the color of this dot be the same as the first to indicate the navigation. Now these dots were designed in a way to make this pretty easy so what I can do is come into the second dot. If I hold the Command key and just click it will select or tunnel into the group to select the center dot. Here in the Properties Inspector notice that the opacity is set to 50. If I just press and drag to dial that up to a hundred it will bring that up to full visibility. I'm going to do the same thing again with the left dot, so hold the CMD key and click to select it, and I'll change the opacity on that one back to 50% and hit return. So I now have that feeling as though it's in focus with that second dot. Now that we have this all set I'm going to zoom back out. For me I'll go ahead and pinch to zoom out. You can also hit CMD or CTRL on Windows and the minus sign.
I'm going to keep pinching until I can see both of my artboards together. We're ready to wire these two boards together and auto-animate the transition between them. For that I'm going to come in and click on that first "Onboarding" artboard there, and then in the modes here towards the top click on Prototype mode. Here in Prototype mode notice that the entire artboard is blue and it's selected. For what I want to do here I want to make sure that it's the dots that cause the navigation to the next artboard, so I'm gonna have to kind of be a bit precise about how I do this. I'm going to go ahead and zoom on in so that I can see those dots and then holding the CMD key I'm going to click right on that second dot to select it. It has an incredibly small little arrow there, so I'm going to zoom back out a little bit but make sure I keep that selected, and what I want to do is press and drag a wire from that dot to the second artboard here in the Properties Inspector. We'll set our settings similar to what we did in the last step under Trigger I want it to be Tap. For Action instead of Transition I want Auto-animate. Under Destination onboarding too is great it's there on the right. For easing I'd like it to go ahead and Ease In and Out, and then Duration -- for what I'm doing I want to exaggerate it so that you can see the animation between artboards, so I'm going to go ahead and set that at one second, and then go ahead and click back on to the design canvas. Now that I have that set I'm going to click on the title "Onboarding 01" and make sure that I set the Home or the starting point on that first artboard. And then from here I'm going to come to the upper right-hand corner to the Desktop preview and bring up that Desktop preview. What you'll notice is I have that first artboard. When I come here and hover over that second dot, my cursor changes to tap area or indicate it's something I can click on.
When I click on it rather slowly I get that beautiful carousel animation between the two artboards. If I wanted to then come back and navigate back towards the first artboard it's pretty easy to do. I'm going to close up that Desktop preview come here to that second artboard, so hitting the spacebar, I want to move that second artboard until it's in view. For me once again I'm going to come on in and select that first dot, I'm going to press and drag that arrow back to the first artboard. Now the nice thing is that XD keeps track of what I've done in that first transition and it suggests it as the second transition to get back, so I really don't need to make changes here.
Once again I'll come in and bring up my Desktop preview, and now I have the ability to go back to that first artboard, swing into the second artboard, and they get that beautiful animation between the two.
Experience design considers all the details, right down to the micro-interactions within an interface. Creating micro-interactions in your prototypes can add fidelity to user testing and create a clearer picture of what the experience will be. Micro-interaction animations can be created in Prototype mode using Auto-Animate actions in Adobe XD. With Auto-Animate, elements can be animated between a start and end state to create micro-interactions on tap, drag or other triggers.
Up next, Prototype Step 03: Use Drag gestures to transition between artboards.
