How to Design a Sleek Dashboard Animation in Figma (part 1)

hi guys welcome to my YouTube channel that was just on a light amount so this is my first time doing this so part of me if there's any mistake or yeah some background noise or something it's my first time doing this and it's definitely going to get better from here so this is just like an explainer video rather than a tutorial on how to create this beautiful dashboard interaction these so we are going to I'm going to explain how I achieved this just um of figma so I'll just bring up the the video to explain everything that is going on right on this um right on this interaction here so I'll just so first is the over effect here on these cards and second second thing will be how the elements most so mostly right some of the left and also if you check the top now here it's also being animated also the um the side foreign so if you check this element this card right here they don't come in at the same time so the blue first followed by the green the red and the two yellow so as well as all the elements so they don't come in at the same time they call me one after the other so also if you check so if you look at so look at this element all these details inside those cards too they don't come in at the same time they don't come in at the same time as the cards background as well so check the graph how it's just I'm being plotted as well as this pie chart right right here and also we need to pay attention to this to this here when it comes in it comes in for the later just resize to no its normal position so there's a lot of things going on right here so when you're over on this you get the number of percentage that is and also when you hover on any part of those I'm graph you get the figure so um in this video I'm going to explain how I've achieved all of this so it's mainly just a series of um um what they called component set after delays as smart animation too let's jump right into it so I'll just close this um and go back to my file so like I said this is going to be like an explainer video so I've created my um my component so I'm going to explain how all this works I'm going to recreate so I'm going to use some that I've already created so um so first I would like to explain house months animation work so some things you need to pay attention to so I'll grab my frame to save this then I'll I'll just this is just to explain how um how to let me see how to use Smart animation so let me have something like this and pop register [Music] let me blow this up so just follow along I just want to create something to explain how smart animation works and what you shoot pay attention too maybe I would love to make this system thank you let me drop this way foreign and then I will duplicate this guy and see um pop over so I'm going to give this purple guy a purple color so this since this one is step one of two I'm just going to this one by two maybe give this give this so I'll duplicate this Frame right here and see this one is let me just multiply this by two so this will be step two of two so now this is what I want to do so I want to Smart animate this guy to this layer so I'll just go to prototype from here to here and let me see okay let me use let me use when you click on this register so this guy here so I want to use Smart animate then let's say 300 let me use 400 that's fine so it is a few now let me click this guy just so when I click on register you see how it's smart animates to this next frame let me increase the animation time messages 800. so I'll go back again so when I click on register you see how it flows into the second frame string seamlessly so this is what I want to point out here so and what I want to point out is the naming when you are using smart animate so our interaction here is smart anime so we expect it to Smart animate just like it does just like we see so but here if we have this purple bar at this Frame and it's open bar and you come to this part if this purple bag is not renamed if this um name here is not purple bar it won't work so what I will do is from this second frame I will just ring I'll just rename it to yours and let's see let's go back to animation and you see how it just moved to the other frame without giving us that animation Vibe so I'll come back to this guy again now and add to the bar so let's go back to animation let's restart this you see how it works so just wanted to point out that when you are doing smart animation sometimes it's not smart anime because your name is not right so I just needed to point out that for so we all have a little of how or a background of how that works so now these are original design this is what we are trying to you know add those interaction to so first I will grab my my frame to then I'll select this Frame right here 80 so I need to create this these guys also I'll just probably copy from here then I paste then I paste here my corner radius my corner radius is 32. so we are left with this guy we just copy this two guys as well paste them there so the interaction here is when you hover about this thing I want it to be bigger than this and I want these icons to be straight so to come in like they are all tilted right now so um I will do for see this load I'll do for this loan then I can use the previous one that I've done already these ones this one Saturn already so I'll copy this guy let me see let me paste this guy here so the size of this guy is 200 this is your group I will convert it into a frame the frame selection so I rename this Frame to learn cut one so I want I want you to so you know when you hope about this guy to BB gun let this one be straight so I'm I'll duplicate this guy here and I will increase the size to let's say 20 or 24. so I'll just hit key on my on my um on my keyboard to give me this skill then I will type in the new value that I want so far all right yeah um I'll go to this I'll change this one to server oh sorry and I want this guy to be like old instead of semi board so right here so we are good so um so what I will do now is are we I will combine these two guys into a component set so I'll just rename this components one two hello card me yeah so now I want to add the interaction to this guy so I'll go to my prototype then I'll drag this from here from here to this guy so I'll change from one click to white hovering and I want you to Smart animate and I'll say let's see 300 Milli seconds just to be sure let me see what interaction I added to the previous one so yeah 300 okay that works so now we have our loan card name so what I will do is so two ways if I want to add this guy to this my card so Canada copy this guy and paste it inside I'll go to my asset panel look for look for loan card new I have quite a lot these are these my loan card new then I'll drag it here all right let's just like that so let me give this guy so when I click this guy so whenever I write it works but I run into a problem here I don't want you to expand to the right bottom the way it is I want you to be all around I wanted to extend from the center outward not just one side so you might also run into this problem so I'll just explain a quick fix to that so instead of dropping this guy right here into this um into this Frame what I will do is I'll move this guy out and get it free see so I want the frame to be the size of this guy when you hover right so this two to four so I'll do a frame of two to four so let me see frame for load so I make this size um perform all right so and I'll drag this guy inside the thing to do here let's you click on your layer this frame for loon then you add Auto layouts so why are your two layouts you place it at this um align Center now drag your frame back into your design and so the last thing is you align the constraints will be Center Center so when you go back to your and go back to your prototype you see it's give us what we want so now the fix to that I'll just um let me see something so to know exactly so I'll just bringing this other ones that I have here the ones I have here I'm going to paste them here and I'm going to move this one to join all right prototype it all works so cool so to the next step which is to make um this this side moves to the right and these guys move to the left in our next frame which is this Frame right here so what I will do again is I'll grab my frame tool and I'll go to my big desktop all right here my corner radius is 32. and so now this is how smart animation like I said so if you want to do smart animation I want this to kind of animate into whatever you have here you have to have all the elements you have on this first frame so let me call this one say let's dashboard but then I will call this one the overview so I will have to have all the elements I have here right inside this overview thumb frame for you to Smart animate and also don't forget the name has to be the same so now um what we'll do is we need to copy all of these guys and put them right into this Frame oh sorry so but we don't want them at this position in this current frame so we need to you know change them into the position we want when we get to this when we get to this Frame so I think I'm saying so too much pardon me um here's what we're going to do I want this this um this guy this one this um dark blue background to be the same background I will use for this for this um my side a sidebar so that means it has to be the same name obviously so no and this position at this at this at this um overview position I don't want these guys this ones to be here I want them to be I want them obviously they're not going to be on this page they are going to be outside somewhere around here when um um what's it called when I'm moving to this part and I want this one to move here so the split on both sides this is what I do I'll probably group these guys together okay don't let me group it so if I'm grouping it here and I'm not grouping it here it will not work because obviously they are not going to take the same name that way so if you are grouping it here be sure that you group them here too and if it's group 45 here it has to be group 45 here so since there are no group group or grouped there no limit group it here so I'll just sort of slide um achieve this one two the left just like that but now we are not seeing what we are doing so this clip can't no content I'll uncheck it so that I can see um sorry so click on this and you know uncheck the clip content so I can see what's going on out here so and I don't want it to move like just move I want them to move in a um in a sequential manner so I'll just probably select these two choose to this side a bit select these two guys decide um pinkies to guys to this height and probably just move this dashboard a bit so also we don't need this this mask group this one I'll just delete this one so now I don't really need this guy because I have another another logo on that home page so I don't need this logo I can delete it I can let it maybe see slide to this part a bit then maybe reduce the opacity to zero so that works for me and let me just pick these guys and paste let me just paste this here so at this Frame I want this my this my blue background to be here let me check the dimension all right so this was going to happen so you let's go to type this and see what we have so on clicking this guy click so it's supposed to be so we are clicking basically is um what's it called the the over one not the not this one so what I will do is go to my this one change it to the expanded one and just and interaction to this guy and I can now change it back to change about to the first one so just let Alice come to our animation and see so it works so see this ones move to the left and this one here but I don't like the interaction it's too basic it just goes I want to add a bit of trauma too to eat basically so I'll go back to this guy prototype select this guy so just to be sure I will check what I did with this guy and check the interaction so on click and all of that so we have 800. all right back here so on clicking this guy okay that's fine smart animate and I want this one to be 800. so this guy so that's fine I like that but it's still too basic to me so I want to add a bit of drama so instead of using all this preset um preset um motions I'll use my custom animation and I'll drag this to this point now probably drag this to this point so what this does is at this point it's going to be slow then becomes fast so it's going to give it that slow fast effect so let's see what we have here you see cool smooth we like that I like that so now so um I don't necessarily need these guys to show so let me just play that again yeah that's fine I don't need this guy to show so they are showing is because um I think clip content once I clip content they are not going to show so we've achieved the first phase of the um interaction so the next phase will be to you know bring this Guy this is our our sidebar probably delete this and just copy the one I have here and paste it here cool so now if we go back play these guys this new one that I just brought in they are not animating so and I want them to animate here so now if I want this guy to animate or to flow in I will have to add it first to this part right here so this first frame they have to be here like I said you can't anything you want to animate has to be on both both frame if they are not it won't work so I will need to you know copy this guy and put it in this Frame but on this frame on this first frame they will not be showing so I will just shift them to the side like that so for me to see what I'm doing now or check this clip content now we have these guys outside so if I come back to my animation I'll say let's restart this whoa I like that so it works so now the world of them comes in at the same time I don't like it either so I'll just change your position here so maybe this one is here I'll move this manage to see somewhere around here I hope this guy says somewhere around here I'll move this one somewhere around here oh okay let me control it let me control it I did a mistake sorry so he's not supposed to be on interaction it's supposed to be like the overview let me see okay I'll have to copy this one sorry about that so let me just delete this one bring to all right so I'll copy this one paste it here then uh just Shifty two the other side so [Music] sure what I'm doing just so yeah so this logo stays here and I'll just move this one to probably decide this overview here I want this one to be here record you come here transaction okay user okay see here it's going to be a longboard so let's see Team view here analytics you here preference okay um settings here security here um okay lemon chance shift this board to this vertical bit switchboard here on logout here where I'm moving this from from here to the final further left I'm holding my shift so everything's going to be on the straight line so I'll come back here click my contents come here keep my content so on this select dashboard my sidebar dots that's one way around here and this part the outside here so they are going to just smart animate in when it's coming so when I make them fixed so they are fixed so if I go to my um so if we check my fees to buy you see side nav that's the name of the group and I come to my dashboard too you will see my site my side knob here so same name if the name are not the same it's not going to work side now side now so let's play what we have sequel that works we like that so one last thing um but I will leave I'll leave that to you too you know um transfer what you can do is this um top top knife here top knife here so it has its own animation to when it's here so it's somewhere around here this is and the opacity is like zero let me tell you 200 so you see where this loan that's about this somewhere around here this overview is here this is our search this thing so a lot of things depending this is the name this admin so but at the end of the day everything is going to like be nice when it comes here so you can do whatever you want to do you can try something you know but I'll just copy this guy here and just paste it into my into my work so the same thing just change the opacity change um what's it called change positions and all of that and it was going to be just fine all right so let me check my interaction so cool that part has been learned now what we need to do now is to get all these cards already so all these cards ready so now what we need to do let me just copy I will do for these two then the same thing applies to the remaining one but I'll just use this tool as an example copy this guys and just probably paste it here let me move them outside first this is a component I will just break I'll just detach those components so this is what we're going to do here we are going to create two um on three component sets from this from this card so we are going to create one for the background alone for the background alone we are going to create one for this for this content I'm going to create one for this um number since we want those numbers to be changing so we have component for this for this and for this since they are not all going to you know enter or display or comes in at the same time so I want to create um different components for them so when we create one then we can edit it and use it for this for this guy so the first one I will create will be these numbers maybe this um number here so how do I do that I'll just explain what I've done with the numbers I don't want to go over it's kind of stressful so I use let me go back to the company so these are the numbers I used 30 numbers that are constantly changing like changing from so it starts from Zero moves to three thousand see it gets to this 10 million 136 200 so it's quite a lot of work I know there is another alternative you could use which is you know a sliding number when it slides from zero to one two I don't want the sliding fit I want something that changed so this is a list of 30 numbers how do I generate this number I just use chargeability and I just go there generate a list of 30 numbers at equal interval with the first number being zero and the last number being um 10 126. it does the magic generates um um these numbers I just copy and paste and put it there so how how did I do this so all these are frame this zero zero is a frame then inside the frame I have the test which is zero zero so this is also a frame inside that frame we have 340 so the same goes to the rest um 28 they are all frames the inside are frame we have the numbers so what we are going to do for so I created them separately initially so let me see if I can just so okay so I created them separately the way I created um just create different frames put the numbers inside then select everything together and make them a component set after making them a component set then you go to your prototype then you um um you combine them together so from zero to one you use after delay one milliseconds so one milliseconds is just like zero seconds it's not stopping immediately it gets to zero it's moving to the next number so and you're adding yeah we are not going to use Smart animate here we're going to use instant so the same thing for this next frame after delay one milliseconds we are not stopping when it gets to this one move to this one instant so the same for everything everything is one milliseconds till you get to the last one so you're not adding any animation to this last one because this is the final number when it gets here we want it to stop so it stops here so that's how I create this um changing number so this one is for the um this bus loan this one is for the closed loan this one is for the um Movado loans and for the rest of them like that so what I did after creating the first one I just duplicated it change the name change the frame name um and change the figures inside so that's what I did basically so you don't have to go through the stress of doing the um prototyping all over again so yeah so to show you how that works just going to copy this one um sort of paste it inside our design too to show you how it's it's working this guy here so let me come here so I'm gonna play you see how it works so it doesn't stop you just change to the next number change to the next number two you get to the final number back here yeah um so now the next thing we want to create is the frame of the component for these two guys or this um what do I call them now this element and the background so let's create for the background first I'll probably just duplicate this guy I'll call it um let me call it is this background all right so I don't need all these guys here for now I just want just the paragraph I'll keep this one here this much so now apparently the background is the frame background so I don't need the frame background basically what I need is just a a ship that has that has that color so we're going to be using a shape so let me get the size corrected 200 169. 100 169 and the corner radius is 16 so I'll change this to 16. then I'll use my eyedropper to just pick the color so for this Frame I will not be using this this background and I've changed the color regions of this one too so I'm just going to drag this guy inside like that so now I want to create like the component set for this background I'll drag I'll make a duplicate of this one so this is going to be the first one then the most to this second one so at this point I want this shape this background shape to be like under so it's not going to show um let me do this thing I want it to be let me see I want it to be somewhere around here just outside yeah clip so it's going to be here then moves to this part and the name has to be correct so here we have rectangle 1183 here it's also rectangle one one two so it works for me so I might let me change this one to see okay which let me change it to one and change this one to two you can use any name it's allowed so select these two create a component set then add my interaction so from here to here here I'm using after delay so I'll come here select after delay and I'll use one milliseconds like it's not stopping immediately it gets here almost here so now I need to determine what interaction yes I'm using smart animes but I don't want to use custom I'm also called comstorm motion I'll probably use something like say slow but just to be sure let me go back to the original design and see what I used so I use slow 300 here okay slow 300. um where are you where are you loading 300 so I'll rename this to Blue blue VG Luigi yeah so I have to put it somewhere around here I don't really know where and let me on my grade limit one of my grids yes if it is that's strange there should be so um I'll just copy this grid here to this one so I'll do that is I'll just um click so I'm selecting this layer that has grid this grid here I'll just click on this side um to have this all these um um row highlighted then I'll hit command C come here command V so it's just that's how you copy like anything layer style gradient color just tap on this Edge Ctrl C come here Ctrl V then that's done so now I need to know exactly where to paste my my card background I just did I know it's going to be somewhere around here so just copy this and paste it here and it's going to be somewhere here yeah so yeah I don't know if this one I can delete this one so my component is here if you remember the first the first time nothing is showing then before this one comes in so that's why we are not seeing anything on this screen but something is there so if you go back to our this thing I would play you see it works yeah just like that all right so I don't but I think um Marvin issue with the color let me just get the right color code so I have this color and the opacities um logic 72 yeah hush 2017 for this one all right so the next um thing we are creating is all these all these guys so I'll bring this one down and so after completion this design is going to look like but remember we are not using this figure we are using this our interaction that was created with this number to replace this one so I'm going to drag that one in delete this one just bring this one here so I don't need the background probably just turn that off so this line is going to look like when everything is done so this number is going to it's not going to be zero zero only once this shows up then the number starts changing automatically so the number we are using here is the um is the component so I'll I'll give this one maybe two to then I'll drag it here and call this on so at this point these guys will not be here maybe somewhere I'll move them sorry so all these guys I will just move them down so to see what I'm doing now uncheck sorry I'll click on this I'll uncheck the content to see so I don't want them to move in just straight I'm just move into this so I will change how demo you need to drop this this one down a bit then move this one down this one direct beat and yeah move this one down a bit yeah so now I don't want this this number to to be changing I just at this point I just need to be zero zero zero then it moves to this guy is this one I need to be changed so I don't need this one to be changed so what I will do for this one is just detach instance to just be zero zero zero but the naming has to be correct it has to be this um this loan value this one to this loan value so they are all the same so that works for me I'll click on this I'll click my content here and group the two together create a component set then um no use this guy so now I want to do my interaction from here to here just to be sure let me check the interaction I used to join the two of them together so we have we have it um is out 600 milliseconds so I'll go back to my design I know this video is getting too long but I just have to make it as detailed as possible so I probably might break it into um two videos um yeah I'll change this one to let's see this um value look at this content I'm just because some interaction so I will see from here move to here I'll use after DB but I need to check the value sorry sorry I'm always going back to this so this guy is a lot of con okay after the Android milliseconds yeah so now a quick reminder you know for this one we said after the zero second is it on one millisecond that's like just like zero milliseconds so it's not stopping at all but we don't want this background and this one to come in at the same time so if this one is zero we want this one to delay for about 100 milliseconds before they come in so they don't come in at the same time so I'm going to use after delay and I'm going to change this one to 100 milliseconds so then I'll use Smart animate I will not use slow for this one I'll use this is out back this so I will show you how what the face look like this one right so we are done so we've brought initially we've brought in our our background then let's bring in our our our content Converses he control C and our paste it here this is it here so let me just use the second one so ah yeah you have to be like on the same level with this guy so you have to do that currently so yeah um don't eat then just yeah keep cool they're all on the same this thing I'll change this one so bad so that one so this is what we have then let's go back to animation and see how you see that works so the um the interaction that I added to this one the um what's it called down this guy this is out and back is it's okay let me just show you from the video let me close this guy so this is what it does um so this is what it does so once the content comes in it goes up higher than its original position where it should be then comes back so it goes up back so that's it is out back stuff so I guess you understand that so that what it does then let me play that again so once it's back this one starts reading so so the same thing goes for all these other cards so you create the background you add um you create the what's it called component for your background create a component for your content don't forget to use the animated um the component for the numbers and you do the same thing for each of them so I'll just probably use the one that I've created four and so you know to to save time bring them here and just paste so I've added the one for red for green bread the first yellow the second yellow but one thing I need to point out let me go back to their this thing so the other one is green so if we check the delay for the background for the green you see 100 so the the one for blue is the one for blue is one millisecond so immediately the the page immediately we animate to that overview page this one starts yeah this one comes in then the background for green waits for 100 milliseconds before it comes in the one for red waits for 200 milliseconds before it comes in the one for the first yellow with 300 milliseconds before it comes in and the last yellow weights 400 milliseconds so like there's a difference there's an interval of 100 milliseconds between all of them so they don't come in at the same time the same thing for all these for the content this one with 100 milliseconds to come in so this one is coming in the same time this green background is coming in because they are both waiting um 100 milliseconds so um for this card for this one this one is waiting 199 milliseconds you can approximate it to 200 so for this one is for this is the content for the for the green card so this is the content for the red card and this one is waiting 299 milliseconds this is just about like approximately 300 and and the one for the first yellow this one is waiting for it down 99 milliseconds and the one for the last yellow card this one is waiting for now almost 599 milliseconds before coming but the interactions are all the same it's smart animate is is out and back and it's 600 milliseconds for all for all of them so it's just the delay time that is different to give so they so they don't come in at the same at the same time all right so so the same thing for all these guys they use the same interaction smart animate slow 300 same thing with this one slow 300 same thing with this one slow 300 the only change is just this um after the late time so go going back to our design okay so I've added those ones from my previous design so let's play this and see or we have so click on this one so you see smooth they're not coming in at the same time um we like the effects so the next thing will be to um okay the next thing will be to create our graph that's what is next on the list

Channel: Bright O'feranmi Nejo

Views: 15,628

Keywords: ui design, dashboard design, figma tutorial, interaction design, animation in figma, figma design

Id: H4qWatOFKJA

Length: 51min 9sec (3069 seconds)

Published: Wed Apr 12 2023