Adobe XD Auto-Animate: From Beginner to Advanced

hey there my name's Daniel white some people on the Internet's know me as Dan ski I'm a designer and instructor with in Bartow tux plus and in this course we're going to learn all about getting started with auto animate in Adobe XD so what is Auto enemy well auto animate is a simple yet powerful feature that essentially enables us to link together artboards in our prototype with some beautiful animation very very easily animations similar to what you would expect to find in the real world or the digital world but remember this is all still just a prototype so it's a great way to make your prototypes both look and function like a fully working product and the reason I think auto animate is so awesome is because it's just so easy to use you have your object on an artboard duplicate it on another artboard you make some changes whether it's size position rotation XD automatically detects those changes and just creates an animation it like fills in everything in the middle automatically hence the name Auto anime now there are some pretty awesome things that you can create with Auto animate in XD but if you're new to the feature itself it can be pretty overwhelming at first but don't worry we're going to start right from the beginning and by the end of this course you will be well equipped to go out and confidently create your own Auto animated animations it's a mouthful and before we kick off the course if you're looking to download a ton of creative assets that you can use within your own designs and definitely check out Envato elements and if you like this example showing or to animate in action then you can download the full UI kit from innovator elements using the link provided like literally one subscription gets you access to like over a million assets across a wide variety of categories and remember this is just literally one of like over a million assets that you can download all included within one subscription so it's definitely worth checking out I've also prepared some XD files that are included think of these as like project files and you can use these if you'd like to follow along as we progress throughout the course okie dokie so that's a brief introduction to what auto animate is let's get started and I'll see you in the course hello and welcome back to the course and if you just came from the intro thank you for deciding to take the course in this quick video we're gonna jump into XD I'm gonna run you through the interface the tools some of the features so if you've never used it before I'm gonna try and bring up to speed if you have used it then great this is just gonna be a little bit of a refresher so we'll jump into XD now and I'll just run you through Adobe XD in general okay so you can see we're now in XD we have a new art board now usually you're greeted by the welcome screen so if I just bring this up here you got the welcome screen lots of presets for mobile tablet desktop or you can enter a custom size so this is the welcome screen you can view your recent items and a few other useful links now I've already got an art board so we'll close this down so at the top here we have the selection tool underneath a few different tools so we can create various shapes here underneath that we've got the line tool - of course as you might expect draw lines and we've also got the pen tool that allows you to draw custom shapes although definitely not that I don't know what that shape was meant to be but I'm sure you'll create something better and underneath this we have the text tool this you can use to create text which is always good next you've got the artboard tool that allows you to create artboards to any size you'd like or you've got presets over here on the right hand side for some of the most popular devices today we also have the zoom tool that allows you to zoom in and out of your document and that's pretty much the main toolbar so think of this toolbar in the top left corner as the toolbar that you would use to create things now if we go down here to the bottom left we have the asset panel now this is made up of three parts we have colors character styles and components so if I just throw down a red circle really quickly I can click on the plus next to color and I can add this color here now if you have a really complex document lots of artboards lots of different assets going on what you can use this for is amazing you can save so much time with this so we can right click on this here and you can edit that color so if I just throw down a few more instances of this circle use your imagination and just pretend this as a fantastic app full of lots of red color I can right-click this color in the asset panel and I can change it to blue just like that so if I scrub through this now you can see I could change the color just so effortlessly it's absolutely fantastic and I can do the same for character styles or components so a component might be an icon a logo just assets that you reuse throughout the document you define it as a component and then you can just create multiple versions of it and edit the master version and it updates all of them just in one go so the asset panel if you work in Adobe XD on larger documents is is going to be your friend right underneath we have layers now if you've ever used Photoshop Illustrator this should be hopefully familiar too so every time you create objects they are added as their own layer like so and you can of course double click on them and give them a name if you like and you can stack layers up one on top of the other and you can reorder them as well you can lock them or you can hide them completely so those are layers and down here we have the plugins panel this is fantastic you can expand the capabilities of what XD can actually do with these third-party plugins there's lots of free ones some of them are paid but essentially just whip out the panel go to the top click plus and then you can just literally find plug-ins here install and boom is there in your panel and once it's installed you can twizzle this down this little arrow and you get access to all the functions and this is just a really convenient place for you to whip out that panel have your plugins there while you're working ok so that's pretty much the left side next we're going to go and have a look at the property inspector on the right so if I just create a shape let's go with a polygon there we go so we've got a three-sided shape now the property inspector on the right is contextual so depending on what I select on the artboard it's going to show me a slightly different set of properties most are the same like your width your height your position but some of them like this will have a few unique ones so let's take a look now so you can see here on the property inspector on the right I can edit the width and height of this this triangle that I've got selected I can adjust the X&Y position as well I can adjust things like rotation or flip this around I can reduce the opacity now this is something unique to the polygon tool I can actually increase the number of sides so we could increase this to eight and I get an octagon we can adjust things like the fill color maybe the border color I could change that to red I can increase the border size lots of different properties you can add shadows to it or you can add a background blur or just blur the object altogether so that is the property inspector now it's probably worth mentioning that there are a few differences between Mac and PC you can see I'm on the Mac version here so on Windows you won't have this menu bar at the top it will be contained within a slide-out menu in the top left corner and this object menu here where you have things like masks with shape and a few other options because you won't have this bar in Windows you will access that by right-clicking so if you're unsure just look in that slide-out menu in the top left corner or if you're on Windows just right-click and you should get access to a few more options than on the Mac okay so we've done the tools we've done the property inspector next we're going to jump into prototype mode so I'm just going to create a few artboards and i'm just going to create a shape a really simple shape and i'm just going to click on this shape with the layers panel open and give it a name now when you're Auto animating it's very important that your objects from one artboard to another have the same name so I'm just going to copy the name of my - circle and make sure all of these circles have the same name because I'm going to water animate this in a moment if they have different names or to animate won't work it just it will just fade between them rather than do like a really nice slide what I'm gonna do okay so they're all named the same on the artboards and what I can do now is switch over from design mode to prototype mode at the top and I can actually click on these circles then drag the blue tab to the artboard so I get some properties up here for that interaction we have the trigger which is a tap or a click the action of course is an auto animate there's going to be a lot of that in this course and here I can choose the easing type so we'll go with bounce because it's like a round thing a ball and I can choose a duration so we'll go with one second so then I can click on this circle here this ball drag this over here and we'll choose a different one just to show you ease in out is always a nice one it eases in and out of the transition quite nicely and we'll do that over the course of 0.5 seconds and then what I can do is I can link this all the way back to the beginning and we'll go with wind-up just to show you a few different types of easing so we've linked on our artboards together we've made the circle clickable what I can do now is click on an artboard press play in the top right corner and I can preview this so I can click and you can see that auto animate with those various transitions plays out and there's also a record button up here as well so I can actually record my session in this window and then save that as a video file ok so once you've done your prototype you've designed it you've linked it up animated it is looking fantastic you can actually share it so from the top right corner you can click on share and you can go to share for review you can also manage any links that you've already shared so with share for review we can give this a name you get some various different settings here for what you will allow and then you can choose if this is an invite-only or like a public link and then you can click create link and it will generate the link and then you get a link that you can then go and share with people and that is available online to view in a browser or on a device so there we go there's a really quick look at Adobe XD and overview of some of the tools and features hopefully this was helpful and I look forward to seeing you in the next lesson hello there welcome back to the course ok so we've had a quick recap of Adobe XD we're going to jump into auto animate now and I'm gonna show you more about how you can use this awesome feature to adjust position size and rotate of objects within XD so we'll jump to the screen okay so you can see have a document think of this as like a practice document you can download this in the project files and essentially we're going to animate the position of this button to here adjust the size and then adjust the rotation I know you normally wouldn't have a button kind of go at an angle like this but it's just it's just for practice okay so first of all I've got my button here let's click on this whip out the layers panel you can see the text and the shape containing it they're both separate objects we want to animate this button as one object so the first thing to do is to select both the text and the rectangle the holding shift you can do this on the artboard itself or in the layers panel I'm just going to right click select group and we'll give this a name so I'm gonna call it button now both the text and the shape will move together as one so once that's done I can close the layers panel down and I'm then going to go up to edit remember if you're on a PC you're gonna right-click instead and copy click on this next artboard edit and paste and what I'm going to do is move the position of this down okay so we've done that the positions all good next I'm going to edit and copy click on the next artboard and paste this again so now what I can do is I can actually click and drag from the edge you can see Adobe XD resizes the button but doesn't actually resize or skew the text which is really helpful now it's only doing it from one side so if I hold down alt or option on the keyboard it will do it from both sides so this is a great way to adjust the height of a button if you've already centrally aligned everything so let's increase the size of this maybe pop that down a bit a little bit taller there we go fantastic you can also double click to instantly grow and go inside a group and edit one particular object so you don't have to ungroup it and then regroup it after I just double-click to go inside make the change and then just click anywhere to come out of the group so I'm going to click on this last one copy it select the last artboard edit and paste and I'm going to hover over the corner so I can rotate this freely like so or I can hold down shift and it will snap to 15 degree increments and I remember of course you can adjust the rotation is one of the properties up here in the property inspector on the right so we've created all of the different states I'm going to do one more actually just to show you I'm gonna do this on the last one so I'm gonna double click to go inside select the the button the box itself and I'm going to round off the corner so if I type in a hundred here for the corner radius it makes it like a pill shape but this is another property that is compatible with auto animate so as the third artboard transitions to the fourth it's going to round those corners as well it'll look really nice trust me so we've got all of our artboards let's go to prototype mode and we can click on the button now because we grouped these two together you can see we have one tab coming off of these so it's going to be treated as one object which is great so we can click and drag it's going to be a tap trigger there are a few others but we're going to use tap of course good old auto animate there and the transition well let's try a few to have some fun with this and we've got the ease in out we'll go for 0.8 seconds and then we'll click on the next one and we're just gonna basically just join these all up I'm gonna change out the easy one every different one just to have a bit of variety in there and we'll try wind up as well and then I think what we'll do is we'll link this back to the beginning it's always nice to to loop it round so have a go yourself for doing that and then if this is all done correctly which fingers crossed it is we can now click play and by clicking on the button you'll see it moves to there you think it's bigger hit then turn sideways and rounds off the corners and then it goes all the way back to the beginning and you're going to see a lot of complex auto animates I'm sure but all of them start with these basics of being able to edit the size the position and the rotation and a few other properties on the objects in XD so there we go that wraps it up for this less and I'll see you in the next one Wow back for more okay in this lesson we're going to take a look at staggering animation with Auto animate in Adobe XD so we'll jump to the screen now and get started okay so you can see here in the project file I have two Art boards I've named them staggering one and staggering two we've got a button that says stagger me and another button that says you got it so if I whip out the layers panel you can see here if I click on this we have some text and a rectangle now remember from the last video first we need to group these together so we'll select them both holding shift group them and I'm gonna call this one button one now remember naming of your groups your layers is very important for XD to work it looks at one particular artboard and then takes that object name and then matches it up on the other artboard if the layer names and the folder names don't match or to animate won't work so we've got button 1 and I'm gonna do the same here so we'll group this second button together and this is going to be button 2 fantastic so what I want to happen is I want button 1 to move out and then button 2 to come in and then do the same but the other way around so button 2 goes out and button 1 comes in but I want to do this in a staggered way so first of all what I'm gonna do is switch over to prototype mode and I'm going to click on this button and just link it over here now we'll set the transition to auto animate of course I'm gonna go with ease in out 0.6 on the duration and then I'm gonna link this button back to the beginning with the same settings so we've created the link what we need to do now though is we need to move these around so I've got button one here I'm going to go to edit copy remember on PC you're gonna right click and copy there and then I'm going to select the second artboard and I'm going to paste it in now I'm gonna do is hold down shift on my keyboard and use the down arrow key so I'm going to go 1 2 3 4 5 6 7 8 9 one two three four five now the reason I'm using the arrow keys is because it allows me to move this button a set number of increments if I drag of my mouse it's going to be quite inconsistent between the different buttons so we've done 15 down arrow presses I think that's fine and then on this one here I'm going to do the same to select this click on the other artboard go to edit paste hold shift and press the up arrow key one two three four five one two three four five one two three four five so 15 each side and if I click play you'll see that it does this so I know it's working which is fantastic now I know it's working what I can do is I can turn off or not turn off by I can select the one that I want to fade in and fade out and I can reduce the opacity from the appearance panel on the right so remember these buttons are going to be in the middle so because or to animate detects the changes between artboards what it's going to do is it's going to start with this one here remember this is the you got it and as it starts from here at 0% opacity and moves over to the second artboard it's going to move the position down and bring it to a hundred percent opacity the same for the purple one here this is going to start here in the middle and it's gonna fade out and move down so if i click play you can see put the buttons move around looks pretty cool right but the purpose of this lesson is staggering animation and this is a really cool technique that you can use to just take your auto animate designs to the next level so that looks good but good isn't enough here so what I want to happen is I want the button to come in just a little bit before the text so the text and the button it sits on just move a little independently of each other essentially staggering their animation in stages so if I double click here to go inside of course it gets quite tricky now I can't see what I'm doing so sometimes what you might do is just do that bring the opacity back up make the changes and then turn it down again so I'm going to double click to go inside set the text hold shift and press up 1 2 3 4 5 five one two three four five so you see the button is going to come in first the text is going to come in just a little bit later it can just have a really nice effect so if I go down here as well I'll just bring the opacity up double click to go inside and this time hold shift and press down one two three four five twenty three four five one two three four five and I can click play to check it works there we go looks a bit weird but it works but now what I need to do is you select that group and then bring the opacity all the way to zero and then if I click play you'll see here there's that slight staggering on the animation where the button itself comes in and goes out just before the text arrives there and there we go there's a look at starting animation in Adobe XD I hope you enjoyed this and I'll see you in the next lesson okay welcome back to the course in this lesson we're gonna take a look at animating masks with Auto animate in Adobe XD so we'll jump to the screen now and get started okie dokie so you can see I've opened up the project file for animating with masks so what we're gonna do in this video is do like a timer counter thing so we have the button here that you've probably seen in previous videos and we're going to click the text tool and type some text and I can type a number I'm gonna press return and I'm just going to go one two three four five so this is like vertical text and I'm going to position this somewhere here just zoom in a little bit to make sure I get that number vertically aligned and then what I'm going to do is hold alt or option and just drag some copies out you can also hold shift as well and it just keeps it in line stops it moving up and down like that and there you go oh look at those smart guides really helpfully just lines everything up so this counter is going to start on 1 1 1 1 then I'm going to select everything go to edit copy remember if you're on a PC just go right click copy there and I'm going to paste this over onto this second artboard and if I just look at the layers panel you've got rectangle there and this one is called rectangle as well remember those layer names are incredibly important and we've got these here now at the moment these layer names are all the same so I'm gonna need to give these some names so we'll go column - one and then I'm just gonna go through and name them accordingly so they also animate independently of each other so we've got column 1 column 2 column 3 column 4 if they're all the same or - anime it's not gonna know which one and it just won't work trust me so name all of your columns independently now I've just named all of these over here so I'm just gonna need to select all of these delete' or backspace' and then just copy and paste them back over so we don't have to go and rename all of these layers so what I can do now is if I select this one here this shape go to edit copy edit and paste I'm just gonna move this up out of the way a little bit and I'm gonna give this a super bright color doesn't matter what color it is because we will get rid of it in a moment and I'm gonna use this as a mask for the numbers so what a mask does is it will keep everything that I have within that mask contained within that shape so if the box that I'm using this button shape is the mask then anything outside of that shape will just be invisible you won't be able to see it so if I bring this down and make sure the mask is on top I can just call this mask for the time being and then I'm gonna select all of the text layers that I want to be included within that mask I just right click and if you're on Windows you'll see it here if you're on a Mac go up to object just look for the option mask with shape and there we go so that mask is now called mask group 1 I can expand this down we've still got the mask here you can of course turn this off if you want to preview them but the bright green shape that we had that is now a mask a mask you can't see it but it's there it's acting on the objects or the text layers contained within it so now I have this number these number ones but you can see the mask is still there even though you can't see it and you can see it up here in the layers panel as well so I've masked the numbers we still have our colored rectangle behind it and I'm just going to copy and paste this over to here now so again I didn't really need these on here it's always good to do the kind of setup first we're go to edit and copy and then edit and paste on the second artboard you can't do them independently but it's just a slightly smarter way of working to do it when you've done it up front because you've named your layers you don't want to go and name it and mask it all again so that only copied the masks group so I need to go in here and just select this object as well make sure I copy that layer over to this one edit and paste and then I just need to drag that underneath so remember you can reorganize your layers as well okay so now we've done all this what I can do so I can double click to go inside the mask it kind of functions similarly to a group and then I can actually select these individual text layers and move these around so if I want the number to auto animate to well let's have something quite drastic so four will have it animate to five this next one will go to two and then maybe another four over here so you see all of this all these numbers around the outside looks quite messy but remember we have a mask so anything outside of the mask shape is going to be invisible so it only shows it when you're working inside the mask as soon as I click outside on the pasteboard here you can see the mask is reapplied now all of this I don't know if those numbers are in line so I'm gonna hover over the top of my artboard and just drag a guide down just to make sure everything is in line and I can double click go inside I'm not too bad oh good job down good job so I'm just gonna go back inside and then I can go to view down to guides and I could just go hide all guides and we've got a shortcut there there we go so I've set everything up now from one artboard to another the only thing left is the auto animes so switch over to prototype mode and then what I can do is well I could have this animate on a tap as we've done before but let's do something different so I'm gonna click on the art ball itself I see the same blue tab linked to this art board now instead of Adobe XD waiting for it tap we're gonna do a time delay so I can specify a number of seconds so we'll go with 2 seconds so this action won't play until two seconds of passed of course the action is you guessed it auto animate and we can set the easing will have what it'll wind up I think will look quite nice with this and the transition will be 0.8 seconds long and then we'll do the same over here so we'll select this artboard link it back and we'll have the same transition and this will happen again after 2 seconds so if I go and click play now we wait you can see the counter play set animation and then it plays it back again okay so I hope you enjoyed this lesson there's a look at how you can use auto animate and masks together in Adobe XD and I'll look forward to seeing you in the next lesson hey there welcome back to the course this is the final lesson for getting started with auto animate in Adobe XD something a little bit more complicated than what we've done so far but I'm going to break it down it's gonna be awesome we're going to jump to the screen now and I can't wait to get started ok so we're now on Adobe XD you can see I've got a couple artboards already and you can download and follow along with the project files we have these called menu closed and menu open so we're going to have a navigation menu we're going to click it's gonna come out and then it's gonna go back in now I've created a navigation menu over here it's very simplified so we don't have any distractions but we're going to focus a lot on animating the menu icon the three lines the menu icon is going to turn to a cross or up close icon and then it's going to go back and it's gonna look really cool so what we're gonna do first of all is create that icon so if we grab the rectangle tool left click hold shift to make a perfect square so there we go something like this and then what I'm going to do is round off the corners so I can use the up and down arrow keys in the radius box on the right so we go for let's go for eight and I can use the eyedropper tool just to match the color of the menu I've created here and we'll just deselect that border there we go now I'm going to zoom in a little bit now select the line tool just left-click hold shift to make sure my line is straight and then what I'm going to do is increase the width to let's go for we're go for four pixels and size make the color white and I'm going to round off the stroke so either end of the stroke or the border is just rounded off nicely and then what I'm going to do is press command or control D on the keyboard just to duplicate the selected object and there we go now what I'm going to do is hold shift and select all of these lines and we're going to need to group these together so if I just whip out the layers panel quickly you can see at the moment we have line seven eight and nine that's no good we need to kind of name these a bit better so first of all that's right click group them together we can expand that group and I'm just gonna name this menu and the lines I'm gonna call this one top middle and in the last one bottom and I can't leave them like that I have to reorganize them so top is on the top and bottom is on the bottom now remember we're gonna be Auto animating these lines but each line has to have its own name if they'll have the same name XD is gonna get confused I'm gonna get confused no one's gonna know what's going on so we have to give them their own name and a group name doesn't hurt either it's just nice good practice to kind of keep everything organized so now that's in a group I could select this hold shift and select the box it's in and I could use the align tools in the top right corner you can see it just nudges that there into position or you could also select the lines right click and select align to pixel grid if you're going for pixel perfect artwork so depends what you're doing I'm going to keep it not pixel perfect because I want it like right in the middle but we've created and set up menu icon now I could go in double-click to go inside that group maybe just bring them a little bit closer together I could select them all and just decrease that size there we go something like this now because I've kind of named everything layered it grouped it and it's all good what I can do now is copy and paste this over to this artboard here so what I'm going to do is first of all group this with the box so remember we talked about this before in the original one of the earlier videos that we grouped the text with the actual container it was in because we want them to move together so I'm going to select both the menu icon and the Box right-click and group and I'm gonna call this I'll call it menu button and then with that selected I can go to edit copy paste it over here on this artboard Anam paste and then move this to the right so as the menu comes out this menu icon is going to slide to the right and then it's going to turn to across and then vice versa when the menu closes so because they've named all these layers and grouped everything and all that stuff what I can do now is I can double click to go inside these groups and so I can select the individual lines and I'm actually going to turn this one off and then going to move the top one down to the middle and if you don't see any rotate icon here when you hover around the corner you can just go up here in the property inspector enter a value of 45 degrees and rotate it now I'm going to do the same here so into the middle and rotate this by minus 45 so it goes into across like so now the cross looks a little bit smaller than the menu icon is just the nature of the icon so I'm actually gonna click on these lines and just scale them up from the center remember holding alt or option as I'm scaling so there we go so first of all we're just going to check this work so we'll jump into prototype mode click on this button so the whole thing is clickable and I can drag this over here set the action as an auto animate we've already got our tap trigger done we're gonna have snap snaps a good one and we'll go 0.6 seconds and then when they click on the cross or the close icon we want it to go back to this one so it's a good idea every now and then to just kind of set up your auto anim check it all works before you get too far into it because you can get really really far aired and they realize that something's gone wrong somewhere so I like to kind of problem solve any issues as I go along and what we can do now is click play and we'll see if I've done this correctly so there we go slides backwards and forwards we've got a nice snap easing animation the menu icon becomes across and it goes back I could play with that all day fantastic so that works so that's good so next we're gonna do the menu so in Adobe XD if you drag an object from an artboard out to the pasteboard what it will typically do is if you only have one instance of that it will move it from the artboard to the pasteboard so how do we animate something from outside of an artboard without it being on the pasteboard because if an object is on the pasteboard we can't animate to a from it you can only animate between artboards so I have this here I'm just going to jump back into design mode this is the menu I prepared earlier so we'll snap that in place I need this to animate from out here but you can see as I move it outside it goes on the pasteboard and that's no good I need it to stay as part of this animation as part of this artboard ok so what I'm going to do is I've already set up my auto animate so if I copy this and paste this over here it's now on both artboards so if I try dragging it out again you can see that it doesn't go on to the pasteboard and that's because if you set up an auto animate in Adobe XD and you have an object or a layer and it's on both artboards XD recognizes that that is part of an animation and if you move it outside the artboard it won't move it onto the pasteboard or a different heart board it will keep it as part of our heart board which is great because now I can fade objects in from outside the bounds of an artboard so this menu here this is going to be 70 pixels outside it's going to slide in and then slide back out so you can see it here because I have it selected as soon as I click off it and I click on the pasteboard everything outside the artboard disappears but if I go to play now I play this you can see the menu slides in as well as the icon and it slides out so once you've set up one auto animate you can have multiple things on an artboard that will just all be part of that animation and there we go that wraps up the course getting started with auto animate in Adobe XD I hope you enjoyed it this is everything that you need to know to really go out and start creating awesome Auto animated animations yourself I really hope you enjoyed the course remember there's project files that you've seen in the videos that you can use to follow along with my name is ben daniel white also known as dan ski and yeah have fun with also animate and i will see you soon you

Channel: Envato Tuts+

Views: 209,073

Keywords: Auto-Animate, Adobe XD, Auto Animate, Adobe Creative Cloud, Micro Interactions, Animations, Mobile Design, UI, UX, User Interface, User Experience, adobe xd tutorial, adobe xd auto-animate, adobe xd delay, adobe xd animations, adobe xd ui animations, adobe experience design, adobe experience design tutorial, adobe xd animations tutorial, adobe xd menu, adobe xd navbar, dansky, daniel white, ui design, ux design, xd, adobe xd web design, adobe xd web design tutorial

Id: 4Zu6MCrfUug

Length: 36min 28sec (2188 seconds)

Published: Tue Sep 03 2019