Adobe XD Auto Animate App Design - Tutorial

hey guys it's Kayla welcome to the YouTube channel in today's video I have an Adobe XD Auto animate tutorial for you guys we're gonna be designing and prototyping what you see here so we're gonna create the UI slider that adjusts the graph and also we're gonna animate the numbers at the end before we head over to Adobe XD today's video is sponsored by milla note milah note is a bit different than traditional software it's more like working on a wall in a creative studio it allows you to map out your projects gather and organize all of your inspiration in one convenient place and it also allows you to collaborate with your colleagues or clients in real time as a designer it's an essential part of my workflow and this awesome tool is free so check out the link in the description before we begin make sure you guys download the project file link will be down in the description and that'll get you right up to the start of this video so you can follow along with the tutorial so this is what the project file is going to look like it's just a normal iPhone 10 artboard and i have the layout grid set the two columns and the width on that is 17 so we have 17 spacing on each side and that's going to be the spacing throughout the design alright so to start off our design I'm going to drag out a status bar and I'm just going to Center that up and then align it to the top of the artboard after that we're going to have the user profile icon so I'm just gonna hold shift and drag out a circle I'm going to hit the lock icon and set this to 48 by 48 and I'm going to touch it to the side of our first column and we'll set the spacing on this 54 from the top that's gonna allow us to have enough room up here from the status bar so the first thing I'm going to do on this is I'm going to select the border and I'm going to apply a border of white and I'm going to change the size to 3 and make sure this is on the inside as well next I'm going to check the shadow and I'm gonna go down here and select this first one the color code is 9bc 5ff and this is at 16% opacity then I'm going to select a face and just drag it into the circle I'm gonna double click and we'll just reposition this a little bit better it's out next to this we're going to have our account information so I'm just going to put let's let's do five thousand dollars for now I have the character styles already saved I'm going to select the h1 which is open sans font and it's 24 pixels in size I'm gonna line this to the left and then I'll just touch this up here and then go over 10 spacing for now below that I'm going to put the month and savings and I'm going to select the small font which is 13 size font and I'm also going to set this to text gray and the color code on that is B 5 B F D 0 it's going to line these up together I'm going to group them with command G and then centre them up to this icon out over here to the side I'm going to drag out my closing icon and I'll Center align that up with this icon so that is the start of our design I'm actually going to double click on this and then just bring that up a few pixels and then I'll just recenter this is grouping much better I'm also going to put some cents on here as well that way I have a more accurate number below this is going to have our graph so I'm going to drag out a circle holding shift I'm going to set this to a width and height of 250 pixels then for now I'm just going to set it to a gray and remove the border just Center that up it doesn't matter on the height for now we'll change that later I'm going to command C command V to make a duplicate and then I'm gonna set the height to 150 so it's exactly 100 smaller and I'll just change that color to a darker gray so we can see it I'm gonna Center them together select both and then go up here and select subtract alright for the height I'm gonna put this 162 pixels from the top of our design so that should give us sixty pixels from below this icon so that's going to be our placeholder for our graph I'm gonna select this group hold alt and drag out a copy I'm an ungroup with a command shift G and I'm gonna Center those together and then regroup with command G then want to Center align that back inside of the circle next I'm going to go inside of this grouping and grab the November savings I'm going to make sure this is centered and I'm going to change this to monthly income I'm also going to select the dollar amount Center that up and then change this value as well all right so below our graph I'm just going to say how much question mark and I'm gonna set this to our h2 which is also the text gray and this is size 15 font I'm going to position this 45 pixels from the bottom of our graph and make sure it's touching the side margin then I'm going to hold alt and drag over on this one I'm going to align this to the right and I'm also going to set this back to our h1 size font I'm gonna make sure this is centered and then I'm gonna change this to $100 so in this section right here we're going to have our slider and the same thing with the graph I'm gonna put that off and we'll design that in just a second down here at the bottom we're gonna have a button so I'm going to drag out a rectangle from one margin to the other that should be three hundred and forty-one wide and I'll set the height to 55 put that 30 pixels from the bottom and I'm also going to apply a border radius of 5 pixels I'm going to set this to red which is e 8 3 8 6 9 and also I'm going to remove the border inside of here I'm gonna put ad item this is also going to be size 15 font but I'm going to change this to white I'm going to make sure this is center line and then we can Center that up inside of our button now we need some fields so that we can input what this item actually is so we're going to have input and then we're also going to have a category selected for how this is going to play into our budget so I'm gonna hold alt and drag up and let's do 20 spacing I'm then gonna change the height on this to 50 I'm gonna set the fill to white and then I'm gonna check the shadow and I already have this preset for you I'm gonna select the middle and that color code on that is eighty nine nine a eight and this is at twenty percent opacity on the Y value I'm gonna change that to one and then on the blur that can remain at six so I'm just gonna drag this over to about halfway and then I'll hold alt and create a duplicate so let's duplicate I'm going to set this to about eighty pixels wide and I'm going to touch it to the side of the margin then I'm gonna drag this one all the way until it touches that one the command C command V that will make a duplicate and I'm gonna hold shift and hit the left arrow key which will move it over ten pixels if i zoom in I can select the one underneath and then just drag that over and then I can delete the one on top that's a good way to get that spacing in between there actually I'm going to make that just a little bit more so I'm gonna go over another ten and then we'll just drag that back over I'm gonna hold all and duplicate this add item and I'm going to set this to black I'm gonna line this to the left centered up in the rectangle and put 20 spacing on the left also going to duplicate this and change this to food change the color to red Center it and then Center it inside of this other rectangle just like that and one final thing we need to do for this input is drag in a pin icon for the location so if these are selects s they'll be able to set the location and I'm gonna put 20 spacing from the right side of our rectangle and I'm also going to set this to the text gray which is a little bit darker than this gray up here so it's gonna look a little bit better so now we are ready for our slider and our graph which is going to then allow us to do our motion in the prototype tab so I'm going to drag out a rectangle from one margin to the other I'm going to set this to six pixels high I'm going to fill it with the element gray color code on this is e FF 4 f8 and then I'm going to remove the border and on the border radius I'm gonna set that to 1000 just so it rounds the ends nice and even like that I'm going to try to Center this up the best I can in between the bottom of this so let's actually group this together command G and the top of this input so about 84 pixels in between each of those will work so that's exactly centered in between there I'm gonna command C on this and command V to make a duplicate I'm gonna change that to red and then we can just drag the width over somewhere around there would be a good starting point so now we need the actual slider itself so I'm going to do that with a circle so I'm gonna hold shift and drag that out and this is going to be 28 by 28 pixels I'm going to center that up and I'm gonna set that to red and on the border I'm gonna change that to white and we'll set that to a size of 3 also going to select the shadow and we're gonna select the middle one here and then I'm going to change the Y value to 1 so that is our slider and the last thing we need to do is create our graph alright to create this graph I'm going to select the shape we already have and command C command V then I'm going to change that to the blue color and I'm going to grab the pen tool and I'm going to go from the center of this circle our straight up and I'm just going to come all the way around to there and make that a completed shape so we're basically going to cut the rest of this away and leave this piece here so I'm going to fill this and remove the border with that selected I'm going to hold shift and grab the blue circle and I'm going to go up here and select subtract so now this is all we have so now we need to round each of these sides off and we're going to do that with a circle so I'm just going to drag one out holding shift and this needs to be 50 pixels 550 pixels so I'm just gonna line that up and then hold alt and drag down and in line that one up so now we can select the shape hold shift and select both of the circles and then select this option which is add and then I'll combine those together now so that we make sure that we can prototype this accurately what we have to do is select the background shape the gray one hit command C command V and then I'm gonna send that back one with command left square bracket key with that still selected I'm gonna hold shift and grab the blue little shape and I'm gonna hit come in G and then that's going to create a grouping like that so inside of this grouping I'm going to double click and I'm gonna select the gray circle and then remove the fill so now we have this so we have this box with this gray circle inside that's 0% opacity and this blue shape and the reason I've done that is so now when we go to prototype tab all we have to do is rotate this and you can see that it moves around the circle really nicely so to finish off the graph all we have to do is copy this a few times slightly rotate it and change the color so command C command V just like it rotate it a little bit we'll change this one to red command left square bracket key to send it behind rotate it just a little bit further and then I'll repeat this process and just like that we now have our graph and we have our slider so I'm gonna select the artboard and I'm going to remove the grid the last thing I'm going to do here is I'm just going to change this number to something a little bit more accurate to what you might have as your actual savings so let's do three thousand eight hundred and ninety eight and then 85 cents and then we'll just leave the monthly income alone so now we can create a duplicate of this artboard so I'm going to select it and hit command D and I'm going to change this number to 415 because that is what we're going to be dragging the slider tip and all we have to do is drag the circle I'm an old shift as a drag to a reasonable position we'll just put it Center and then we also need to change the width of this to there and so now what we need to do is select all of these colors except the blue one and then we're going to rotate them slightly since as we drag this slider we want the red section to actually increase on our graph so now we have the beginning and the end state now all we have to do is go into our layers panel and actually rename all these objects to make sure that when we auto animate everything is doing exactly what we've wanted to so first up with my layers panel open I'm going to select this blue shape I'm going to double click on the grouping and name it blue and then I'm going to go to the red one and name it red and I'm going to do that for each of these shapes so now that I've done that for each of the colors I'm going to do that exactly the same for this one making sure I keep the naming consistent okay so now that my name is consistent as these Auto inmate that will be perfect the only other thing that's going to move is the slider so we'll name both of these elements so I'll just name this one slider and then I'll select the red bar and name that slider - bar so over here I'll name the bar slider - bar and then grab the ellipse and name it slider and so that is all the setup work we need so let's head over to the prototype tab and I'm going to select the slider and drag over to this artboard I'm going to make sure that this is set to drag for the trigger and make sure the action is at Auto animate then I'm going to select the slider on this artboard and drag it back over and Adobe XD remembers the same settings now if we click the live preview option if I click on this and slide you'll notice that our numbers are changing but also our graph is actually rotating to adjust for this price change all right so now that we've done all of that we pretty much have this tutorial finished now I'm going to show you one final touch it's going to make it look really nice we're actually going to animate the numbers changing on each of these numbers so to do this what I'm going to do is open a command ship g to ungroup each of these groupings and i'm just going to go over here into the pasteboard and i'm going to hold alt and drag this over so what we're actually going to do to do this is create each one of these as their own text box so I'm just gonna grab my type tool and type out a cash symbol and let's set it to our heading and I'm just going to position that right below I'm gonna hold alt and drag over and I'm gonna set this to one hold alt and drag over you can do this with a repeat grid but I'm just gonna do this manually real quick because we're almost done set that to period drive then back and then we need two more zeros so we've basically made this number up here out of individual text areas so I'm just going to delete this original number and what we need to do is select the one and hit repeat grid and then drag down a few ways I'm gonna remove the spacing all the way to zero and we only need this to go to four to match our tin screen number over here so we're aiming for 415 so I'll just drag that over so we can see that so that's what we're aiming for so we need to go down to three four so we need to stop there so we'll go up there and then I'll hit ungroup grid and then I'll change each of these all the way to 4 and I'm going to do the same thing for the next number except this time we have to drag way down and that's where the effects going to look really cool because we want these two numbers to change a lot because we're going up hundreds of dollars so I'm going to keep dragging down a little bit and that it works so I'm gonna ungroup that and then I'm gonna speed this up but I'm just gonna go input one two three all the way to nine go to zero and then start over all right so after I've done that I'm a few short I need to go to one so I'm gonna hold alt and drag down change this one to zero that one to one and then we can delete this one so for the next digit that's gonna be our final digit we need that to go to five I'm actually just gonna grab all of these I'm gonna hold alt and drag them directly under and we're just gonna reuse them so let's just grab from zero to one and we'll just grab all of that holding alt and we're just gonna delete this one position that there and we need to take this to five so I'll just grab a few more hold all and drag down one two three four and five all right so from here we need to select all of this so we drag all the way down and hit command G next what we need to do is we need to drag a rectangle around this number select the rectangle and the grouping and hit command shift Kim and you can also do that by going to object masks with shape which is right here so now we have this grouping and I'm going to drag this over here I'm gonna delete the original one and I'm gonna put this one in its place so now I can delete the 415 I'm gonna go into the layers panel and name this mask group number so now I'm gonna select that number hit command C select the second artboard and in command V and it'll put it exactly in the same position and now what we need to do so we need to double click so that we can edit the group and we need to select all these numbers and drag them into position so I'm going to drag leave 4 into its place and I'm gonna do the same for the rest of these numbers I'm going to drag all the way down holding shift to make sure I grab all of them and drag all these up into that position and we'll do that with the last one now that I have all of them selected I'm going to drag them all the way up until that five is into the correct position just like that so now if I hit live preview as I drag this over you'll see the number is actually counting up to 415 and as I drag back down it's gonna go back down and that is all for today's tutorial hope you guys did enjoy it thanks again - mil note for sponsoring today's video if you want to check out their product for planning your next creative project make sure you click on the link down in the description if you liked this video consider giving it a thumbs up subscribe for more design and code related content I now upload every Tuesday and Thursday so make sure you have that notification bell on so you don't miss a video and as always have a great day and I'll see you guys in the next one [Music]

Channel: Caler Edwards

Views: 498,883

Rating: 4.9741502 out of 5

Keywords: Caler Edwards, CalerEdwards, UI Design, UX Design, Design, Graphic Design, Interface, visual, UI/UX, UI, UX, Adobe, AdobeXd, Adobe XD, Xd, creative, creative cloud, Adobe CC, Experience, Prototype, design & prototype, motion, adobe XD new, adobe xd update, adobe xd tutorial, auto animate tutorial, auto-animate, prototype mode tutorial, prototype auto animate, app design, budget app, money app, balance, ui slider, graph

Id: VisaLaF7GWU

Length: 20min 58sec (1258 seconds)

Published: Tue Nov 13 2018