Animated Progress Ring | Figma Advanced Prototyping

this little animation here is way more complicated than you would imagine so prepare yourselves for this one hey guys welcome back so in today's video we're gonna be building this animated progress room component and yes it's gonna be a component so you can reuse it across your whole project and uh as i said in the intro this is gonna be a bit more complex so i'll try to do my best to be fast but no guarantees there so let's just jump straight into it and start building this so let's begin with just creating a circle and let's center it here and let's change the ratio here oops don't move it just change it and actually we'll move the start point to the top like that and then we can change the ratio or actually size it first to the size that we want let's see like 200 i think 260 is okay for this one it's a nice nice size and then center it re-center it and let's make it a little like thinner i think [Music] what would look nice like 95 yeah i think this is okay and let's just quickly change the color to be more like prettier and go with the overall theme here let's go to it towards the orange here that's okay and once you're or we are like happy with the size of the circle or hips in this case we can move it out so we will be building it outside of the like prototype frame or the frame and create a component here and then just drag it in to finish up so to begin this is gonna be our base so let's uh call this like the base uh actually ring base like so and then also wrap it in a frame and a quick way to wrap anything in a frame is to just use the shortcut option command g to create a frame and then let's name this progress ring nothing ring and then we can actually just copy the ring base and let's give it that for now select the one that's on top and let's change its color to well anything that's different than the base ring color and now here is the part where we decide like where the ring should end like end up like the final position so we can do like it will go from here to here or all the way to here so let's i think i want to recreate the one that uh you saw in the intro so let's go for that and here's like a top tip if you hold shift it will snap to these like sections so it will be easier to build this if you use some of these but of course you can just choose any amount but just note it will be more difficult to build it so let's go something like this i believe was on the uh intro as well and i should probably steal the color from there let's see let's use that and then go a little bit lighter like so now actually i'm going to do the same that i did here in the original which was go white on this and then just decrease the opacity to like ten percent and then use this color from here you can delete this okay so now we have this setup and now we want to create the like rounded coins here and to do that we just create a light rectangle here actually i want let's redo that and let's lock the like uh crash here here and then let's make sure it's the same height as the ring is like thick or width and just line it here oh and another thing if you if you can't do this like fine adjustments and it's like snapping to the pixels here all you need to do is go to your preferences here and uncheck this snap to pixel crit so then you can do these like fine adjustments here and the next thing is that we need to make sure it's centered like horizontally here so select the rectangle and then the actual ring base here and then use this to align it correctly now we can round round it up to make it a circle and while we are this at this point we should probably rename this to be like uh what would be called a good name for this like final final amount i think it's describing it enough for now and then we're going to call this start circle and also let's add a color that we can identify easily just to make this more clear for you guys what's going on and we will then be like changing the colors later on too much everything so now we need to also copy this and move it here but it's really difficult if we just copy it like this and start dragging it here so this would be really difficult so instead of like dragging it by hand don't move it after you duplicate it here so we have this start circle and a copy of it and actually let's name this the end circle because it will be at the end of the like ring and once we have this we want to wrap it in a frame in a frame like this this is just a temporary thing to make our lives easier and then go into the frame and select the end circle and just make it to center on the frame all the time so once that's set up select the frame and make the frame the same size as the progress ring frame so just match the size of the ring and now choose the frame and start start turning it like so and as you can see it's not really lined up what did i mess up okay just make sure the uh rubber frame for end circle matches in size with the progress ring so make the width and height match on this one and then we can rotate it as you can see it follows the ring perfectly and if you hold shift it will snap to the correct position but we won't be leaving there because we need to actually go a bit further and align the edge of the circle with the edge of this actually we want to go as close as possible so like there should be pretty damn close you can go closer but this should be enough and now we can remove the frame uh wrapping the end circle and you can remove it by just clicking shift command g and now the frame is gone and the circle is here like standalone and now we can uh select the final amount and extend this a little further like so and check that this is also lined up correctly and then what we're going to do is we're going to duplicate the end and start circles like so and let's move them to the top so the duplicates remain here now make select the final amount start circle start circle and end circle all of those and then go to the boolean tools and choose subtract selection so now if we hide this for a while now we have this nice rounded edges so this will be like the final like state of the component and actually we don't want to touch this anymore so just you can even lock it to make sure it will stay there and not move so we can bring back these because we need those later and now we can what we can do is actually just duplicate the ring base again and move it above this like we should rename this to be like the final section again what did i call the file section final amount well the point is like don't touch this and now that we have the ring another ring base here we can rename this the ring section and now adjust the sweep and also change the color so we can see what's going on what should we use like white i guess we can see enough and now that you when you use the whole shift and move the sweep it will nicely lock to this position which we want and just align it there and then what we want to do is just copy the ring section and go from this uh peak or drag the start point while holding shift so it will move the whole section like forward and align it with the point where the previous one ends and now we're just gonna repeat this until we have filled the whole circle [Music] now here when we get to the last one you see that when you line it with the previous one it goes but actually it doesn't even go past too much like it pretty much aligns perfectly which is i wasn't expecting that but cool apparently so we don't have to but if you use another amount and it goes like this at the end when you align it here perfectly just bring this and to be like dead center on top here like this and then we're gonna do we want to also create that like rounded edge to this section so what we do is make another copy of the start circle and make sure we select this section and then also select the start circle and do another subtract selection and we can hide the star circle for a while to see that yes indeed it's correct although i missed one step let's go back quickly before you do that you want to wrap these in a frame like so and it's gonna be like the leading uh section so it's the one that will be actually visible uh and then once once you have created the frame here now you can do the uh subtract selection like so and why is this well it's because we want to be able to like let me change the color so you can see so if if we wouldn't wrap this in a frame and turn this while it rotates like this we don't want that but now that we have wrapped this in a frame and we rotate it follows the ring perfectly as you can see so that's why we want to wrap it in a frame uh and actually not gonna look at we don't need the end circle anymore actually we only need one so we can delete it at this point and we can now we can actually uh change the like stored circle color to be the correct it doesn't show up here let's go to the ring base copy it from here put the start circle and paste the color there so it's gonna be the same color as the like filled part of the ring okay so now we are basically ready to start actually building the like second state and before we do that actually i will just color the different parts so you see what's actually happening in the animation so just the moment [Music] all right so these are all the sections that we will be moving in the animation and this is the s apparently is this is an extra section we can we can remove this one we don't need it we just need the final section and then all of these will be animated to move in there so now that the like initials that is set up we can actually just copy the whole component or it's not actually yet a component but we will make it into a component in a moment and now or actually i missed the step jesus christ this is i said this is complex so so this is a really important step hear me out so figma apparently is uh stupid about the rotation or i don't think it's stupid but like it works in a way that like makes our life a bit more complicated so pay attention to the rotation amount once i start rotating this as you can see when we go like this it goes like the negative number increases until we hit 180 there boom it switches from negative to positive and that's the problem because if we rotate this all the way here we would expect it to just animate all the way around but no because it reaches the positive all it's gonna do it's gonna animate from here to blank here we don't want that so how do we fix that to get around that we need to wrap all of the sections that need to turn more than 180 80 degrees into another frame so before we copy this we need to like find out what sections need to turn more than that and the leading leading section is one of those so now let's check the second one as you can see now it's zero and when we start rotating it it's minus minus minus but there you see we need to go more than 180 so that needs to also be wrapped in a frame let's check the third one see oops this one start rotating it and if it [Music] it goes exactly 180 so then it means that well we kinda want to [Music] make it or put it into the wrapper frame let's see let's let's put it in and let's see how it will like behave but these ones should be okay so we need to select this one this one on this so the first three and then wrap these in a frame and let's just call this like a rotation booster and now we are ready to copy the whole component and turn these into the start state and into the end state so let's begin here we can do these simple ones first so no actually it's like the correct component uh do these first because they are the easiest ones they don't need the extra frame so all we need to do you can just hold shift and move them here select the next one hold shift and keep rotating it until it's on top of this section and now we get to the rotation booster so let's start by rotating the rotation booster and we want to make sure that it's like the last negative value possible so it's it would be 179 in this case and then we want to go one by one move the each of the sections inside the rotation booster into their final location so here the last ring section is off by one degree so we can just crank it to the last the last remaining amount and when they are inside the frame it doesn't matter that the angle goes to positive apparently it still works so we're gonna go with that and now that the that section is in place just do the remaining rotation for i mean just rotate the remaining parts until they are on top of or in between these states and now for the leading section this will also almost nicely align but because it's slightly shorter we don't have to rotate it like to the top like all the way to the hot top just make sure to align it with this edge so zoom in a little bit and let's align here should be okay and now we are ready to like i mean we're basically ready here but all we need to do is just change the colors here so you can see what's going on so let's start from here and it's the subtract layer change the color to this one and can we just select all of these background color background color like so and now do the same for the other like state station booster substract layer go here these ones should be able to just do this and do this moving on this and do the same please change no background color and there we go now you can see two different states and now we are ready to turn these into components but there's just one like drawback into this so you know that smart animate works by looking at the layer names and will only animate if the layer name is match so what we need to do is to name the layers like we need to have same name for both of these otherwise it's not gonna animate it's just gonna fade between the two components so what i like to do is because it's roughly like going from zero to like 79 in this i'm gonna be using 79 percent and as you saw in the intro so i'm going to be doing from 0 to 79 and i'm gonna do apply the same name to this one as well so from 0 to 79. like so and then we can create components from both of these as you can see and now that they are components all we need to do is just go to the like assets panel and drag in the progress ring component let's say let's align it in center let's duplicate this frame and select the progress rating component and go to the instance menu and here you can see the names are the same so you can't go by the name but thankfully figma gives us this little like thumbnail preview so we can see which one is actually which so it's easy to identify okay this is the end state and now that if everything went correctly all we need to do is go to the prototype connect this here on top now guys use smart animate let's do this out let's do one like one second transition and then also create a connection back to this so we can switch between them easily on top and smaller smart animate ease out one second okay let's see click yeah it works amazing although as you can see there's this like you can see the background color kind of bleeding through if you uh if you use the figma mirror phone app this won't be a problem because it's like running in native resolution so it doesn't spill out that much but here because it's there's less pixels to go by so the yellow will bleed through a little bit so there is a fix i mean a way to fix this or at least make it a la slightly less like obvious on like web prototypes if you're again if you run this on the figma mirror app you won't be noticing it it's like maybe if you or know what you're looking at looking for you can see that but here uh on the web prototype it's pretty harsh so to fix this i find a simple way to just add uh go into the component and let's script the design and choose the ring base and add a stroke to it which is the same color as our like background for the ring and then make sure it's inside and let's see like 0.5 and then do the same one for the other one so ring bass add a stroke make sure the color is the same as this and put the width to 0.5 it will add this slightly ugly like stroke to this but let's see if it fixed the prototype yeah it's a lot less noticeable now so that's one way to fix that i know you also probably saw the animating numbers in the intro of the this video and if you want to know how to make that one make sure to subscribe because in the next video i'm gonna be showing you how to make these animated numbers so subscribe as you saw though this wasn't the simplest component to build but thankfully you don't necessarily have to build it on your own all you need to do is follow the project link in the description and copy the component from there into your own project sweet right and also on a side note would you like to see me build a figma not a component but a figma plugin that would automatically generate a component like this i think it would be pretty interesting but what do you think let me know all right that's gonna wrap this video i hope you liked it if yes then please hit the like button and also consider subscribing if you have any questions you can leave those in the comment section down below and also don't forget to check out the project files from the video description and as always i'll see you in the next video bye bye stop please make it stop stop thank you also this stop

Channel: Full Stack Designer

Views: 6,727

Keywords: Programming, design, full stack, android, ios, figma, tutorial

Id: mROZbxbdL_k

Length: 29min 42sec (1782 seconds)

Published: Tue Oct 27 2020