2.4 Micro-Interactions in Adobe XD

Welcome back to the course. In this lesson, I'm gonna show you how to create micro interactions in Adobe XD. So let's begin. Now, first of all what is a micro interaction? Well, these are small animations that are designed to offer feedback on certain actions that are taken by user or usually clarify what's going on. You can also think of it like a bit of user feedback to let you know that you did the right thing. And I want to Dribbble to show you some micro interactions. These are all creations by Dribbble members, and I think this is a very good example. Notice how when you tap on this down icon, you get this little animation with the circle and the way it ripples out. That's a micro interaction. It's a very small animation that lets you know that hey, you tapped on this down arrow and you're actually doing the right thing. You're switching between these items. And actually their interaction is very well represented by the way this whole input is moving, by the way the text scrolls down into view. It's a very good piece of user feedback. Another animation that is considered to be a micro interaction is the one that you can see on these icons, right? You can use these two different states on, for example, hover or when you click on a certain element. And you can see the way they change is again another great visual indicator that you've taken the correct action. Here is another one, see how these menu items change when you move between them? Well, again, that's a micro interaction, and the animation is very tiny. We have a bit of a scale animation. We change the color, and also we change this visual indicator. Another great example is this one. See how these change? Right, the icon rises, it changes color and also the text kind of rises up and fades in. And actually, for this demo, for this lesson, I'm gonna recreate this animation as faithfully as possible in Adobe XD. So let's get started right here. I went ahead and kind of replicated the starting point. I'm not using the exact same icons as the author, but I tried to use the same colors and roughly the same spacing as the author. Now, to make this work there are three things that are happening on each animation. First, we're moving this element, right? This big bubble we're moving it to the active element. Second, we're fading in the text from below. And third, we're moving the icon up, and we're giving it this blue color. Now here's the thing, auto animate currently doesn't support color transitions. So I can't just create another artboard with this shape being a different color. It's not gonna animate smoothly. It's gonna change its color, but it's not gonna do it smoothly like we have it here. So to get around that, we're gonna be a bit creative, and we're gonna use masks, and we're gonna use them in the following way. We're gonna create two rectangles here. So one is gonna be like that. Let's remove the border, duplicate it, and let's move it down. And make sure that the icon can fit inside this rectangle while it's in its inactive position. So this will be our, Gray background and this will be our blue background. We're gonna take these and we're gonna move them down. I'm gonna take the icon and sample that color, and use it to fill the first background. And for the actual color here, we can use red. It doesn't matter what color we use. I use red just for separation. And then I'm gonna select this color, and paste it there. So now, while making sure that the icon sits on top of these two backgrounds, I'm gonna select them. I'm gonna right-click and say mask with shape. And you can actually see this right here. It's outside of the recording area. But the keyboard shortcut for Windows is Shift+Ctrl+M. I believe it's Shift+Cmd+M for Mac OS. Right, so that's Mask Group 1. Let's call this mask-messages. So now, what I'm gonna do is duplicate this. Move it right there. And I'm gonna call it mask-images. I'm gonna open it up, and I'm gonna take this icon material-image and replace it. For that actually, we need to ungroup the mask first. Right, delete that. And I'm actually gonna bring that icon up just a little bit so that it matches or it's inside my second background. So with d selected, again, Mask with Shape, we're gonna call this mask-messages. And we're gonna do the exact same thing, Cmd+D, bring it in here, Ungroup Mask. Delete that old icon, select these Mask with Shape. And we're gonna call this mask-settings. All right, so now we have basically almost everything we need. We still need to add the text here. So let's duplicate this. We're gonna move it there. We're going to call this Images and Settings. Make sure it's in the center of that icon. So now, I'm gonna take this, duplicate two times. And then on the very first artboard we'll take the text here, we'll set its opacity to zero. And I'm also gonna move them down like so. On the second artboard, I'm gonna move this circle to the middle. I'm gonna move this icon, Oops, to the top like so. And I wanna make sure it has the exact same y position, as the other one, 628. 628 like that, Messages and Settings, again, let's push them down, lower their opacity. And also, I need to set the y position of this icon to 675, Just like that. And you'll see that because this icon is the actual mask, as it moves through each background, it gets the color of that background. So let's push this back to 675. Okay, so that's our board number two. And on art board number three, we're gonna do it here for the Settings. So I'm gonna take these two, push them down, lower their opacity. 675 there. And I gotta move this up. It was, what, 628 I believe. Just like that. Cool, so now, let's link everything in the prototyping mode. So I'm gonna target this element, and that's gonna take us to this, tap Auto Animate, Ease In-Out. Let's do 0.8 seconds. We're gonna do the exact same for this one, like that. And then for the rest, it's just a matter of linking everything together, Like so. And now, once everything is done, look at that. I think we can do a better job with the easing duration, maybe 0.4 seconds here. Yep, that's much better. All right, and that looks almost as good as this animation. Here, we probably have a slightly different easing when we change this element or when the author, Aaron Iker, changes to to those menu items. But overall, ours is actually pretty close. And that's a micro interaction, one that you can very easily create in Adobe XD. And as I said, we have to get a little bit creative with how we're gonna change the color on these elements because we can't transition colors. And just to make it a bit clearer for you, let me change the duration on this interaction to five seconds. So you can see exactly what's going on there. So pay close attention to how this element changes color, right? It basically moves up. And as it passes through the two mask layers, it changes colors from this gray to the active blue, and the same goes for this one. Notice that when it goes down, it changes color from blue gradually to the gray. Cool, now this is one example of a micro interaction you can create. Another example will be a animated icon for a charging battery. So we're starting out with a simple icon. And I have this this frame here, and inside I have a level for the battery. So at 0% it should be all the way down here, and maybe even lower its opacity. But then, we can do 25%, and that element should be about 58 pixels in height. Then, at 50% should be around 120, something like that. 75% is around 175 something rather. And then at 100%, it should be at 235. All right, so how do you link this in the prototype? And here I have an example that I've already worked on. Well, if we switch prototype, we can select the first artboard, and we can link it to the second, and we'll use a time trigger. Delay 0 seconds, easing, we can do Ease In-Out to maybe, I don't know, 0.2 seconds. And we can do the same. And then, once we get to 100%, we go back to zero. So our prototype will look something like this. Pretty cool, right? Now on this last one, we can actually remove the easing. Or if you want like a linear feel to these, we can remove the easing on all of them. So now, the animation looks like this. And we can actually select this last one and set the easing to zero. So we don't have that awkward change right at the end. And this is another micro interaction that you can create with Adobe XD. All right, and that includes the chapter about auto animate. Now, let's move on to 3D transforms. This is a feature that was added to XD in late 2020. And it basically allows us to add perspective to elements by rotating them around the three axes and setting the various depths. I'll tell you more about 3D transforms in the next lesson. So I'll see you there.