Creating a Processing / Progress / Loading Bar animation in Figma

so hello again guys today we're going to make a simple loading animation using figma like this one so it has like uh two versions of it so it has a slow paced one and then a fast paced one but it's uh it's the same animation so let's start so first we're going to make a frame for this one it is just a square frame let's do it 1 10 24 by 10 34 a square frame then let's create a square and let's say like a color so we'll have i think let's make it different like a red one yeah i think red is good and then we will make it a angular angular gradient so first you have to select a color and then click this one and make it an angular gradient so let's create our circle so we'll have the first circle here let's change it to a different color so you can see what i'm doing so let's just align this all of them into the art board properly and then the second circle like that one let's get this so as you can see we have now two circles i just align it properly again just to make sure and then we will click this one and subtract selection there we go then last thing the last thing we will create is a another circle so this and another circle will go to this dead center here so it will be the head of the loading loader so we'll just fit it in there making sure that it fits nicely i think that's good you know make it the same color as your base color here so it's the red one like that so what now we're going to do is we're going to group the red things let's group them up and make them a different layer name called loader then this one will have oh wait this is this one we'll make this one as a mask so let's call it mask mask this is mask what i did there is i just right click it and use this mask as you can see we have now our loader so this looks good for me and then we're gonna create three more additional frames one two and three i'm just holding alt i'm gonna click i'm just clicking here and holding all alt to duplicate it okay so next we're going to rotate them we're going just going to select this one we're going to check if the loader is selected there i'm just going to rotate it quarter by quarter increments so there's four rotations there there we go and there the last one there so this will be in a loop guys let's just prototype it and give it an interaction of while hovering and we're gonna click this there's a plus sign now then click this to there click and drag while hovering and essentially we're gonna duplicate it there and there same thing while hovering and the last frame we're going to put it back there while hovering i'm going to move this one so you can see the wireframing of it there i think that's all let me just check again over hover hover hover okay so let's just ensure that the smart animate is linear okay so this linear then linear and linear and then we will just so it goes like that so this is the slow version of it so what's what's happening here when you do the mouse like this it's loading it without delay because it is a on tap interaction so while it is on tap if you move your mouse here it's moving like this it's moving faster so if you want two versions of this one you just have to just play your mouse there and then you you would screen grab this or scream capture or if you want the faster version you just do that like this i prefer the faster version of this one so that's it guys i hope this is informative and i will have this file available in the under description below so that you can copy it and reference it for your design and this this is actually easy to make and you can have other kinds of masks here not just circle but also squares rectangle triangle and just use your imagination whatever whatever you want so so that's it i hope you like this video and consider subscribing if you have learned something and stay tuned for next other figma videos so see you soon and have a good one

Channel: totopc

Views: 9,380

Keywords: figma, loading, animation, circle, gif, prototype, simple, smart, animate, processing, how, to, in, make, easy, progress, bar, create, using

Id: H0GfNc2v-lI

Length: 6min 18sec (378 seconds)

Published: Tue Jan 12 2021