Member-only story
3 paths with LottieFiles to master motion design
Embark on a journey to animate enchanting unicorns using Figma, After Effects, or Lottie’s new Creator tool.

Lottie Creator is finally out of beta. Now everyone can create lightweight animations, ready for handoff, directly from their browser. So this seems like the perfect timing to cover some of the ways we can power-up our designs with motion using Lottie, not only with the Creator but with Figma and Adobe After Effects as well.

Let’s say you need to animate this set of lovely unicorns. From left to right, the purple one just needs to blink their tiny eyes. Pinky needs to say hi with their paw. The last blue one needs to be stretching before some exercise.
Depending on your project’s own necessities, you can create animations from Figma, After Effects, or directly in Lottie through the new Lottie Creator. On this sample, the first animation is plain simple, the second has some complexity but it’s still simple enough to not use a heavy animation tool like Adobe After Effects, as the last one requires.

We will solve the purple unicorn directly in Figma. For the pink one we will use the Creator. Blue unicorn will be solved with Adobe After Effects.
Path #1. Basic animations directly in Figma & Lottie Plugin
In just a couple of steps, the first path will lead us to create basic animations directly in Figma using the Lottie Plugin and some Smart Animate magic.
Step 1. Set Frame & Clean Assets
Open Figma and create a new frame for your animation. In this sample I will set one of 400x400px. This will be the final size of the animation when you export it to Lottie as a JSON file.