Member-only story
Creating Lottie animations with After Effects
Animations have become an integral part of the user interface of many modern applications. It would be difficult to imagine apps without any microinteractions implemented. They help convey brand image and personality to create experiences that are loved by users.
As a motion designer, you can create animations using After Effects and Lottie. Lottie is a small open-source, vector-based, interactive file format that can be modified at runtime. It converts vector animations into code and it can be used on different platforms like Web, Android or iOS apps. Thanks to this, developers don’t have to code your motion graphics anymore and you can be sure that the animations are pixel perfect.
1. Install LottieFiles plugin
To start your motion design journey, you need to download the Lottie plugin for After Effects from here:
Once it’s been installed, you’ll find it at Window/Extensions/LottieFiles. You’ll be requested to log into your account the first time you use it.
There are three tabs in the plugin window. The first tab allows you to see a preview of your animation. The second tab displays a list of all of the animations you’ve so far made. The third tab allows you to browse through hundreds of free animations created by other designers.
2. Create your animation
Import from Illustrator
Assume you want to animate a puppy running. To begin, use Adobe Illustrator to create a vector design of your character. Make sure each shape is on its own layer, and that all of your layers are appropriately named. Save your image as an Adobe Illustrator (.ai) file.
