Tips on how to create a Lottie loading animation

Able to discover ways to create a Lottie loading animation utilizing Figma? We’ll stroll by means of designing the animated graphic, prototyping it, and exporting it utilizing the LottieFiles plugin. All you want is a free Figma account. In case you’re beginning, here is every thing you must learn about Lottie animations, and if you happen to’re able to get impressed, let’s dive in.

2. Tips on how to create the primary element of the Lottie loader animation​

Step 1

Utilizing the identical device, create a 540 x 110 px body. Add a Fill for this second body and use a darkish gray. The colour just isn’t necessary as we’ll take away it a number of steps later.

Step 2

Maintain focusing in your second body and decide the Ellipse Instrument (O). Use it to create an 80 px circle, make it white (#FFFFFF), and place it precisely as proven within the second picture. With the circle chosen, you’ll be able to maintain down the Alt key to take a look at the spacing between the sides of your circle and the sides of the body.

Step 3

Choose your circle utilizing the Transfer Instrument (V)maintain down the Alt and Shift keys, after which merely drag a duplicate of the circle to the suitable. Depart a 60 px hole between your two circles. When you’re carried out, hold the brand new circle chosen and press Management-D twice. This may add one other two copies of the circle, as proven within the following pictures.

Step 4

As promised, choose your second body and take away the Fill coloration.

Choose this body alongside together with your white circles and switch them right into a compound path (Management-Alt-Okay). Nearly as good follow, you’ll be able to rename it “Loading Animation”.

3. Tips on how to add variants of the Lottie loading animation

Step 1

Be sure that your fundamental element is chosen, and add 4 variants. To make issues a bit much less congested, enhance the spacing between these variants to about 50. To shortly regulate the body of your element set, simply click on the Resize to Match button (Management-Alt-Shift-R).

Step 2

Now it is time to regulate the variants that can make your Lottie load animation. Decide the Transfer Instrument (V)maintain down the Management key, and click on the primary circle out of your second variant to pick out it.

First, change the white with #F4BC00. Hover your cursor excessive fringe of the circle till it turns right into a double-sided arrow, after which click on and drag to make it 100 px extensive. Lastly, transfer this yellow circle 10 px up. You are able to do it manually, or by setting the Y Place to 0.

Step 3

Transfer to the third variant and choose the second circle. Make it 100 px extensive, change the white with #E88900and do not forget to maneuver it 10 px up.

Proceed with the following variant and choose the third circle. Once more, make it 100 px extensive, change the white with #F55A53and do not forget to maneuver it 10 px up.

Lastly, choose the fourth circle from the final variant. Make it 100 px extensive, change the white with #D5001Cand keep in mind to maneuver it 10 px up.

4. Tips on how to prototype your Lottie loading animation

Step 1

Now that your design is full, it is time to prototype it. So change from Design mode to Prototype mode.

Begin with the Default variant. Choose it and easily drag a reference to the following variant. Do not trouble to arrange the Interplay settings for now.

Step 2

Proceed so as to add interactions between every consecutive pair of variants—second to 3rd, third to fourth, fourth to fifth—after which from the fifth again to the default one.

Step 3

Choose one of many interactions and press Management-A to shortly choose all of them.

Change the Set off to After delay and decrease the Delay to 1ms. Select Good Animate for the Animation and Ease out and in for the Curveafter which decrease the Period to about 300mshowever be at liberty to play with this worth.

5. Tips on how to create the Lottie loading animation

Step 1

Go into your Property and seek for the Loading Animation. Merely drag it inside your purple body.

Step 2

Just remember to’re nonetheless in Prototype mode and add a Movement in your purple body. You may perceive in a number of moments how this Movement helps us export the Lottie loading animation.

6. Tips on how to preview and save the loading animation as Lottie

Step 1

With a purpose to save your Figma animation as a Lottie loading animation, you will have the LottieFiles plugin.

Press Management – / to open the Fast Actions menu. Choose the Plugins & widgets part and seek for the LottieFiles plugin.

Click on the Run button so as to add the LottieFiles plugin to Figma.

Step 3

First, you may have to arrange an account at LottieFiles. When you’re carried out, you’ll be able to open the LottieFiles plugin and choose the popular Movement from the dropdown menu. On this case, there’s just one, so you will not have a lot hassle discovering it, however for a bigger design, it is a good follow to call your flows.

Step 4

As soon as chosen, you may get a pleasant preview of your Lottie loader animation. Clicking the Save to button will save the animation in your Tasks folder at lottiefiles.com.

Until you are a millionaire who can afford numerous subscriptions, remember that there is a restrict of 10 animations earlier than it’s important to pay to avoid wasting your Lottie animations. Do not make the identical mistake that I made, and make sure that the animation you select to avoid wasting is the ultimate model. And no, deleting a saved animation will not reset the restrict.

Congrats! You are carried out!

Right here is how your Lottie loading animation ought to look. I hope you have loved this tutorial and may apply these strategies in your future tasks.

Be happy to regulate this closing Lottie loader animation and make it your individual. Yow will discover some nice sources of inspiration at Envato, with attention-grabbing options to create your loading animation for Lottie.

Wish to be taught extra?

Now we have a great deal of animated graphic tutorials on Envato Tuts+, from newbie to intermediate stage. Have a look!