Animated Progress Circle in Figma

hi everyone and welcome to today's video today i'll be showing you how to create an animated progress ring in figma as you can see when i click on this you can actually see that my progress string is actually animating and goes all the way up to 100. now as of today there is no director of doing this in figma but i found a hack to do it and to make sure it actually animates progressively so that wasting time let's get into today's video [Music] all right so this is the this is gonna be it so i'm gonna call our project ani method progress ring or someone also call it an animated progress bar doesn't matter we're going to insert the frame the size doesn't matter just make sure it's actually just long enough all right so before we do anything else we're going to insert some ellipses so we're going to insert some two ellipses we're going to be using for play animation so i'm going to change this to give it an orange color something orange like that all right looking good then we're going to make use of a plugin i've installed it's called the mov plugin we're going to use it to just do some little skeuomorphism i just love that effect just make sure it's set to this bump then we're going to apply then when we do that we can actually get rid of this actually before we do let's change this to gray it's actually a duplicate we're going to change the original to gray and we're going to apply another move let's just go back to the mouth plugin then apply another schema for them all right and there we go we have another color and just click apply all right that's it then we can get rid of this so we're going to make use of this as our play and restart buttons just make sure to position them right there so these are going to be very vital right just want to make sure they're centered then we're going to make use of our iconify plugin to insert some icons so we're going to have an icon for restart so that would do and i'm going to have one for play okay so i'm going to make use of this just drag it in there right so these come when they actually inside frames we can just drag them out of the frames they come in we don't need the frames that they come with then get rid of that all right so i'm gonna place this right above there so just gonna scale it up a little bit right then we're gonna center it right there so blackwood i'm gonna place this right at the center right that we do we're going to give this a white color right so next to the most interesting part we're going to work on our progress ring because of our ellipse tool here to create some ellipses these are going to be useful for our progress ring then we're going to zoom in and then just make sure to click on this arc and then just drag right then we're going to drag and then change the ratio i want to make sure it's actually thin okay something like that then we're gonna close this sweep just make sure to close it okay so we're gonna do we're gonna give this a black color all right so next we're gonna duplicate this by holding alt on our keyboard and then we're going to go back to where there is the sweep here and then we're going to make some changes just make sure to drag the sweep until it's at 50 percent actually negative fifty percent right so that would do and i'm gonna give this an orange color just make sure you use the eyedropper tool i'm gonna give it that inch all right then i'm going to give it a rotation of 90. okay so that's looking good i'm going to place it onto the other ellipse just make sure to place it until it actually fits let's just zoom in so making use of my direction tools right so right there it actually fits very well just make sure there is actually it actually fits perfectly right so there we go that's gonna be our first part so i'm gonna make use of our rectangle tool here sorry i mean the rectangle tool but before we do that we're gonna duplicate this so just let's first duplicate this just select both of these ellipses then we're going to duplicate this click alt right so we need duplicate copy so make sure use of this rectangle tool then we're going to cover we're gonna cover our shape here just give this rectangle to a white color sorry and then just make sure the rectangle tool is set bring it to front okay bring it to front just make sure to give it a white color sorry about that i want to make sure that everything is actually just basically organized just want to make sure oh this ellipse structure not within our frames just make sure it's actually within the frame actually it's right below the rectangle tool right so the rectangle tool is actually covering half of it and that's actually how we want it so yeah we're just going to hold it there right so we're going to go to this duplicate we have to estimate and then we're going to rotate this we just want to make sure to rotate this orange by negative 9 just just click negative 90 all right so i'm gonna make a duplicate of this rectangle to have here just hold alt i'm gonna duplicate it then i'm gonna make use of it so i'm gonna place it right below just make sure it's right below this entire shape it's it's important it's actually right below so just select everything and then we're gonna right click and then use as mask right so there we go all right sorry so just make sure to select the entire mask group and they're gonna drag and place it within let's zoom in and make sure that we position it rightly until it looks seamless right so there we go it actually now looks like one circle but you'll get the idea bit all right so next we're gonna make use of some percentages so we're gonna type in so we're gonna start from zero zero percent all right just make sure to increase this font size to 50. make sure and make sure it's actually big i'm gonna make use of the font type i like so much it's called poppins then max man make sure that is set to bolt right so pop in bold looks good all right so we're gonna enter then next is ten percent twenty percent enter 30 40 50 60 70 80 so you can't see that 90 100 percent right and then next just make sure all your text is aligned to center right there we go then we're going to make use of we're going to do more masking just make sure use of this rectangle tool right there then i want to mask this text right so we're going to give our text a stroke then first hide the fill then we just want to make sure that uh just want to make sure only we just want to make sure our text appears just make sure the height is just make sure it fits within right that would that will work right then we're gonna give we're gonna just make sure i put the fill again remove the stroke one need that all right so just make sure the rectangle is set below the text right then right click and then use as mask right so there we go all right so just make sure it's selected enter mask group i'm gonna place that text right in the center right just make sure it's centered all right there we go okay we can just center it like that all right so that's how that's going to be our first step so we're going to duplicate our frame i do that by clicking ctrl d right so in our next frame i'm going to change this text to 50 so just go to your text and then we're gonna just just click on your app your up arrow on your keyboard to just make sure to go up to 50 percent so what i'll do is i'll i'll play with these digits i just go to negative 500. oh that's actually too far straight negative um 350 all right just want to make sure that it's the 50 percent that is visible right so there we go all right so in our second frame we're gonna go to our we're gonna go to where we have ellipse so we're gonna first leave that which is in the mask so just go to what you have as ellipse too and then we're gonna rotate it as you can see but to do it quicker let's just rotate it until it's at negative 90. all right so it's gonna animate until it's halfway right so we're gonna duplicate this again duplicate your second frame all right and then we're in frame three now there is something we'll have to uh work on and be careful about so now make sure when i go to frame three that that uh the the the orange color in the in the mass group actually flips and increases now now it now we need to direct our prototyping we need we need to make it clear to fight know that it's structural rotate going this way what are call clockwise so what what we'll do just go to that inner orange and then just click and just just make sure it's set to negative 91 okay all right so that that that will that's actually gonna be for direction so frame three is actually gonna be for direction so we're gonna duplicate our frame three click ctrl d and then i'm gonna go back to it again and then now we're going to rotate it fully okay just rotate it fully until it's at 90. all right so there we go then we're gonna change our texts just drag it until we have the hundred i'll just go type in negative 600 to see how far it will go all right so that's much better until the 100 appears right so that's looking good right so it's so animation is actually looking good right so next we're gonna we're gonna do some prototyping so we're gonna go to our prototyping mode then we're gonna start from frame one so i wanna make sure that when the user clicks on this i wanna make sure there's an interaction on click wanna make sure that there's a navigation to frame two and then we're going to make sure it sets smart animation now i want that to happen slowly progressively so i'm going to set the timing to 3000 okay all right so that's that's it with frame one so we're gonna go to frame two all right so just make sure to select the frame now inside frame two we just are gonna say after delay wanna make sure after delay of one second actually one millisecond not a second navigate to frame three i wanna make sure that happens um i wanna make sure that actually happens in a smart animation also now that will undertake we're going to set that to 10 milliseconds because i want that to happen very quickly since there is only a slight change in frame three right so that's it with frame three soon it's frame two now i'm gonna go to our frame three and then also gonna add another interaction so same thing after delay i wanna make sure there's only a delay of um one millisecond navigate to frame four just make sure to set that smart animation and also make sure it happens slowly set that to three thousand actually it's better to just say to 2990 okay right that change will happen and then one want to have an option in our frame for certain user clicks on this it actually takes them back to the original frame so when the user clicks on that you take them back to frame one that should actually happen instantly right so there we go that's it so we're gonna test our progress ring give it a second to load right so our uh and it has actually loaded so let's see what happens when you click on play you can actually see there is the animation happening and actually goes on to 100 so when i click on the restart button it takes me back to the first frame and then as you can see it's actually working smoothly so that's actually what i wanted to show you if you if you learned something for history and you liked it just feel free to leave a like and a comment tell me what you thought about the video and if you're new to this channel i encourage you to join the community by subscribing and please make sure to hit that notification bell so that you get updates every single time i upload a new video thank you so much for watching i'll see you all in my next video bye [Music] you

Channel: Create Beautiful Things

Views: 37,539

Keywords: Animated Progress Circle in Figma, figma progress ring animation, figma progress bar animation, figma circular progress bar, figma circular progress animation, circular progress bar prototype in figma, progress bar animation using figma, Circle progress bar figma tutorial, How to make progressive bar in figma, figma loading bar prototype, figma smart animate, figma prototype animation, figma prototype tutorial, figma counter, figma loading spinner

Id: oSSrcfIM1m0

Length: 14min 48sec (888 seconds)

Published: Mon Jan 03 2022