Adobe XD Auto-Animate: Your Guide to Creating Awesome UI Animations | Ljubomir Bardžić | Skillshare

Adobe XD Auto-Animate: Your Guide to Creating Awesome UI Animations

Ljubomir Bardžić, UI/UX Designer • Adobe Certified Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (33m)
    • 1. Intro

      1:30
    • 2. Getting Started

      13:11
    • 3. Drag Trigger

      3:40
    • 4. Time Trigger

      7:10
    • 5. Sharing Animations: Recording

      1:48
    • 6. Sharing Animations: Mockups

      5:10
    • 7. Final Thoughts

      0:29
23 students are watching this class

About This Class

In this class, you are going to learn all about Adobe Xd’s Auto-Animate feature. By the end of the class, you will be able to use it to create great looking animations quickly and easily.

 

After you learn how to create animations, I will teach you how to package them up nicely within a phone mockup and make them look even better so you can post them on Dribbble, Behance, Instagram, and other social media.

 

This class is meant for anyone that wants to learn how to add animation to their web and app designs. Knowing the basics of Xd is welcome but not necessary.

Transcripts

1. Intro: Hello, everyone. My name is do women. I'm a Uru eggs designer and an adobe, sir affair expert In this quest, I'm going to teach. You have to break amazing animations in Adobe X'd using the order animated feature. Now I've been using existence. It was in his beta stage. I didn't receive a special extradition off the obese 99 new design magazine as a gift or being a very tester. Since then, exit has been updated with a lot of great features, but most distressed, immoral of them all is definitely or the enemy. What autonomy does this help you quickly and easily at amazing animations. Your designs. It does this by looking at differences between two screens and it automatically creates a smooth transition between them. But there is a very specific way it does this and you need to know what it is to make it work properly. So my goal today is exactly that teach you how are the enemy does its magic so you can use it to its full potential. We're going to do that by working on several different examples together so you can learn how it works and also see what it can do, after all, learn how to use or the animate. I'm going to share with you some additional tips about animations. You can make them look even better. And I'm also going to teach you how to record the animations you create and place them in a phone markup so you can share them online to show everyone in your skill. If you're already designing apps and websites and you want to learn how to easily had animation to ruk flow, then this class is definitely for you. There are other interesting things to cover, so let's dive right in. 2. Getting Started: Okay, We're now going to start working on some prototypes and I'm going to show you how to use, although animate. If you haven't already done it, go ahead and don't know the eggs the files provided down below. And if you don't have the open sense for already install, you can get it on the link that's included in the X defile. And if by some chance you don't have Adobe X'd installed on your computer when a level inquiry can get that as well, now that we got that out of the way, it's time to start animating. Since although animate is part of eggs, this prototyping future Sepp well sweeps toe the prototype tap. In case you're not familiar with prototyping in X'd, we're going to go over the basics right now. Here we have a map, scream and aside many we want Toby over it. Now we have a few different ways to go about it. The most basic way to do it is with the regular transition. And to do that, we will beacon object that will trigger a transition to make this easier. Open the layers panel, and in this case, we want the hamburger. Many I can't, Toby. The trigger for transition now will you need to do is just drag the Cerro toe the target screen. You're on the right. We want to tap Toby the trigger transition, Toby the action we can keep dissolve as the animation. And below that, we have two more options easing and duration. I'm gonna talk about these toe in more detail later during the class. But for now, just keep the adoration of 0.3 seconds and freezing. We're gonna use in and out. No. Ah, let's preview this. And to do that, just click the Desta Preview icon in the top. Right now. Desktop preview will play whichever screen is selected, and if no screen selected, it will play the home screen. That's indicated, but this home icon in the top life. If we click on the menu, I can. You will see that the sign many will appear now. We don't have a way to go back, so let's quickly at that. We'll go to the screen in the side menu, select the close icon, dragged the arrow so the first screen and we can keep everything else the same. Now we if we go back to a period, you can see that the transition works in both directions, and now we have a nice little of transition. This is the most basic way toe transition between two screens. He next D. Another way we can do it is written overly and for that will close the preview and go up. So these two screens seamers before will select the many. I can drag the arrow to the right, but this time as the action we want to use overly, we totally we will also get this green box that lets us decide where we want the overlay toe appear. But since the sizes of the two screens match exactly, there is no need to address this. When you go to previous, it will look Samos their first transition, and it should. The reason you would want to use Oh really is that it allows you to use the same element with multiple different screens. In this case, you could have multiple screens that shared the same side menu. Now we look again at this transition. It looks nice, but it's not ideal. This is a sign menu, so ideally, it should appear from the side instead of dissolving. So what we can do is change the animation to slide right. If we do that, the many will appear from the left and slight to the right. But so will this dark. Overly. The best thing we can do is goingto this screen and hide you, really. And now if we go back to the screen, it works. But it doesn't look as nice as before. The same menu isn't a separated from the background as before. In an ideal case, the many would appear from the left, and it are culturally with a slowly fading. But we can't create that kind of animation with transition or orally, but we can do it with order. Enemy Let will go to this third pair of screens and again select the Hemberger. Many I can't drag the arrow to the right step will stay or trigger, but this time as the action we will pick. Although animate and in our other screen, let's at the reverse transition right away again. Use all the animate and keep everything else the same. Now go back to the for a screen. If we previewed this interaction by clicking on the many icon, you will see that the menu appears from the left and that the early phase in slowly and that it also works in reverse. Now you might be asking if we could have just done the same with the other screens. I mean, they look the same, so let's try and see what happens will go back to the first green with prototype. We'll find our hamburger menu. I come and added this link, so the action is order animate. We can do that. Same for the clothes transition Any from previous, you will see that it looks the same as a normal transition. It doesn't behave as are other on other animate example. And so let's try the or related that works here. If we change this link toe, although animate and play it this case, it looks even worse. Even though these pairs of screens look the same, there is one different that makes the other animate work in one case, but not in the others. And before I tell you what it is, I want to take a step back. So far, we've only been looking at completed examples, and as you can see that is pretty easy. That's why I want to show you my work low off creating these screens that can later be easily animated toe dough that will close. The preview will go back to our design tap. Let's make a copy of one of the screens. We can grab this one. Let's zoom in on it now. This is our initial state. Our animation starts looking like this so we won't change anything about this green for now . But since we need a second state of our interaction, we will copy the screen one more time. Tocopilla screen Just hold Alton than click and drag, and now we'll start making changes to the second screen. This is where you would ask yourself how you want the transition to end in this case we're on. It went by the side menu completely appearing, and because that I'll start adding the elements it needs first, let's at the overly occurs. The whole screen will remove the border. Phil will be completely black and will reduce capacity toe 30% now. Well, well. Also draw rectangle for Simon you. Let's make it around still 70 pixels wide. We'll also removed the border. We'll need the clothes icon and we can just copy that from here. And we also need a list of links on Will Create one right away we can use Open Sons 20 Bold . Let's create one and we can use this color is okay. We'll use the repeat grid toe make copies and space them out. No, that's what this a bit lower that looks nice now and group the grid and will change the names. This one will be profile. We can also have settings. Um, maybe, yeah, that it doesn't even matter that much right now. We'll also change the color off the homelink toe blue to show that it is the active link and this time looks like the other screens. But things being as they are right now, although animate wouldn't do what we wanted to do. And the reason for that is the same menu isn't present on the first screen. You see all the animate works by looking at screens that are involved in the interaction, and it looks at all the elements. And if there are any changes between the two screens, it animates them. But if there are elements in the one screen, but they aren't present in the other one. The best thing on made can do is just a fade them in. It can't animate any other properties. Eso To get what we want, we will need to copy all the site may elements toe the first screen, but before do that, let's organize the moral by grouping them will select all of the links two. Largest school shift and click on all of them. Now press control or command G to group them. Create one more group with everything except the overly and now, uh, group that with our overly you'll see why we did that in just a second. Now grab that corporate or first screen. Now make sure that you don't change any names because that's one of the first thing autonomy it looks for when comparing elements. So when using our animate, make sure that you keep the names consistent occurs. The screen that are involved in the interaction will now adjust these elements toe how we want them to look in the initial state off our animation for the overly. We want the capacity to be zero so it and to be seen in the first screen and for the same menu. We wanted to be completely off screen now in other cases, moving the element completely off screen with the moving to the pace bar so it wouldn't register as an element on the screen. But since we grouped it with the overlay that is on screen, that won't happen. That's why we created this group. And if we now go ahead to the prototype tab, link the elements same as before this or the animate going the close I come back, and if we select the screen to preview it, click on the many icon. You'll see that the animation works perfectly. Now that we created that this ah, animation from the ground up, we have a better sense of what all the animate is actually doing. And that is its animating the capacity off the orally from 0 to 30% and its animating the position of the side menu. If we go back, the example that are the enemy didn't work on will see that it was because the elements that make up the side many were, uh, only present in the second screen and there aren't present in the first screen. So the best thing, although animate did, was just fade him in for the autonomy to work properly. As you've seen, you need to have the elements on both screens, and it can just enemy the different properties. Now you know how to use all animate properly with a basic tap trigger in the following lessons will take a look at how you can use it with other types of triggers and how you can use more than two screens to create more advanced interactions. 3. Drag Trigger: By now you know how to use order, animate with the basic trigger like tap. And now I'm going to show you something a little more advanced. This time we will combine or the animate with a drag trigger. For this purpose, we lose thes two screens. Endless first, see what we want to achieve here. In these screens we have these taps is away in navigation. They let us choose between seeing closest and most popular places. We want to let the user swipe left right to change between these two tabs. Now, when the user changes between these tabs, these cards will move left and right. At least that is what we want to achieve right now. The cards from the first screen arm present in the second screen and the Kurds from the second screen arm present in the first screen. And as we learned with their previous example, this means that although animate won't work properly, In fact, it won't work at all in this case, let me show you. I'll add the drug trigger to these cards. And if we go into the preview, you'll see that nothing happens. I can click and drag on them all day. Nothing will happen with a tap. It would have at least faded them in and out, but be dragged. It didn't work at all. So to solve this, we need to make sure all the elements are present in both screens, same as before. To do that will close the preview. Go back into the design tab. Now. We'll grab the set of cards, copy them, paste them into our first cream. And since they're usually placed 16 pixels away from the edge, we're going to move them 16 pixels surveyed from the other side off the edge. And if we place them right here, they will be assigned to the second screen. But we don't want that. So to fix that will select first of the cards and the second set of cards and press control or command G Group them. Now they're both assigned to screen number one now. Well, D leave the cards in the second screen Scorpion faced. The group will just creative and align it toe where it's supposed to be. If we now go back to the prototype tap on a link, the set of cards to the other screen do the same and feelings there second screen to the 1st 1 Now we go into the preview, you'll see that we can drag to change between these two screens. Since the other animate takes care of all the elements. You will notice that this blue indicator will move as removed the cards and to make this prototype more complete, we can also add tap triggers toe these two taps or in the first screen will link this one and have tapas. A trigger we can is in and out, or the enemy will be the action. Do the same thing here, keep everything the same. So let this grain so it place in our preview. And now if we that Bundys will see that they work. And now we have a great prototype, which you can interact with in more than one way. 4. Time Trigger: by now you know how to you step and drug triggers with total animate, and now we will learn how to use time. Trigger as well for debt will use these three on boarding screens as before. Let's study by analyzing what we want to happen. We want the screens could change like slides in a presentation, going from left to right. In fact, the motion is quite similar with our last example. So we'll take a similar approach when organizing the elements on each screen. Since we will be making some changes, let's make a copy of these screens and, uh, select all three of them called old corruption and drag. Any time you feel like you want to have a copy, just in case, don't hesitate to do this eggs. They can handle a lot of our boards with no issue, and it doesn't hurt. To have one extra copy after death will copy all three slides, so the first screen add them to a group can open the clearest panel to make it easier. Korpi, the 3rd 1 as well. Make sure it's in our group. Move it to the end. No, well, deliver this and we will copy the group who just created will align it to the middle in the second screen and in the third screen, align it to the right, and now we will switch to the prototype tab. Now, one thing to keep in mind about time triggers that it can only be applied to in our board. And if you select and element and try toe blanket a time one be available as an as an option. So select the first start board drug dealer to the second screen, and now you will have time as the trigger for the delay will use something a bit longer, like three seconds, and also we will make the duration a bit longer than we usually would. We will lose something like 0.8 seconds and we'll keep is in and out. Us are easing method Now. We'll just repeat the same on the second screen. Leave everything the same, and if we go back toe first screen and play the prototype, you'll see that this animation run smoothly. But we can also see that it answered the last light and ideally, we would want toe have it run in a loop. Let's look at a couple of ways we can do this. One thing that we can do is just go back and a link the third screen. So the 1st 1 and let's play this now. Technically, this works. But the way it reminds to the first green isn't ideal. It will be great if the illustrations kept moving in the same direction. So, uh, let's see how we can achieve that. Obviously, we can just copy the screens a lot of times and create a longer chain. But the debt wouldn't be ideal leader, as it's a lot of work, and it will still have an end. There is a different solution for the situation that I'm going to show you right now. First, let's close this. Go back to the design tab and copy these three screens again. Now, it seems, before copy these slides onto the first screen, make a group, and what will do differently this time is copy the slight one one more time and added to the end, no will deliver these based in our group on a line. The slides properly and what we will also do is copy the first queen. One more time, and here we will line the additional copy of the first slide, and I've done this by copying the first cream. So the indicator that at the bottom is in its first position No will switch to the prototype tab, same as before. Link the first screen to the second second to the third and in this case, third toe the fort and will link the last screen to the 1st 1 But if we leave, things as they are, will have some issues. But let's see what those issues are before we fix them. So let's play our prototype. The first transition happened as they should. So as you've seen with other animate selected as the action, it will still refined toe the start. And since we have the three second delay on the last green, that means that we will see this illustration two times longer than three other ones. So let's fix those issues first, will reduce the delay to something short, like putting two seconds and will change the action from all the animate toe transition. And for the animation we will use. None this way will have a seamless transition between the two screens we won't be able to see the transition, which is ideal. But it will move so the first screen and thus reset our sequence and create the perfect loop. If we play the prototype, if we play the prototype, you will now see that it will start running in a loop indefinitely. This makes her prototype complete. Never know how to use the time trigger with all the enemy. 5. Sharing Animations: Recording: we're now going to look at how we can share the animations. We created an obvious place to start with the share button up top. Here we have a few different options, like share for view share for development. And if you have been using XV, assume you're familiar with have these work. But if you hadn't been creating animations the next day before, you're probably not familiar with the last option on the list called Record video. If we click on it, it will open the preview over prototype From here, the way you record your prototype, he's a bit different, depending on if you're using a Mac or a PC on a Mac, you would click this record icon popped up and it will start recording on PC. The things there are a little different as X'd takes advantage of the screen recording features that are needed Toe windows toe open. This you need to press the Windows key plus G. Now all you need to do is click on the record button here in the Brock Guest and Capture section. Now we can go back and wait for our transition toe complete, and we can now stop it. And if we go back and click on show all captures, we will see it here in the list. In the next lesson, I'm going to teach you how to use this recording we just created with the phone markup in photo shop. 6. Sharing Animations: Mockups: to start off. We need a markup. So let's find one will go on Google and let's go for iPhone six, seven or eight. They have the same screen resolution, so it doesn't matter where trying to go for and let's go. For this first image, go to the length scroll down toe Donald this And once you do that, open it in for the shop. Now, in case you don't know how to use mark ups and first going to show you how to use it with still images before we get toe doing it with video, what you need to do to put your design into markup is double click the smart object containing the screen. If you don't know what a smart object is, I'm gonna put the The robe is official definition on the screen, but basically it's a layer that lets you edit images while preserving the original data, and it lets you update the same. That and you will find it in the layers panel. And in most cases it's clearly named in this one. It's called your screen. Edit me, so what you want to do is double click on the time male and it will open a new file. Now all you need do is grabber design and drug it in. Click OK now press control command us to say this, and if we go back into remain file, you'll see that it has been updated. Now you can go ahead and expertise says you will export any other image for the shop to do it for video. It's pretty similar, So let's reset everything toe how it was before and see what we need to do. First off, to work with the video and photo shop, we need toe open the timeline panel. And to do that, you will go to Window. It's time line and will quicken create video timeline. Now we will open our smart object and here the timeline will already be open. But it will be set Toe Freeman Imation timeline and we want to train it toe video timeline . So we will click this little icon right here. Now we'll grab our video and drag them. I'll hide these layers and resized this to fit. Click on OK and we can actually delete these other layers. We will say this so control or commanders and if we go back in to remain file, it will be updated now Here in the layers panel, we'll delete this reflection group just to make this simpler. And also simplify it even further will anger this back close eye from group. So to do that, just hold control shift G or commensurate J Fear on the Mac and do it again toe on group Everything people simplify things and the old elements will look the same in the timeline. So what we want to do now is ah, just the duration off our elements First will zoom out of it and we will selector your screen layer. We will grab the rights, other it and drag it after a certain point. It won't like Teoh drag it anymore. And this is because this video he has its specific length and you can't go past it. So what we need to do now is a match, the duration of our layers so they don't disappear halfway through a video. And if we preview this section, you will see that they're not visible. But if we dragged them and snap them in, you will see them starting to appear. Just do this for all the elements or layers and it will snap to the end. But since these are images, you can just drag them a so far as you want. And this means you can match any length off video that you may have. Now, after we have matched our final air were done. And to export this we will go to file export render video. Now just pick a name for it. Select where you want to save it and you can leave everything else as it is. Click on the render now, just give it some time, text for the video and we're done. You cannot post this video online toe shore for ticket, mate and I encourage it to post it in the Projects gallery down below, you know, know how to use for the sharp mark ups with video and this works with pretty much any marker people final line. So I encourage you to try out different things 7. Final Thoughts: if you made it to the end of this class, I hope that the human traded in that you found it useful. If you like to learn more about animation and prototyping, I'm going to live Links to some useful resource is down below to perfect your skills. Encourage it to complete the class project. And I encourage you to keep practicing. If you would like to learn more about design in general considered watching my other classes and following me Thank you for watching. I look forward to senior projects until the next time. Bye.