Create an Animated Loading Wheel Component in Figma

hello everyone in today's video we're going to be creating an animated component and specifically we're going to be creating a loading wheel in figma so whenever you use this interactive this animated component in your signal prototypes anyone who's viewing them is going to be able to see this wheel actually spinning let's take a look at how this is done in figma the first step is to create an ellipse so i'm going to press o to access the ellipse tool and then click to create an ellipse circle i'm gonna change the size to about 50 and then i'm gonna remove the fill and add a stroke this stroke is gonna be five or six pixels wide and we're gonna create an arc so i'm first you gotta hover over this area of the circle and you can kind of see this little control over here and when you click and drag it will enable you to do a sweep like this i'm also holding down the shift key to be able to move in 15 degree increments and i think we could do like at this so we have 75 or 270 degrees then i'm gonna go over here and type in 100 additionally i'm gonna go over here to the stroke section on the right side of figma and i'm gonna be choosing round end points so this is the result we get right now next thing we're going to do is create an angular gradient so i'm going to select the arc again and go to stroke click this color and then go over here to create an angular gradient this is what happens now so as you can see uh this creates a gradient that is kind of going from this color to this color but it's kind of being wrapped in a circular way where both of these ants kind of meet in a single point so it goes from this color to this color over the course of a 360 degrees over the course of a circle right the plan is to this area should be completely black and this one transparent right so let's let's actually rotate this so that the final point is somewhere around here and i think we will have to switch the colors like this right perfect also um since they both meet here this color right here is approximately found in this part of the gradient this part of the gradient right here that's not transparent we're gonna have to fix that we're gonna have to make this transparent like this right so you can kind of see that we've achieved a look where it's going from completely black all the way to transparent over the course of 270 degrees the static version of this loading wheel is finished now we have to create a component from this and set up the prototype so that it keeps on spinning how do we do that well first of all we have to turn this into a component so i'm going to select the circle and go over here to click create component right we have created a component called ellipse 1 but i'm going to rename this and call this loading wheel next we're gonna have to create three more variants i'm gonna go here with this loading wheel selected and create an additional variant we'll need to have four in total so i'm gonna press plus here and then once again and we have four variants right we have the default one variant two three and four i'm gonna rename this one to one this one to two three and four and what i'm going to do now is with the second one selected i'm going to expand this frame and then select the actual ellipse within the variant frame then i'm going to rotate that 90 degrees right clockwise i'm gonna do something similar with the version number three where i'm gonna select the ellipse again but this time i'm gonna rotate this 180 degrees and finally with the fourth one i'm gonna do the same but i'm gonna rotate this 270 degrees right so like this you can kind of see we have four steps of a rotation and now we are ready for prototyping so i'm going to go over to prototype and select the first variant like this little circle right here this control for prototyping and i'm going to click and drag it over here and say after delay one millisecond change to property one two change to this one smart animate linear and this is going to take 500 milliseconds next step select the second one and do something similar so after delay one millisecond change to three not animate linear 500 milliseconds this one after delay one millisecond change to property four smart animate linear 500 finally select the last one and do this but connect that to the very first one so we've created a type of loop you also have to make sure this is not on click but after delay as well right 500 milliseconds so we have created a loop of four variants of four states where uh they are automatically going from one to two three four and then one two three four one so it loops and since we used smart animate figma is gonna calculate the in between uh states of for example these two variants which means this circle is going to be rotating from this position to this position at least that's in theory what should happen right now it is time to test our result so i'm going to create a frame like this i'm going to go to assets search for a loading wheel and then click and drag it over here centering that and now we're gonna rename this test screen and we're gonna launch our prototype and see if this works and it does you have a loading wheel that keeps on spinning because we used we used the after delay prototype settings in combination with smart animate and this is the result we could of course speed it up or slow it down depending on how many milliseconds are there right so you'd have to set all of these to either increase the number of milliseconds or decrease it depending on if you want to slow it down or speed it up right so this is the result how can this be used in practice for example we could we could um have a situation where you would create let's say three screens you would have like green number one then you have a loading screen and then you would have screen number two right in the first screen you would have a button you would have a button that will say like start for example or something like that and then you you would have green with a loading wheel that would say loading and then you would have a screen that will say done right so this is a kind of simple process you could you could create a prototype where when a user clicks the start button they will navigate to a screen that says loading with the wheel spinning and then could set that after delay let's say 4000 milliseconds it would navigate the screen where it would say done you could kind of create this loading screen flow for your users so let's test this out how this could be used in practice for example i'm here i click start it is loading and after a while it says that it's done so this is just one of the use cases you could use this loading wheel for this was just an example but in in any case combining smart animation with the after delay prototype feature you can create basically any animation you want as you can see it's quite simple to use and if you'd like to see more animations in figma more interactive animated prototypes let me know by leaving a like and maybe commenting what would you like to see next if you're interested in learning figma and ux and ui design definitely go and check out my channel i do plenty of tutorials on these topics thanks for tuning in and i will see you in the next one

Channel: Mavi Design

Views: 20,859

Keywords:

Id: wjIiwyOP8uY

Length: 8min 47sec (527 seconds)

Published: Wed Sep 21 2022