Designing micro interactions with After Effects & Lottie

It is difficult sometimes to find a common ground between iOS and Android when it comes to producing static and animated assets. If you are working with both mobile platforms you probably find this very annoing to prepare two different bundles for each OS. You have also probably thinking how to automate and unify asset production to be more efficient with your work and how to make sure the final result will match your UI designs.

Well, look no further and take a look at Lottie.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. It has been developed by Airbnb design team and it includes a free After Effects plugin that brings you designs to life. If you prepare your assets properly, as a result you get an animated vector .json file that is scalable and compatible with iOS and Android platform.

So, all you need to do is go to Lottie website and download Bodymovin plugin for AE. Once you install the plugin via Adobe Extention Manager, simply put your design into motion in After Effects and export the final animation as a Lottie .json file.

 

With Lottie and AE, designing micro interactions and animated assets becomes super easy and takes no effort from the Dev Team to implement as they proceed with the .json as with any other static png/jpg/svg file.

Hope this helps you deliver beautiful and lively animations to your mobile apps! 🙂