Auto-Animate Like a Pro in Adobe XD

so if you like auto animate in XD or you've never used it before you are gonna love this tutorial hey guys you watchin ganske the place to be to develop your creative skills in this tutorial we're going to learn how to auto animate and really smooth the navigation all in Adobe XD and if you'd like to follow along with this tutorial there's a link in the video description where you can download this exact XD file and it will be a little bit of illustrator in here as well but if you don't have illustrator don't worry I'm gonna include the thing I create in illustrator which is a little a little circle segment that's what this is I'll include that in the XD file so you just if you haven't got illustrator or you don't want to use it you don't know how to use it or anything don't worry it's fine it'll be there so you can stay an XD but anyway without further ado let's jump into the video ok so you can see I'm now in Adobe XD and I've opened up the XD project file it will look something like this if you do choose to download it and follow along and first of all I've created this little circular shape made up of four segments so essentially we are on the profile of mama mia and if you click on followers it will take you to this artboard if you click on comments it will take you to this artboard and if you click on reviews it will take you back to this artboard and if I just click on this you can see all of my layers unnamed up this is incredibly important when Auto animating because all try to make look at the name of the layers to say frog and then it will look for the other corresponding layer called frog on the artboard your auto animating too and then it will create a link between those two things and then animate that transition so laya naming is important and this can get incredibly complicated and as you'll see in this tutorial we'll hare naming is pretty much essential unless you love frustration then leave all your layers completely unkempt unorganized and enjoy the chaos but anyway so that's the navigation bar here and then at the top here we're going to have this little slider that moves around and it's going to show which one we're on so this is the icon for reviews this is the icon of followers and this is the icon for comments so what we're going to do first of all is we're going to link all these together so you can see these are groups at the moment so if I switch arrow to prototype mode at the top of the screen what I can do is click on followers and we'll drag this to the followers artboard and this is going to be activated on a tap so when a user taps you follow us link the action is going to be an alter animate and we'll set the easing to ease in out and the duration to 0.5 press return that's it and of course if we select the next one reviews while we're on the reviews screen now so we're not going to need to drag that anywhere comments we do the same thing we click on the blue tab drag it to the respective artboard and it's it's completed all of the same information so we don't need to edit anything from that Dropbox you do it once XD remembers so we'll just go and drag all of these through to the respective artboard and you can see the active artboard is highlighted in the color as well they've all got their own different color themes so it just makes it a little bit easier to identify everything nope that's not going anywhere down as you just explained and then what we can do is press command or control on the keyboard depending on if you're on a Mac or a PC and this will show all the links you've created so we can see we've created all six of those links so these do now link to each other and if I click play at the top of the screen this window pops up and we should be able to click through all of the artboards fantastic so we've got all that working now we just need to create the fun stuff so we'll close that down switch back over to design so when we're on this reviews artboard this icon will be visible when were on the followers artboard this light can be visible and this is gonna slide around as well so I'm going to show you quickly how to create this you can do it in XD but I love illustrator for creating my graphics personally so if I click on the Avatar here we can see from the property inspector that the width is 90 it's a bit taller because we've got the hair popping out the top but 90 pixels that's what I'm going to work to so I'll jump into illustrator I've created well this is what I've created already so I'm gonna left click and hold where the rectangle tool is select the ellipse tool and rather than clicking and dragging I'm going to left-click and is in millimeters you can change this in the illustrator preferences to pixels or you can just type in 90 because that's what it was in XD and just type in PX now when I click in the box below illustrator will just convert the 90 pixels to millimeters so this is the conversion so you can ignore whatever units is using and it will do that conversion this is the size so we can deselect the fill and what I'm going to do is then grab the rectangle tool draw a rectangle like this and then with that rectangle selected go to edit copy edit paste in place hold shift hover over one of the corners and rotate holding shift will snap back to a 90 degree rotation and then I can drag over everything and from the properties panel or if you're on an older version of Illustrator go up to window down to a line and I'm just going to align all of these so everything is central and then just select both of these rectangles holding shift and from the Pathfinder panel you can see it down here again if you're on an older version it's up in the window menu and it will combine those into one shape and then if I select this cross I've now created drag over everything make sure the cross is on top of the circle and click the next one along which is minus front or subtract and it does this and then with the direct selection tool we can just drag over all four of these anchor points in the middle and then press delete' or backspace' and it will leave us with this and we can now drag over this and we can increase stroke weight from the stroke panel or you can even change the stroke type or the cap type rather to rounded then you can see it's very very easy to create something like this now this is the same as 90 pixels high in 90 pixels wide that is exactly the same as our avatar but we do want to make it a little bit bigger than that because as you can see if we had it exactly the same it would just fit around the edge so we want a little bit of a gap so we can hold down shift just scale this up and if you hold down alt or option as well it will scale from the center so we scale it up a little bit more then we could even rotate this around just to match the example I've got over there on the right and then when you have you drag over everything go to edit copy jump back into XD go to edit and paste and there we go and the beauty of this is on the latest version of XD now it has a much more refined support for illustrator so things like stroke I can still adjust all of this I can adjust the cap type make it square I can change the the color so a lot more flexibility when working in Illustrator if that's your like preferred thing like me you can bring it into XD and still edit a lot of stuff so really really cool that's how you create it but as I say if you are sticking in just XD with this tutorial I'll include this shape somewhere in the document you download so it's just black to start with and what we're gonna do is we'll double click or single click actually so you can see group 60 this is pretty horrendous we can then double click on this and go inside it and we've got path 8 to 9 path eight to eight five eight two seven and path 8 to six that is incredibly disorganized so do something about this so I'm gonna double click on group 60 on the name and I'm gonna call this select her goodness that layer disorganization almost paid me a little bit angry then oh come on come down Dan let's keep it cool okay so if I select this one here you can see that this is the right one this is the bottom one so I'm just double clicking on the layer name on the text top and of course we've got left and if you want to move these around and reorder them you can do that from the layers panel so there we go we're all good and what I'm gonna do is select the top one I'm going to hold shift select the right one no no a selects them all we'll select the top one we'll do this individually we'll select the top one and from the appearance panel on the right just drag that to zero we'll select the right one drag the appearance or the opacity to zero how we'll do the bottom one as well so it just leaves this one segment and what I can actually do yes grab the eyedropper tool and just sample this same reddish pink color and I've actually caught the wrong layer selected so we'll we'll try that again select the left one there we go eyedropper tool click and there we go that looks really really cool so this is going to only be showing on the active artboard so what I'm gonna do now is now I've named everything and it's all named correctly I can now copy this onto another artboard so I can select it go to edit copy click on this artboard here and go edit paste paste it in exactly the same position and then do the same on the last one now the reason that I've got this as a circle is because now it's going to rotate around the central point the middle of the circle which is of course somewhere about here so if I click on this now and hover over the corner I can rotate this and you can see it rotates around that central points and that's why I went through the trouble of setting up this custom shape in Illustrator so I can old shift and it will snap it to 90 degrees like so and again we can do that here rotate hold shift rotate it 180 degrees and then we can double click to go inside and then just eyedropper tool the color so double click to go in the group use the eyedropper tool or just pick the color from the border color picker and there we go now we need some icons of course so we'll just click hold shift and select these two icons and go edit copy and once they're copied to the clipboard we can jump over to the other artboards and go edit and paste edit and paste oh and we forgot the review one as well so we'll just go edit copy edit paste so we've got all of the icons that are named correctly as well by the way on all of the different artboards so if we click plain house have a look all we've done so far so we can see this actually moves it's working which is good so always good when you're doing a tutorial and things work so we know that that's working so we can leave that alone for now but what we're going to need to do is only have the the correct icons showing on the respective artboard so on this artboard here if I select these two holding shift and drag the opacity to zero and on this one we'll drag them to zero and on this last one we'll drag this to zero we can play that again now and there we go pretty smooth now there is something else that we can do we can we can get a bit more creative with this so if I go over to this art board here what I can do is I can click on the star and I could let's try holding down shift and I'm going to use the right arrow key and go 1 2 3 just nudge it towards the center if I go back and play this again rather than just simply fading on the spot you'll see it actually moves it moves into the center so if I now go back over here we've got the followers icon of course it is hidden but if I go shift on the keyboard and up 1 2 3 you can see that I can now jump back and forwards between these I mean icons there dudes still doing the fade from 0 to 100% opacity but they're just moving and it just adds a little bit more almost like it's going in and out of the bar that is moving as well so it's really really subtle but you can do awesome stuff like this in XD using the auto animate feature it gets very complicated so practice with it you'll definitely get used to it and hopefully this tutorial will help you in that in that journey so let's try this one hold shift 1 2 3 this is the comments icon hold shift 1 2 3 hold shift 1 2 3 hold shift 1 2 3 so I'm just nudging them 3 shift clicks clicks key presses so if you use the arrow keys on the keyboard it moves an object one pixel if you hold down shift it moves it 10 pixels so essentially 30 pixels towards the center of the users profile avatar here so let's let's click players do if I screw this up okay there we go that looks really good so just check all the different links jump around a little bit looks pretty good to me you can get all kinds of crazy with this have a lot of fun if you follow along with this tutorial and you do download this XD file let me know how you get on with it I'd love some feedback on if this is useful supplying the file as well but this is a really really good test for to animate life once you've done this tutorial and you've kind of got this file working what you can create with this feature is like literally whatever you can come up with in your mind is brilliant so we're not done yet we're not done yet we're going to do a little bit more we're going to animate the content here as well now I've grouped all of this together you can see here we have reviews - content followers content and comments content and I can select this here and we'll go to edit copy and then what I'll do is I'll go in select the followers art boarding up edit paste and what I do is I hold shift and use the left arrow key we'll go 1 2 3 4 5 and then we'll just drop the opacity down on this one and if I go back and play this first artboard rather than just fading in and fading out between artboards you can see it slides out but it doesn't really work because this text doesn't slide in so what we'll do is we'll select the text that is on this artboard and then go to edit and copy switch over here edit paste and do the opposite so we'll hold shift on the keyboard press the right arrow key 1 2 3 4 5 and then we'll play that again it looks like this because I didn't drop the opacity down so remember to drop the opacity to zero then we'll play and you can see now really really subtle but it just fades in fades out and it's just got a little bit of movement so it kind of has that sort of sliding push style effect to it now something that you've all noticed is we're using auto animate the button color is instantly changing I don't think we're trying to make at least at the time of recording this video supports like a graduation from one color to another I would love to see that I would love that so much hopefully in a future update colors will graduate into one another but to be honest because there's loads of other movement here happening it's a lot less noticeable because there's other stuff moving that like draws your eye so ok so we're going to do this last one now so we'll grab the copy here go to edit copy and paste this edit and paste hold shift 1 2 3 4 5 to the left drop the opacity and then we'll grab the content from here edit copy this gets so complicated edit and paste hold shift and press write 1 2 3 4 5 I promise once you do this more often you get used to it we can click play and it gives you that's working this one is working the only one that I think isn't working yet is this one so going from reviews all the way to comments and the best thing to do if in doubt is just test it as you go so what we'll do is we'll make sure we select this here if you get any problems selecting the right layers or groups or folders just use the layers panel from the bottom left corner and you can just select it here rather than on the artboard itself so we're good to edit copy and then edit paste hold shift 1 2 3 4 5 to the left drag the opacity to 0 from the appearance panel and then we'll select this one here the comments edit copy paste it on here edit paste hold shift press right 1 2 3 4 5 drag that down so we're just making sure we've covered the transitions from every single artboard to another artboard click play and there we go if I've done this correctly we should be able to go back from any artboard to any artboard and we've done the transition for all of them and there we go that's how to create a beautifully smooth or to animate navigation all in Adobe XD with a little pinch of Illustrator as well but remember if you want to follow along XD file is linked in the description and I'll include that circular segment thing in there as well so you can stay within XD if you want to but hopefully you enjoyed this tutorial if you've got any questions or comments you know what to do drop those down below but as always like this video [Music]

Channel: Dansky

Views: 460,775

Keywords:

Id: D9_nvt80bSM

Length: 19min 23sec (1163 seconds)

Published: Thu Mar 21 2019