Adobe XD: Animations

1. Intro: Adobe XD Animations: Hey, guys today will be going over some of wjxt tips and tricks for their auto animation feature , so this will be useful if you want to use it for, like, a user test and you want to get a prototype at a higher fidelity and start testing. Micro interactions were just making stuff look more realistic. This also be valuable for presentations. If you want to create something like a sizzle reel or something that's going to get a client really excited. Eso either one of those will be good for this. It's best if you have some working knowledge of the Dhobi X'd here, too, but I will and cleared the start and finish files to you. If you don't have that much experience, don't worry. You can always just slow down and tag along. Um, yeah, I think that's it. So let's get started 2. Sign in: Basic Animations: Okay, So to start, we can open the snail mail animation file, but I've included for everybody could maximize the screen. So I made this just so we don't have to waste time designing a bunch of elements. And this can really be about tips and tricks of auto enemy. The first thing we can do is drag these other art boards below because what will be starting with is the law and screen right here. So just is a quick background on what auto animate does and why it's so useful is it basically just changes the elements in between our boards. So if we make a copy of our art board log in one, we have this snail right here. And if you look back on this airport, it's named the exact same thing. But if we move it like that and then we got a prototype, the multi act this one on ever tap transition we wanted toe to animate instead and using out spine durations. Fine. Still, for going the previous you click, you'll notice we get that auto enemy. And so one of the biggest benefits of this program is that you can actually do this super fast and you could do it with all the same elements on our board. You don't have to design anything you we're going delete this month. So I kind of walked through some basic animations and set up some in this file that could be used either for a user test or they could be used in a presentation. Kallakis is a rial to get people excited about your work, but we'll start duplicating this airport one more time. And so let's say we want these elements to slide up a little, right When someone gets on the first screen so we can drop this down. We can drop the A pastie will change it to zero. So everything you can edit about these elements are things that could be auto animated. So you can do a past a You could do border. You do a fill color, you could do size. You get any kind of freedom like that. Um, we're just helpful to remember if there's something I haven't covered here, you can probably auto animate it. Um, actually gonna want this snail to start off over here. I also copy and paste this over because I don't want to snail to move yet. So what happened to be right there on our board? So if you click prototype, all the enemy 0.2 is usually about where I like to stay with most animations. That's kind of like a U S standard. You want him to be pretty fast. Um, the thing with them, if it ever feels too slow, chances are it's way too slow, and it needs to be faster. I like to stick around point to for things. I'm trying to be more dramatic of my go like a second. But usually any kind of interaction the user is gonna have You're gonna want it to be point to maybe 0.0.3 max less because we don't want anyone having slow elements on. There you are. Eso winning down just 2.2. So that animated like we wanted to if we close this. Okay, so now we have an animation going from Logan to log in one. But let's say we want our snail to move to. We can go in and drag are sitting on back to that spot, and we're gonna want to animate between there as well. So if you'll notice to you, I'm clicking the entire art board when I do this of you tap anywhere on the art portal transition to the next screen. And part of that is is these interactions aren't anything the user would have to interact with, so they're more for presentation purposes. So it's kind of easier just to click anywhere on the screen. Have animation continue, but if it's something like for a button that will get into later, I'll click the button directly instead of Lahore board. We want this to eat out and because it's nail now and he's pretty slow we want it kind of is a branding aspect actually gonna do four seconds right there for duration. So if we play this when we click, get really slow snail mail clears this, you look at it from the beginning the your little seinen and we'll click again. Okay, now that we have that, we can go and add text elements in here 3. Sign in: Text Animation: so editing texts works the same way that ending like a shape and auto enemy it will just twin between the to our borders to create effect. We won't. So what I did there was copy and paste that element and we're gonna put an email in here. Let's turn this background elemental Marseille Key Main and will be the same thing with a password to create a copy of it. But it's password we don't want anyone to see. So, youth, much of stars. L'm in office. Well, mostly gonna make the text black to you, so it shows up a little better look, So we could just leave it like this and let it auto animate in between. He's out. Won't want that to be 2.2. We'll see how that looks. Okay, it pops up. It's not anything crazy. And it's also something you could just dio with the regular screen transitions. You wouldn't even have to use auto animate. You could use over, let our transition instead, and then just do dissolve. That's gonna give you the exact same effect. But we want this to be we'll just have some flair. So we're going to design. We're gonna create a rectangle here. We can go on jury, fill off, always like to turn fell off. When I create something that I mean use mask, it will select these elements. We'll go to object and make a mask with shape and then double quick. We can edit the mask and we're gonna slows it until it covers up. The best little piece covers up all the text and up here, you'll notice that just named it mass Group One We'll do is we'll actually go in and name email animation. It's important that you've named things pretty well in this, because a Dairy X'd identifies thes elements by name eso If you go in and you have stuff that's named Group 123 Group 1000 it's really easy to lose track about what's animating, and if you do it enough, you can have things that animated the same time of two things. You're named Group one, so it's just good practice toe. Always name things as you go so we'll do the same thing will create a rectangle for the password, turn us off again and all select both. Go to object masters shape Una didn't cover it up all the way. That's fine. We'll double click in. What is it? And the same thing mass group Will dio password innovation also turn these two X elements back on in that way. So what we're gonna want first is fear these placeholder names to disappear. We'll set the capacity to zero and then from this art form and will copy and paste. And once we do that, we can go in and open this animation for password. We'll zoom in really quiz, maybe even closer. What would use will drag this box back out? You go do the same thing to the email animation. It's like that box, drag it all the way out. So what that's going to do is gonna give us a pretty subtle like type effect because that mass is gonna open up and just make it a little. They go cleaner, a little more fun, more stuff going on, you know, other intimate. He's out. 0.2 is fine. And instead of doing tap, what we're gonna hear here is time we'll keep the delay to zero. So basically what that means is, once you click, have this animation complete. It's immediately gonna feed into this animation so we can take a look at what that looks like. So the text disappeared. And then we got that nice type effect that we wanted. That looks good for now. Let's see it all from the top. Just to make sure again to be tapped. That comes up tap again. Nurse Neil goes across, so and then we get our text, Sammy. So the next thing we're gonna want to deal is signing. 4. Sign in: Pressed Button State: so we don't want to just click a button. We want the button to have, like, a press sake. So the first thing we can do to do that is copy and paste that sign in button. I always like to add a border we're gonna use this is a mask at a border and then turn the sell off just so we can kind of see what the mask is for. Sure. Then we'll take a circle in place that in the middle of a button will cure in the border cough. We're gonna slide the sign in button above your lips and then we'll create a mask. So we have mass group one, and we'll go ahead and name that we'll name it, sign in. But animation, we're gonna double click in and turn off the A passage e of that circle zero. Now that we have that set up on our log in, we will copy and paste this entire art board. And then once we go in, we can open on up, grab our lips. What we're gonna do is turn the capacity to, let's say, 70% and then we're going to scale that up I'm using option shift to scale it up uniformly until it takes up all the buttons space. Have you okay? Now looks good. And then we're gonna quick on this art board and we could grab a sign in button here, and we're gonna prototype on the But this time, instead of your board, do you tap, Although intimate, he's out, this time will be snapped. I usually like to use snap for button responses cause it's a little more. It's a little faster, a little more active. It is gonna happen pretty quick. So it's nice to give a little little flare, and it happens. Make a little more obvious that something did respond like that. And then we'll go to the top of the log in page and we'll connect it. Teoh our inbox page, grab that whole thing. And again here, we're gonna do time. Does it want this to happen really quickly? Actually, not going to animate this, we're gonna transition. The reason we're doing that is because there's no point to animate honor, animate anything here if it's such a massive screen transition. So just out point to it's fun. We'll see how it looks and we'll look at it one more time. What use the keyboard here is to get back, and we're getting a pretty nice but in response there. So the key to this is it's all about the subtlety of these animations. That's what draws people's attention. So it's always good to have an eye for detail, like France, since this animation is a circle that scaling up instead of just a. But we put on top of this that changed colors and then actually just changes the quality of the animation. It's not just it's not just a transition, it's something that has a little more depth and movement that makes it more interesting, but for the next step will start working on the inbox. 5. Inbox: Repeat Grid & Scrolling: Okay, So once we get to our inbox screen, you'll notice we have these dummy emails here that don't actually have names, subject or time in them. So what we can dio is click on this element and then go to repeat grid. And once we drag that down, you're obviously get a bunch more dummy emails. But the problem is, they just say, name, subject in time, which looks terrible. So when the cool plug in that I really love and would suggest everybody tryout is repeater right here. So if you have a repeat grid that allows you to put in, like dummy text and other elements that you can reuse throughout the grid So if we click on that and then click repeater So we get all these options and you'll notice in this drop down menu, you get the elements they were in Europea cred. So we have name, subject time and path the line and rectangle. That's just the selection circle to the left, so we'll start with name. So if we get a category drop down and go to name and we want first and last name, we will apply. Then close that out just to see what happened. So we got names populating all all open down her name value. Call them. And if we double quick in just a quick note if you'll notice the text box here is actually much larger than the name which is good practice when you're setting up a repeat grid that you have dummy text him. Because if I were to do this to point, it would really throw it off if the name was too long and it would start to bump in to these other text box boxes. Excuse me, See there some new search back. So it's always helpful to do area tax selecting same thing with subject. So we used area text to go as far as we want, and time and time actually write a long time and then give it some space in case the times a little longer than we planned for that just equipment so we can click back in, go back into repeater. In this time, we want a subject, the category. So there's a lot of things you can choose from here. Um, actually, one of the better categories. I think for emails, Internet and you can just click phrase down here. That'll be like random. Um, development praises, but I think it's pretty helpful for an email phrase that we can apply to that. And we see we got that pop up down there. But we can also go to time while we're here. Go back to the list dating time and you can select the date time period, so we'll stick time. Um, recent time periods. Fine. We'll buy clothes. Answer. Now. We have names subject in time all pretty quickly, and it extended to these elements down here. But since we have all these elements down here, we're gonna want to scroll a swell so you can click into that her board and dragged down, and we'll go right about there. And one thing you'll notice. So if we go and would play here on me scroll, we have this element that's moving with it, and we don't want that the floating action. But it should always be fixed. So we'll close, though, and we'll click and want to get back over to this layer being you. Then, if you quick the elements and get a prototype, we can fix position when scrolling and then quickened You quick play and just a quick note to you would normally have to do that with these other elements as well. But just in this file, these were set up to be fixed position when scrolling already. So I kind of really quickly with repeat grid and repeater the plug in. We actually get a pretty high fidelity email feed pretty quickly with a scroll, which, as you can imagine going in and typing dummy text, and all these would be actually a pretty big hassle. So it's nice to be able to do that quickly and have something that looks pretty realistic. 6. Sent: Repeat Grid & Button States: So now what we can do is move these other our ports, and the next thing will make it's ideas out of the way is actually the sent email inbox, so we can copy and paste this. Make it the exact same thing again. But this time we're gonna want this icon to highlight instead of our in box icon so we can option shift and make this a little bigger. And I want the color changes well, so we gotta fill make of that blue color. We want this icon since were not selected here to go back to that gray. I also wanted to be a little small here, too, right there until it lines up with those other elements. So what we can do is quick on this element. Get a prototype jag this over transition. Auto Enemy. He's out. Spine 0.2 is fine. Let's check to see how that looks. Okay. It's looking good. That kind animates the way you want, but there's a couple of problems. One we can't click back. Two. It's all the same emails and information, which doesn't look very realistic, and it still says in bucks Woops, let's go change this. I want that to say sent. And so if we click in and select our repeat grid, we can actually go into our plug and menu open repeater again, and we can change these things up so we'll select the name. We'll go ends like name again. It's like, first and lost both his phone a lot. And so that's gonna change all those elements, and we'll do the same for subject as well. So I got an Internet, a phrase apply that's gonna change those. And then the last thing is also update the times that works with me. Update the times. Okay, good. And if you see you compare between these two are ports. They did change, never things looking good. And we'll actually want to be able to return back to our inbox so we can put predator tight drag that over auto animate. He's That's fine. So now when we go over, well, we get the name changed a cent and we also have all kinds of different sent emails just to make it look a little more realistic, like you're actually talking toggling between inbox and sending months. So the next thing we can do you is prototype. What a new email or like a new email composition would look like. And to do that, we're gonna need to click this plus button to get the new email window to come up. 7. Compose New Email: Overlay & Button States: I've included that you email window over here, but we will have to have our button response before we get to it. So copy and paste. Actually, before we copy paste, we're gonna go ahead and add that mask to create that button response. So a copy and paste this turn the border on the fill off through shadow Office. Well, so now that we have that outline, create a circle in the middle circle to be no border in a white Phil, and we want this to be on top, we'll select Ben for these elements. We'll create a mask double quick in here, and we'll make sure this is your a percent capacity because we don't want it showing up when the button is not equipped and again it's named a mastery of one. Opel dues will call this floating action button animation, and now we can copy and paste that over. Um, that mistake that high almost made there is, um, you got to remember that to auto animate something, the animation has to exist on the first art board as well as the second, so it's always good to go in and set it up on the first and then copy and paste. That way, the names are always gonna be the same. Because if you start copying and paste and creating new animations later down the road, the name and can become quite an issue um, gonna make sure everything spelled exactly to the letter. Correct. We'll open that up, we'll go to the Ellipse and museum in, and we wanted to turn onto a 70% again to get that quick response and then, well, scale it up. And I'm just holding option shift to scale uniformly there from the center needs to go more worship, and so we'll prototype. So when you click this, you want this response to show up and will you snap because it's a button button State T was fun. Auto enemy And we don't want it just to auto enemy. We want our new message when they're to come up as well. So what we can do here this dragon over good a time. What I did there was just select the topless art poured. We don't want this auto animate. We're actually gonna use it over late here. So one of the reasons one of the downfalls of auto animate is everything has to be on this original art board. But for a symbol overlay, it's usually better to go ahead and use one of their presets for sliding in. Slide up, down. Left to right are usually pretty quick and easy to use, and it keeps everything separate on the or board because it doesn't become a hassle when you have big elements like this moving on the original airport. So if you can, I always try to use every leg just to keep things a little cleaner. And we wanted to. He's out. 0.2 is fine. Let's see what that looks like. We'll click here. We get our response and the window to come up. Try it one more time. It's looking good. So after we get our new message one day to come up, sq this over because I like them to be 70 apart. Exactly awesome. So the next thing we can do is get our menu to come up 8. Settings: Slider: so have included that menu for us right here. So if we go over the inbox and what Will Dio is? Actually we're gonna copy and paste this whole art port because we won't be using this menu as an overlay. And I'll explain why in a second. So we copy and pasted the entire inbox layer or art board there. Excuse me? Then what we're gonna dio is take inbox settings. Actually, just copy and paste that on top. I think we have some a couple elements hidden back there. Yep. Times hidden back there. So we can just delete that. So a copy and paste this menu on top over here, we'll drag it about the right position because we want to come up when we have this icon. So that's good. Just get that connected. So we got a pretty tight go back to our inbox. Not there. So we want there instead. Top transition dissolved without point to everything. Looks lying there. One thing to know whenever you do drag in prototype. It remembers the last thing you did. Um, so the last thing we did was a transition, so it's going to remember that, but if we did auto animate and change the time you remember whatever last selected souping Ellen, you clicked the gear and then we get this menu to come up that's working like we want it to you. But we don't just want them in you to come up. We want to interact with the display density here. So what we can do is copy and paste this airport again, and then we're gonna create a slider for the display density. So we'll go back to our design town, get a rectangle up, drag it over drop shadow. If you notice there's, like, a little drop shadow overlap because this elements on top, um, we're actually gonna fix that with a mask because it's not actually on top of that menu. So you Phil turned fell off and then dragged us up to uses a mask. And what that's going to do is just get that drop shadow element off this menu because it is a little distracting to have it there. Because this really is just like I slide out from the display density. Then we can create a rectangle here. This is gonna be the background of our slider it was. Take this radius bringing in and then we'll change it to this. Gray said, That's our slider background. You can also create a circle here, and this is gonna be our slider element. This size should be fine. If we can find the center somewhere, then we actually want this to be blue. So I'm gonna copy and paste this display text year instead of typing anything new. So it'll be in the same thought. Everything. We're gonna take one less. I'm actually gonna get a point here. I think point to me is a little easier to drag around. Absolutely. You're easier to drag elements around and reshape things about 14. Find a copy and paste that one more time and then more. So what we're doing is we're creating a slider here that's gonna change the display density of our emails less and more not too complicated there. So how we're gonna do that is, once we get our cider created, we can go ahead and connect this. So if we go display density, this will come up and not isn't overly Oh, come apposite transition. We can just use dissolve point to you is fine. so we can check just to make sure that breaks. That looks fun. And once we do that, we're gonna copy and paste this art board one more time. What we want is to see what this our board would look like if there is less density in our human. So what radios? We're gonna select the slider button, Got a prototype dragon over. We're gonna go to Auto Enemy, actually, what we're gonna do zero, they said a tap we're gonna do drag. Actually, when you quick dragged, you don't even get the option. Teoh do a time because it's whatever the dragon response of the mouse's. So if we go in and look at this in the news, we can drag this element to the left or back to the right. So these are the original bounds we set for auto intimate, and that's just letting us drag it instead of doing like a tap animation Small close that. But if you notice when we're dragging this, nothing was happening. So what we can dio is go in and change the display density of our email by editing are repeat cred. So this is one of the cool aspects of having repeat grids intact is you can do some pretty crazy stuff like this really easily, and because we want less density in our email for this example, we can bring it out to about there and then double click ended the repeat grid, and we're gonna move this line down a little just to space it out a little more realistically. And then we can drop this down. Little a swell. Just drop the repeat Good down, just a hair said. It's based out more based on this top time. And since this is the same repeat grid as this art board, it will auto enemy when we drag this slider. So this is one of the benefits about auto and me in general and using it with a drag feature. You could do something like this pretty quickly without having to change anything or do anything fancy in another program. You can do it all with elements in her art board, and we'll actually to get rid of this manuals like the whole art board here, go to Predator and drag this back over to the first start board. We'll do tap transition. There's all point to. So now, if we go in could display density, use their slider. We could go back out to that main inbox menu. 9. Receiving New Email: Notification animation: So the next thing we'll do is simulate receiving a new email this weekend. Copy and paste this original inbox. And so we'll want that new email to appear at the top of this repeat grid so we can actually just drag this down to forget about the same space, begin for an email, grab a rectangle and then dragged there. What we can do is just go ahead and extend the shape all the way over to the side, and it's a new email, so we'll make it a different color like blue and want text elements for for it so we can just go and double, Click said. We can copy and paste here un. Select the repeat grid pace outside of it. Drag it up that way. We have text that's the same as theorised these emails. We'll do the same thing for the selector circle here. Copy and paste de Select a repeat grid based dragon up waken. Make up on your name for this first email just so we stay along the lines of keeping it looking pretty riel and will adjust the time to. So now that we have our new email appear there actually gonna drop this down amenity you command shift left bracket to drop it all the way down just to make sure we're behind all those elements. And we're actually missing a line here. And that's because the line was only in the bottom and they repeat grid. So I'm going to copy and paste that line for the top and reposition it underneath. There just we get the rest. That email bracket. Here we go. Okay, so we got a new email set up and what we're gonna do is actually group all of these elements in that way, we can adjust them like this. Control the rename, this new email. So what we can dio is copy and paste this group, go back to our original inbox pasted in, and we're gonna shrink it quick. Note if you'll notice when are shrinking it here. This text isn't shrinking. Either. You can actually adjust that, like going back in and changing these two point instead of area text and the reason that will be okay for this instances. We're not putting any repeater elements in these fields, so it's fine if we use point text on them and basically All that means is they're going to scale when we scale the entire group instead of just keeping the same area like it would be for area text. Copy and paste that up here and we'll minimize. Well, actually, just go in double picked these minimizing the little It's what They don't have to be perfect because we're gonna turn this opacity off anyway. But they do need to be pretty small. So there's no weird for lap. When we do make the animation, so will change the whole A pastie their 20 I will make sure to do the same thing to the whole group right there on the text was selected. It looks like the entire group. Jeez, that a fascinating zero. So we want this to auto animate as well, so we'll quick on the whole art board and drag also select instead of doing like tap or time. We're gonna actually use keys this time, so select that what that allows you to do is use any key on your keyboard to trigger the animation. So if we click here, we can press the down arrow in a sign it we want the transition to auto enemy and he's out point to you is fine. So one of the reasons using the keypad is helpful here is it allows you to control when you can trigger animations and doesn't look quite as clunky is like clicking somewhere off the page to trigger the animation. And it's also helpful. If you ever want to do a screen capture video, you can just use keyboard keys to trigger some of these animations. So your mouse's and in the frame, Let's see. So we're on the main inbox will press the down key. Get that new email to pop up right there. 10. Receiving New Email: Micro-interaction: so we don't just want a new email to pop up, though we can add a little bit of flair to it. Let's get this bell to do something to because we're getting the United Vacations that we're gonna want some. Some response here. A swell, so we'll create another circle a little smaller. We'll get rid just like we got a new identification symbol there. We'll copy and paste that ever. And remember, this is the start element. So this is the main page that we're gonna want that to scale up. So we want to make it small and turn the capacity off. Unless it's a Lips five. Let's go ahead and change that bell alarm, I guess. Alarms. Better name for it alarm, and I have to go back and remember to change it on the screen as well. So let's check to see how that looks, so we get that to pop up a swell. It's a nice touch to add, but let's say we want to do a little more and add a little subtlety and really get into, like viewing a micro interaction so we can actually delete this from here. And so let's say we want the bell to ring before that before the red notification pops up, so we can actually do is go in and rotate. Element will do. Rotate it to the left about 45 degrees and then we'll go over here. We're gonna duplicate this airport one more time, and we'll delete this from here, and then we'll go to the right 45 degrees. And then that's when it will end up being in the center. And because I've changed these art boards and deleted this element, actually gonna add it back to this one, scale it down, change the capacity to zero. The reason I did it that way is because this is the art board that this elements starting to show up on. Originally, it was this one, but because we added some to it, we can sleep that moment. So let's make sure everything is connected pretty tight on a cool shortcut. Here is the compressed command A to see all the points that prototypes connected. It's helpful to check to see if you forgot something or didn't don't have something connected, can save you a little time rather than trying to go around and click elements to see what you remembered. It didn't remembered animate. So keep out of the down arrow will trigger this. And so we want this art board automatically go to the next to Bell position so we will sign time. Zero seconds 0.2. Well, actually, make this 0.4. And the reason that is's because this is actually moving 90 degrees. So from this art board, this one, it was 45. But because you're swinging along that bottom art, this is actually moving 90. So to keep that looking uniform will actually do 0.42 that are bored. And then when we get a sweater, will do point to you check to see how that looks. And again we'll hit the down, keep working and this even get that little swinging animation right there at the top. And you can also play around with what the animations are actually doing between art warrants. When you're creating a little micro and interactions like this, I use these out here, which actually works fine because it looks like the bell has a little bit of inner show should kind of slowing when it hits the Ozarks, but you could also play around with, like, snap Artie's and he's out and really just play around and see what looks best because a lot of animating this way is kind of what feels right. I know that's the Miss cliche designer thing to say. But if something ever feel slow or feels clunky, chances are it's gonna seem that seem very clunky and very slow for anyone using it. So it's always good to keep that in mind and play around with things until they feel right . Then we can go from the top to seal our animations once more and to make sure everything's connected so we can. Quick, we could that to come up Norse Neil to slide across when we sign in good or sent emails. Write a new email was there and it are displayed density and then press that down keyboard T to see our new animation pop up on Awesome. So looks like everything's working there. So that's it for this basic kind of tips and tricks of auto enemy 11. Outro: so that wraps up this class. Please feel free to try the class exercise and leave some reviews and comments. Let me know what works. Thanks.