How to Auto-Animate Micro-Interactions in Adobe XD - Tutorial 2023

Everyone, welcome to this new video today where we're going to do some pretty cool transition prototyping animation on Adobe XD. We're going to do like the heart when you like it. We're going to do the on and off button as well. You could have, in a previous video, I think you could have, you saw it, there was one and maybe another one if we have some time, but if we don't have time, then we We're just going to stay with that. And if you want to have more of these videos or transition animations, leave a comment below to tell me what you want. Or if you want any other type of video, let me know as well, and I will see what I can do. Okay, so now we're going to start right now. So let's rename our main frame. It's just a normal frame that I did, right? You just go there and you choose one. I choose the the 1920, and I just resized it, put it a little bit smaller so that it fits kind of it here. Yeah, so I'm going to first try to do a heart on my own so that you can know how to do it. Otherwise, you can usually, you can go like on the plugin. I talked about it a lot where you just go on this one, for example. You can, the easy way to get plugins is to go on Plugins there, then Discover Plugins, and then you discover whatever you want here. It's in French for me, but You get the idea. And so yeah, this one. So you can go hard here and get whatever you want here, which is pretty convenient. But we're going to, for the sake of the tutorial and learning things, we're going to do that right here. So it will be— so let's do a rectangle, something about this size. Whoops, something about that. Ctrl+C, Cmd+C, Ctrl+V, Cmd+V. Actually, not now, not now. We're going to keep this one. We're going to go in these corner settings here, put it to the specific corners. Let's do 100, and again on the other one, 100. It should look like something like this. Then we're going to turn it around this way. Shift to get this kind of like, you know, every 15 it turns around, so it's very easy to know until 90, or you just write here in this area 90. Then you Ctrl+C, Ctrl+V to copy-paste it. Then you turn it back to the same position. You can do whatever you wish, and then you kind of have a heart here, right? Maybe I would like to have it a little bit like closer like that. I feel like let's try that. So now to get it really centered and everything, we click on this one here, Align, and then this one here, which looks terrible. So let's not do that. Um, I think this would look actually good. Let's try here. Does it work? It doesn't work at all. What am I doing? Let's go here. Okay, perfect. So everything is aligned. You can see 11.5 at the top and 11.5 at the bottom as well, so on both sides, so it's good. I don't know if we can do something with this one here. Nope, we cannot. Okay, so let's just resize it this way. You pick the one at the end, you drag it until it disappears there, and you take this one as well and you do the same thing here. And then we just— maybe we— Why it doesn't snap? Okay, so you take the 2 of them, you click on the first one here to group them together, and then here you go, you have a heart that looks terrible at the end. So let's Ctrl+Z. Let's take it close, zoom in, Ctrl, and you zoom with the little— the mouse to zoom usually, or to scroll. Let's take that here. And let's get it. Perfecto. Okay, now what you have to do is just Shift and you put it back here and you have a heart here. How's that? Pretty cool, right? Something else I could do is just like kind of make a little bit softer on the corner here. So we pick this one on the, on the right, which was the, the right bottom, bottom right corner. Let's put 20 and let's do the same thing here. On the opposite. Okay, maybe 10. Let's do 10. 10. Okay, perfect. That works. That works perfectly. And so you have it, you have the heart here. So what we want to do, let's put it in the middle. So the only problem here is that you have this all the space here that is not useful at all, but you have the heart. Otherwise, you just do the simple thing, the easiest thing ever. You go on this plugin, you go heart again as I did before, you pick one, you got it here, you make it big, and you have it much bigger, much better. But it's again for the sake of the explanation. It's always good to, you know, be proud of your own design, own creation and design. So I'm proud of my heart here. And you were able also to know how to do it. So that's good. That's already something here. So I renamed the group here Heart. Then I'm going to copy-paste all of these things here. Ctrl+C, Ctrl+V. What I forgot to do is to remove the border here and just change the background or something like, like that, you know, maybe a little bit. Okay, perfect. Let's just check it out what it looks like. It's a bit too dark. Okay, like that. Perfect. So now we have a heart here. So I'm going to just delete this one and just copy paste it again. No big deal. Now we're going to edit the name here so that the software knows that we switched to another one, and also for us to know that we— sorry for the sound— and also for the software to know that we switched file. And it's also easy for us to know, right? Like 1-2 is very easy, but 1-1 is not that obvious. So now we change the background color to something pretty good like that. I think we got it. Looks pretty cool. So now what happens is that this is the basic kind of one where you have like prototypes and you click on this one, you get it. Then we can do, um, auto— ah, automated— automatic transition animation. Sorry. Then maybe Acceleration, let's do 0.2. Okay, what if we have like, for example, magnetism? Does it do something? No, it's the same thing. Oh, I know why. It's because, it's because we need the heart again. So we take this one, we take the, the red heart. Ctrl+C, we go back on the first layer, Ctrl+V, we decrease this one, and then what happens? Okay, so we took it. Just to show you, we decrease it. I'm gonna look at that. Hide it with the opacity to 0. We— and we try. Okay. What if now we switch that up to— oh, it doesn't work. Let's try magnetism. Okay, pretty weird. Oh, I know why. You know why? I think you know why. It's because the— it's the same name on both of them. So this should be heart 2 and heart 1. And we do the same thing here with heart 2 And the heart one, we take it, copy-paste it there so that the software knows that it's still there and it didn't switch to anything. And now we try it. Here we go, here we go. How does it look like? Cool, right? Let's try to do the same thing here. Magnetism again. So let's try to look at how it looks like. Let's try to do something else for the But because it doesn't look that good. Let's try to do that. Okay. I try to do 0.1 just because we don't like to— no, 0.2. Let's go back to 0.2. Okay. Pretty good, pretty good. And if we acceleration, deceleration— okay, let's do that. So now we have something pretty cool, right? It's, it's pretty cool. It's— I like it. So now let's try to do something a bit different with the hardware. When you push it, you have the kind of like a small You know, a little explosion of colors. So let's do line. Let's make a line here. Let's do a size 3, maybe, maybe 5. Then we are going to push this one to get it rounded borders. Maybe a little bit too big. Let's go for 30. Okay. Then we take the same color here. Okay, perfect. Copy paste it on the side here. Can we get the same? No, not at all. Okay, no problem at all. It's all right. Then we, uh, we can group maybe. I don't know. Ctrl+C, Ctrl+V with Shift. We wait to have the little, you know, icon here, and then we turn around like that. Again, Ctrl+C, Ctrl+V, turn around, Ctrl+C, Ctrl+V, turn around again with Shift still, and bam, voilà. Ctrl+G to group it. We're going to just put it a little bit higher to have like a kind of centered thing like that. Okay, and, um, copy paste it like this. Then we're going to make it smaller. Okay, like that. Then we're going to reduce the, reduce the opacity to 0. Then we're going to go back to prototyping. Oh wait, first we're going to We need to copy-paste this one as well to the end. Okay, perfect. Let's rename that to 3 and this one to 4. So you kind of see where I'm going now, except that here we're not going to put that here, but take this one, copy-paste it here, and then make it a little bit bigger. Okay, perfect. Kind of like that. Okay, good. So now what we're going to do, this is where usually normally the magic should happen, and if it doesn't happen, I'm sorry. Okay, so now we're going to go here like the normal one, and from this point on, we're going to remove that here. We're going to remove it. Oops, remove it. Then 2 here, we're not going to select anything because this will allow us to have a new a new setting in the prototyping where it's delay. So you can delay your thing and wait for a time, kind of like— it's not delay, it's a timer. So you can have a timer so that automatically it switches to the next screen. So this is what we're going to do. So now we're going to do, um, acceleration, I feel like. Then we do the same thing here, we remove this one. Then here We do deceleration to slow it down. And here— wait, first we need to opacity drop it to 0. And then from here— okay, so this is good and it should arrive here. And this one, you just need to acceleration, deceleration, and it goes back to the normal one. Okay, so let's try it out and see How it goes. Okay, so this is a little bit too slow. So what we're going to do is let's try that actually. Here, let's put 0.1, here 0.2, and here. Nothing. Okay, let's try that. It's a lot of trying to repeat, you know. Okay, perfect, you have it. Sure, I'd like to try something. I don't know if it works. Uh, how could I do that? How could I do that? Um, let me try something. Let's switch the color to white. Okay, let's try to make it blurry. Okay, a bit more blurry. Okay, looks cool, looks cool. You have kind of like an effect that it's inside of the— let's do white blur. And maybe we can do that here when we increase it slightly. Let's enable that to Just to see where we go. Hello? No, it's not that. Okay, I selected the wrong one. Let's remove this one for now. Dark blur for now. We're going to make it smaller. Always keep Shift so that it doesn't, you know, make a very weird thing like that, even if it looks pretty cool actually. Now it looks terrible. Okay, let's do Shift, we go up there, then we try to make something a bit dark, and we take the blur again. No idea if it will look good at all. It doesn't look very good. Okay, now it doesn't look that good actually. You can do that like that. Let's go to 10. Okay, okay, why not, you know, why not. Let's try to add some shadows. Sorry, I'm— if you, if you want to skip it, you can, right? You can skip it. Just drop it down a little like that. Oops, we go down. Down, down, down. We put the layer very dark. Then we add the blur again, the same one. Make it 20. Yeah, 20 looks good. We lower it to maybe 20 again, like that. Then we Ctrl+C, Ctrl+V. We put it bottom. Shadow again here. I didn't do it, I should do it. Shadow again, but here for the shadow, we're going to replace it with that and increase it, increase it, and increase it as well. Increase it to 35 and this one to 50. Ctrl+C, Ctrl+V to all the other ones. Same. Okay, let's try to check it out and see how it looks like. Not a big fan of all of the shadows here, I'm going to remove them. Sorry, I went a little bit crazy here. Actually, maybe though, if we remove it a little To 60, 70, 60. Let's go 60. Okay. Oh, it goes a little crazy to the eye for me at least. Let's remove the shadows, but you get the idea, right? So you know kind of what it can look like. Actually, wait, let's do that. Let's go here. Let's not add any shadow here, but add a shadow here. Okay, perfect. That looks fantastic. Love it. I love it. Perfect. I was a bit scared because I didn't really— when I tried it, it was not very looking good. And then I thought about it again and looks pretty cool now. So let's try to do another one, uh, if you would like. I'm just going to remove that here. Let's keep that like this. So now what we're going to do is— what did I say? Yeah, a button, kind of like a switch button. So let's do the rectangle. We make something like that. Yeah, like that. Looks good. Doesn't look like anything for now. Now what we're going to do is take the whole thing to make a rounded corner. Something less— can we do bigger? More rounded? Okay, good. Perfect. So let's try to do— let's do that. So what we're going to do now is take something like a nice green turquoise. Okay, does it look good? Yeah. It looks very good. Let's do that. Now I'm going to do the— ah, actually, let's copy-paste it. Okay, so now we have the negative. Now we're going to put like kind of when it's off. So we just simply go there, you know, no, no big deal. Now what we're going to do is copy-paste it. Same thing, shadow. We put it down, we resize it to make it smaller as well, center it. I think it's centered. Perfect. Now we're going to add a blur, same blur, up to the edge. Perfect, like that. Maybe a little bit higher. Yeah, how long is— let's go for 20. Okay, 20, good. So you see it kind of adds something, right? And what we're going to do is take this one, make a circle here. It needs to be well centered in all of each shape, so it's— that's not good. Let's do 13 here. 13, 13, 13, perfect. So now what we're going to do is take that here. Um, then I think this looks good actually. How about that? We can do the border, just take the border, switch the side to something bigger, 35, 30. Okay, it's good so far. Looks good so far. Okay, so now we have that. Let's call it switch. We take this one. Let's take the shadow as well. Okay, perfect. Oh wait, the shadow actually should, should be behind it. Okay, good. So now we take the shadow. Put it back, copy paste, take the same color here. And this one we're going to put it— well, actually, maybe we can do that another way. So let's take that like this. Perfect. We're going to make it bigger to 30 because here is 30 of, of, of height. So here 30 as well. That, let's do like that. Maybe more we can? No, we cannot really. So now what happens if I delete this one here? I'm trying as well. I'm not sure at all if it works, but hey, we are here to try things, okay? We try things. Let's go 60, and let's try to do when you push it. It goes, um, magnetism 0.2, and same here, magnetism 0.2, automatic animation. Okay, it looks terrible, it looks terrible. It's the same name but it's not the same thing. Okay, so let's try something else. We put it like that. Uh-huh. How can we do that? I don't know at all. I don't know how to switch that to this one. I know how to do like the other one, but this one I'm not sure at all how to do it. So let's try that. Oh, I know, I, I think I kind of know. Like that. No. Okay, okay, we cannot like do like something like this and not this one, this one. 7, 700, 705, and here 705 as well. Whoop, not at all. Why didn't It should work here. Okay, actually it's funny, it looks like— let's do— nope. Huh, okay. No, 705. And what happens there? Why it doesn't— oh, I know. Oh yeah, okay, okay, okay, my bad. That's my bad. I think I kind of turned around it, but it's because it's not— oh no, it should work actually. Why? Oh, so sad. Okay, well, I guess I'm just going to do the classic one. Very easy to do where you just take this one here, you take that, go to bottom here, you go up there to 13. Okay, and then you just take that here. Whoops. Magnetism, which is pretty cool animation. Magnetism as well, and that will work fine. Yeah, yep. But it's not— it's too fast though. It is way too fast. How about that? Okay, pretty cool. I'm sorry, it doesn't— it didn't work the way I wanted to. Why though? Why? And if I do something like that? 60. Okay, perfect. Let's do a little bit smaller to 30. Okay, switch to Copy-paste the switch, put it in there, do it here to 60, invisible. No idea how it will work. Yeah, that works, that works, boys! Okay, this one is super cool actually. So what you need to do is you cannot, you cannot like, you need to blend this shape into this one. You cannot just take this one and say, okay, I'm just going to remove it and switch it to a way other form. Like, the software is going to be like, what's going on? Why, why, why, where is the— I lost the shape that you had before. But if you keep the same, the same one and you switch them like that, it looks perfectly fine. And that looks pretty cool actually. Off, on, off, on. Perfect. I don't know how long we are in terms of recording right now. But yeah, I think we are pretty good. I hope it's not a video too fast, that went too fast, but it looks pretty cool actually. This one is pretty cool and this one is pretty cool as well. So here you go, you have some easy-to-do animation. Even if I try to do something cool and you can just copy-paste it, there is no problem at all with that. And yeah, that's all for this video. I really hope you find some value in it, liked it. Do some— you are now able to do some micro-interactions, so it's really cool, really cool, really cool. And yeah, hope you liked it. If you want anything else, as I said in the early of the video, please let me know in the comment section. Share it with people that you think might find it valuable. And if you liked it, of course, leave a like and subscribe. Thank you very much. See you for the next one. Bye.