How to Make Lottie Animations: A Complete 4-Part Guide

Welcome to our 4-part Studio Design Guide on how to make Lottie animations. Lottie, developed by Airbnb, is an open-source tool revolutionizing animation with real-time rendering of vector animations. Ahead, we’ll introduce you to Lottie files and guide you through how to use the tool to make complex animations.

This comprehensive guide equips you with the skills to master how to use Lottie and bring your animations to life, making it a valuable resource for animation enthusiasts and businesses seeking captivating animations. Dive into our guide to unlock the full potential of Lottie animations and embark on a creative journey.

Part 1: Understanding Lottie Animations

Here in part 1, we will discuss the benefits of using Lottiefiles for your animations.

Lottie allows our design team and developers to create complex animations that are lightweight and easy to implement. We often create animations within the projects we work on. Some ranging from simple loaders to more complex UX animations. With Lottie, animations can be exported as JSON files, making them easily shareable across different platforms and devices.

To understand how to use Lottie, it's important to have a basic understanding of how vector animations work. Vector animations are made up of mathematical equations that define each element of an animation, like the position, size, and color of shapes. Unlike raster animations, which are made up of individual pixels, vector animations can be scaled up or down without losing quality.

Lottie takes vector animations a step further by allowing them to be easily integrated into mobile and web applications. This is because Lottie animations are rendered natively on the device, rather than being pre-rendered and played back as a video. This means that Lottie animations can be controlled and manipulated in real time, giving designers and developers more control over how animations are displayed and interacted with.

Now you have an understanding of LottieFiles and its uses, we will continue to talk about vector file preparation for your animation in part 2.

Part 2: Vector File Preparation

Ahead, we’re guiding you through how to prepare your files as vectors ready to import to After Effects for creating Lottie animations.

Here we will be using Figma as an example for creating the vector file. But you can use any software that works with vectors like Adobe Illustrator.

To setup a Figma file to support the Lottie plugin on After Effects, follow the steps below:

1. Open your Figma file and navigate to the page or artboard that contains the vector graphic you want to animate.
   
2. Select the vector graphic and click on the Export button in the properties panel on the right.
3. In the Export dialog box that appears, choose "SVG" as the format and select the folder where you want to save the exported file.

Now you have an understanding of vector file preparation, we will continue to talk about importing and animating in After Effects.

Part 3: Importing to After Effects to Create Lottie Animations

After Effects is a popular software used for creating animations, motion graphics, and visual effects. One of the benefits of using After Effects is the ability to export animations to the Lottie format, which is a lightweight and scalable animation format that can be easily integrated into web and mobile apps. To create Lottie animations in After Effects, you can follow these steps:

1. Create a new composition in After Effects and import your vector files.
2. Use keyframes to animate the properties of your design assets such as position, rotation, and scale.
3. Preview your animation and make any necessary adjustments.
4. Install the Lottie plugin for After Effects (if you haven't already) and use it to export your animation as a JSON file.

Let’s continue learning about how to make a Lottie animation by discussing rendering and exporting in part 4.

Part 4: Rendering and Exporting a Lottie Animation

To render and export Lottie animation files in After Effects, you can use the LottieFiles plugin.

1. First, select the composition in After Effects that you want to export as a Lottie file. Then, go to the File menu and select Window > Extensions > LottieFiles.
2. In the LottieFiles panel, select the correct composition if you have more than one in your project. You can choose the settings for your Lottie file, such as the resolution, frame rate, and compression.
3. Once you're satisfied with the settings, click Render to export your Lottie file. You will them have the option to download your animation as a JSON file. Your Lottie animation will also be stored in your online account that was created when downloaded the plugin. You can then use the Lottie file in your web or mobile projects.

Now you’re ready to apply what you learned about how to make Lottie animations to create your own - it’s time to get creative!

Need some more inspiration for your Lottie animations? Check out one we made earlier! Download for free and try it out: https://lottiefiles.com/animations/bouncing-baseball-loader