How to create Loaders and Loading Animations in Figma

everyone uh it's been a little while since i lasted my last video but um yeah i've been really busy with work and i've been working on this little project for a while um it's a bit of a mess but uh i wanted to get out this video out sooner and not leave it much longer so this video is around loaders and how to create loaders in figma so that's kind of like if you're waiting for a screen to load you've got that little uh spinning icon perhaps uh just to indicate that something is happening something's loading um and it's just a visual representation of that so you don't think that the screen is frozen so they usually have quite a lot of movement so you can see if there's a any issues with the app performance and if it's stalling you know uh it's either loading something quite chunky or it's actually struggling and you probably need to reset the app but um yeah so what i've got is i've got a load of different examples here and we'll go for each of them this just a few few different ideas i tried to get quite creative with it um but first of all we're just going to start with a basic loader so if i just load the prototype for that there'll be a lot of loading on prototypes so here we can see it's just a simple loader and it's just going around in this circle so if we go back to our figma file we can have a look so i've got two of these and there's two options of doing that um this animation um exactly the same outcome but two different ways of doing it so the first is that i've got this um kind of circle here and it's got an angular gradient on it and all i'm doing is rotating it by 90 degrees and you can see we it doesn't go above 180 degrees in figma so it goes down to minus 90 after 180 instead of up to 270. and if i press shift e we can see um how these uh are animated so after a delay of one millisecond it will change to the next one and we're doing it linear because we're having it go through all of these so we don't want to have a curve because it feels a bit stally um and i'll set it to 40 milliseconds between each one which is quite slow and so that we can have this nice slow transition animation sorry you could speed that number up and you could speed up on all of them so you can make it 150 and then it would go twice as fast or you could make 600 and go twice a slight so that's how you'd create that um and we've got the same one here but this time if i click in go back to design and we look at the rotation we can see it's actually staying the same across all of them so how does this one work well it's actually in the gradient itself um if we have a look you can see the gradient starts here if i close this one the gradient starts at 90 degrees and this one at 180 and as you can guess the same there and this is the exact same um animation setup as this one so that's really easy to do to create this kind of shape all you have to do is press o draw yourself an oval you'll see this little um circle here you can pull this in pull it into the center like so whoops and you can mess around with your circle from there so we can bring it like this or we can bring it all the way around so it's just a really nice tool from from your over you can just build lots of different kind of shapes using um sweep and ratio here so you can have it like that it's got nice snaps at um standard angles so let me hold down shift it does kind of incremental so you can build it like that and then if we go back to our design you can apply radial gradient onto that or an angular sorry that's what we probably want and if we just make that a red and that also the same red but we'll make that zero percent on the alpha we've now got um this nice gradient here and as you can imagine that would work quite nicely as a loader so that that's how you make those and then i'll just kind of group them into components and made them component variants so that i could load it into here okay so let's have a look at the next one this is completely different um what i'm gonna do is i'm just gonna play it and explain it afterwards so yeah this just kind of um you could use this for something other than a loader it's not it's not amazing but it's just kind of a cool little um way of using a wavy line as a kind of a loader in this case or you could do it for something else you could slide right down and just add some nice details to a website perhaps some animation whatever you want really um and this is achieved by creating a line like this um and then this circle is a mask and as you can see that line's quite long and here you can see it's now at this end and if we have a look here we've got a one millisecond after delay so after a millisecond it will transition to this one over 400 milliseconds and linear but on the way back it's instant so you've just got to make sure that even though the line is at this end when it's at this end on this one um that this exactly matches this one so that instant transition you don't notice the line jumping or anything it just instantly replaces back to there so you can do a transform of this line going that direction and as soon as it gets to that point and it perfectly matches this one we can instantly snap back to it and do that again and it just goes around in a circle like that so how did i create this wavy line well it's quite easy and in my plugins i've got this wave and curve plugin and you can just download this from figma community and it's called waving curve and you've just got a load of different settings here make that zero make that 10 so that's variation and then i don't know that's not about 10 as well and you can just make really cool things like that so if we make that uh one there's no variation at all they're uniform and let's create so that's the length between the curves and the amount so let's make that 100 and that's the height and you've got the number of waves here as well so if you make that 100 it might be too many 30. make that ten not that one make that one ten there we go so you can kind of mess around and create your curve like that and you create it and it just drops it in which is really nice um and it's a stroke so you can go through and do anything you want to do with a stroke really which is really cool so that's how i created that so the next one very similar to the first one it's this time it's that kind of loader where the the circle kind of moves around and if i load this one so this is a really common loader that you see in loads of uis and and essentially it is just a circle rotated around and if you want to know how to do a quick rotation of objects in a circle it's quite easy um the way i did it in illustrator you can adjust the um rotation point of rotation so you could take this circle you can move its rotation point down here and you can rotate it around that um i haven't found a way of doing that in figma yet so if you know a way let me know in the comments below that'd be really helpful but the way i've achieved this is all i did was i created a naval let's make that 24 by 24 which it's already done and then duplicate it create another one let's move them 100 pixels apart and then all i'm going to do is group that so now we know that the rotation point will be between the center of these so all i have to do is copy it so i've pasted i've created duplicate there in fact let's do it that way yes so you can see there's only one there and if we go to oh it's duplicate that's it go to command d duplicate so we've got a copy there you can see there's a copy and then all we have to do is rotate it i don't know 20 degrees 20 probably wasn't enough let's make it 35 degrees and duplicate and 70 and just make sure they are all centered together and you can create it that way so that's a really really nice way of creating rotated objects um and then all i'm doing is changing which circle has the color so as we go around circle changes and the other one changes back to gray and i'll just load these up and we're doing a smart animate so it nicely transitions between them and we're doing it linear again because we're moving through all of one animation so we don't want to have it kind of stumble and stall between them and after a delay we return back to the original and it's an infinite loop so that's a really easy one this one's quite cool this is a bouncing ball and it uses a mask so let's load this there we go so we've got a nice little animation where it kind of uh at the peak of the animation it stalls and then speeds up as it drops and speeds up as it comes through and it's also being masked so it looks like it's going through a hole and this is just a squashed overall with a gradient on it so let's have a look how you create this one so what have we got we have got three parts so we've got this object here which is a rectangle with this ellipse and let's cut it out so we've got if i just duplicate that over here but here we go if i just duplicate this over here we can see it's just got cut out there and then we've got this whoops let's just get rid of those as i say this oval here which sits perfectly on top like that and it's just got a linear gradient on it so it looks like uh it's getting darker so it feels like it's it's potentially a hole there um and actually i take it back we're not using a mask here what we're doing is we're literally just layering um the objects in a particular order with the hole at the back so that the ball can go over the the whole air so if i hide this one a sec you can see the ball is definitely in front of that layer and then bring the front back in which is this object here and we can see that it's not masking it it's just literally the ball is going behind it and then the animation itself is quite simple it is essentially an ease in and out which looks like this and then all i've done is i've extended the handles out quite a bit so that it really slows down that transition at the top and the bottom of the animation so it moves quite quickly through the center so it ramps up quite a lot so the ball will move up and down really quick but as it reaches the pinnacle it will really slow down as you can see it really slows down here and let's have another quick look at that there we go so that's that's a really really simple loader um some apps that do things like this as their loader are i think the moneybox app does it and they just have a load of these kind of next to each other and the ball goes up and down at different times so that's quite cool so if you watch my other video on how to create a 3d cube which i'm not going to go into in this video um i will try and add a link above or just um search how to make a 3d cube in figma or just look through my channel you'll find it quite easily and essentially it's just made up of these three parts so you've got to keep that and this animation is kind of like a fake 3d animation so we've got um all our different cubes here which are grouped so if i just hide some of these you can see it is a cube and then we're just stacking a few of them together and then we're moving them around in 2d space but it kind of looks like 3d which is cool so it's like an isometric view um and we're getting this kind of 3d styled loader here so let's load this one so yeah this one feels like it's a load of blocks just pushing each other around but really it is literally just some 2d shapes um you can see some slight issues where the alignment's not perfect you can see slight gaps maybe you won't be able to see that but i can um so it it takes a lot of time to line this up correctly so this is probably the harder one of the harder animations to create um but if we have a look at the transitions again we're doing the after one millisecond delay and we're doing it linear because we're doing this as one animation um so we want it to be linear and we're doing that transition over 300 milliseconds between them so that's a fun one to play around with um i had another i got another one with some blocks and let's have a quick look so this one is transitioning blocks together um but it's also scaling it so it looks like it goes down into one block i actually wanted it to do a nice uniform scale so it would come down to one block size and feel like all these blocks are created in one block but it didn't quite work as intended um due to the limitations of figma but it's another quite nice um idea for a loading animation and i don't think this would be in too difficult to make in css um i don't know developers might disagree with me on that one but um i've seen it done i've i've seen this created purely in css so it is possible yeah uh all we're doing here is you can see there um off the canvas here we just have the one and here we have all the cubes together making one cube so we're just transitioning between them and that's how that was created um last last couple these are just some kind of standard loading bars really reload this one so we've got a nice fill and then uh it's pulling the back up so this kind of just like a a nice little loading animation and the other one similar but it kind of slow slowly ramps up and then speeds up towards the end and also it doesn't pull it up this way so how do we do this well again this is quite easy we have a look what we've got here we've got a mask and what we're doing with that mask is if we look at this one that mask is uh so this stripey object is made up of loads of little uh rectangles all together like that and the mask is just creating the one shape from it so it looks like a kind of loading fill and we've got this rectangle here which is the background so it's got a little gradient on it so it kind of looks like it's inside of it and then we've got the rectangle for the background um and the masked object is it's just been squashed so what we're doing really is animating this object here and that is our fill and the way we've done the curves on this one is we've done an ease in and out so from this one it will do a nice ease in and out to this one and then again a nice ease in and out to this one so that's the filling here and then it uh emptying into this one on this one quite similar after a delay of one millisecond we're doing a custom one so it slowly starts out and then it ramps up really quick and then it's got a nice little ease in and out at the end whoops and so yeah just play around with your curves and that's how you can get these really nice animations so that's just a few different um loading animations i've come up with um let me know if you want me to share this file i can share this publicly um just comment below and if i don't know 10 people ask for it then i'll make it public and you can do whatever you want with it um let me know if there's any other loading animations you would like to see if you'd like to see some other videos that's certainly possible as well um make sure you like and subscribe as well that really helps the channel it's been growing quite well the last week or so but um i'm hoping to grow it quite quite a bit bigger to make me want to continue making the videos so the idea is to share design knowledge with the community um but it's quite a lot of work and i'm i've already got a full-time job so squeezing this in as well is quite quite tricky so it's good to see it's helping people so let me know if it's helping you and i'll continue doing them um so yeah thanks for watching and i will see you in the next video

Channel: Will Brett Design

Views: 123

Keywords: Loader, Loaders, Loading animation, Figma, Figma tutorial, figma loader, figma loading, figma loading animation, figma loader tutorial, figma loading component

Id: J6MSuRvi17M

Length: 20min 11sec (1211 seconds)

Published: Thu Dec 09 2021