7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Working With Adobe XD Auto-Animate

Welcome back to the course. In this final lesson, you’ll learn how to use the “auto-animate” function in Adobe XD. With auto-animate, you can create immersive transitions for elements between your prototype screens. So let’s jump in and see exactly how to use Adobe XD auto-animate.

Related Links

4.2 Working With Adobe XD Auto-Animate

Welcome back to the course. In this lesson you'll learn how to use the Auto-Animate function in Adobe XD. With this you can create some very immersive animations for your content between the project screens. So when you're prototyping and you're switching from one screen to the other, any element that's present in both screens will be be nicely animated. So let me jump in XD and show you a very simple example. Before we do that though, actually let me show you this. If you want to learn more about Auto-Animate because you can do so much with it. XD actually has, or Adobe actually has some great documentation on it. You can go to this to this address here. It's also gonna be linked in the lesson notes. And you also have some examples and sample files you can play around with. And you can also check out and I highly recommend this the beginner to advanced with Adobe XD Auto-Animate course by Daniel White. It's a short course, whenever you have a half an hour to spare, it's also a free course. So Daniel really goes in depth here and shows you exactly how to work with Auto-Animate. I'm just gonna quickly glance over this functionality and show you a very simple example. So let's say that I wanna make my prototype so that I go from this screen to this screen when I tap on the broccoli. And I want a nice animation for the actual broccoli image, so when I tap on it, it expands to the screen, okay? So if I do a simple transition from this to this and make sure we choose tap here, the result is very simple, it just flips the page and takes me here. However, if instead of the transition action, I choose Auto-Animate, well that changes things a little bit. And let's also do a transition from this page back to this page. And I'm also gonna use that Auto-Animate. So let's see what happens. I tap this, Well now that's different, isn't it? And it's a lot smoother, it has a much nicer visual impact. The broccoli image gets bigger and it transforms into this final image here. And basically the rest of the elements either fade out or fade in. It really depends on whether or not they are present in the source or destination screens. And to add a little bit more animation to this, here's what we'll do. The way this works is XD will look at the elements between the source screen and destination screen. If the same element is present in both of them, then XD will animation its properties. And those properties include position, size, opacity, color, and so on. If an element is not present, so for example, this search result, it's only present in the source but not here. Then it just fades out. This element here the title is only present in the destination not in the source, so it fades in. So to illustrate how Auto-Animate works a little bit better, what I'm gonna do is copy this search results. And actually let's do that in the design stage. I'm gonna copy it in this art board and actually I don't think that's copied the entire thing that it's. Okay, so let's actually do this, this, this and this. And let's group it up, so now let's copy this. Let's actually call this Search Results, copy it, and I'm gonna paste it in this art board. I'm just gonna move it up till it's like barely out of the view but still within this art board, and I'm gonna lower its opacity to like 0. So now you'll see that when we do a preview, And we click on broccoli, notice how this element changes. See, it just moved up and went from 100% opacity to 0 opacity. And now you can see it back. That's pretty cool, right? And we can do something even more interesting. We can swap these elements. So for example, I can have the Select. I'm gonna copy it from here and I'm gonna paste it in search results. And I'm just gonna move it to the left like this, 0 opacity. And I'm gonna copy this one and I'm gonna paste that here. And I'm gonna move this to the right, something like that, also 0 opacity. So now XD because we have both elements, or these elements in both screens, XD will also animate their attributes. In this case, position and opacity. So let's do real quick test. So pay attention here. See? That's very cool. And those are just some of the things we can do with Auto-Animate, I strongly encourage you to check out the examples I showed you at the beginning of this video and also Daniel White's course. And most of all, just play around with it. It's super easy to create these very fancy transitions. So you should definitely experiment with these. And that's it for this lesson on Auto-Animate and for this course, thank you very much for watching. I hope it gave you all the information you need to get started with Adobe XD. This is a very simple app, but very powerful, right? It's simple to use but it's very powerful in the sense that you can basically create anything, websites, mobile apps, icons, just whatever you wanna do in terms of UI or UX design, XD is a very very good app to use. So again nthank you for watching. I'm Adi Purdila. And until next time, take care.

Back to the top