Easy Lottie Animation with Figma & Lottielab - Complete Step-by-Step Tutorial

[@JohnathonRushman]

So inspiring! Your designs always have a way of uplifting the spirit. Thank you for sharing your creative process and for being such a positive force in the design community

[@DesignXstream]

Glad you found it helpful... Cheeers! ✌🏼

[@archanasarang7377]

Very helpful tutorial.. thanks👍

[@DesignXstream]

Glad you found it helpful... Cheeers! ✌🏼

[@olegslemnevnek5142]

omg! Thank you man!

[@DesignXstream]

Cheers ✌🏼

[@ahmedyahya3593]

Amazing video!! I hope Lottiefile have some small courses to make some coll animations.

[@DesignXstream]

yay! Glad you liked it! Cheers ✌🏼

[@minnn2506]

Thanks for this walkthrough! Does it have 3D layer? or Fake 3D like 2.5D layers?

[@DesignXstream]

It doesn't support 3D but you can always use fake 3D like 2.5D animations. You can see some sample of these on the examples page on lottielab's website.

[@updates4043]

Awesome

[@DesignXstream]

Yay! 🙌🏼

[@Paul_Promise]

How can i export my animation to Figma

[@DesignXstream]

You can export it as a GIF then import it back into Figma.

[@Paul_Promise]

@@DesignXstream wow okay thank you 😊

[@rayhankessal6976]

Nice thanks

[@DesignXstream]

Cheers ✌🏼

[@allenoluyisola4522]

nice one

[@DesignXstream]

Cheers buddy ✌️

[@JessieTraslavina]

Good 😊

[@DesignXstream]

Cheers ✌️

[@prasanthwarre]

allows free to export in Lottie?

[@DesignXstream]

Yes it does!

[@glorympamah2970]

Hi, so how do I take or export the Lottie lab (animation) file back to Figma please?

[@DesignXstream]

You can convert it to a GIF and use it on Figma.

[@Thaissa81]

Do you know how to make a loop just in a specific segments of frames? For example: the animation plays oned from 1 to 24 a from 25 to 48 plays in loop (infinite loop just this segment)

[@DesignXstream]

As far as I know there is no way to do that. In such a case you might have to make 2 lottie files and then through code hide animation 1 after playing once and let the animation 2 in background keep repeating.

[@Thaissa81]

@@DesignXstream I think so too, because I saw in lottie webdite that you can make segments for loop specifications and then share this info with developments, then they can use it for coding.

[@DesignXstream]

Yes you are right, there should be a way to achieve this through code where you play it once and then loop a startFrame to endFrame.

[@Thaissa81]

@@DesignXstream I think lottie implemented a free tool for optimize the json and from there you can code the segment to configure the play

[@DesignXstream]

@@Thaissa81 which tool is it?