Shop Workshops Blog Templates About Bundles Login

How to export using Bodymovin to Lottie from After Effects

 

Click here to download the source files and follow along

I meant to record this tutorial like 6 months ago. Then I did record it, but it was for my free UI Animation Fast Start course. Anyway, long story short, I just recorded the complete workflow as a standalone tutorial. You should check it out.

This Lottie workflow is a complete game changer. 

(In the video I use assets from a previous blog post on how to animate an icon in after effects. You can check it out here).

Here’s the general idea 

A couple years ago, Airbnb released a tool called Lottie. It allowed engineers and developers to use JSON files exported from After Effects. 

I know what you’re thinking: what the heck is a JSON file, son?

That’s what I was thinking! 

I mean, I still have no idea what a JSON file even is. All I know is that it’s a magical file that you can hand to your developer and he, she, or they (respect the pronouns) can drop directly into a website or digital product. 

To restate: this allows you to take your animation from After Effects and put it directly in a product or website.

How rad is that?

Caveat time: check with your engineers FIRST before you hand them magical files. Some teams can’t use it. So, check first. 

Here’s how it works 

You need to install a plugin called Bodymovin (they did not consult me on the name). You can get it from AE Scripts, or from GitHub

Then, once you’re in AE, you can load up the plugin and export your file. Like a rockstar. 

Another caveat: Lottie supports a lot of After Effects features but not all. For the list of supported After Effects features, go here

To preview your magic JSON file, you can point your horse towards lottiefiles.com. They’ve made an insanely cool preview tool for the web. You can also download their tool as an app for iOS or Android

I use this tool to debug, mostly. And to show folks what the animation looks like on a real device. It’s super cool. 

I show you all this in the tutorial video.

Being able to deliver high fidelity animation assets directly to engineers from After Effects is a real game changer and a great skill to add to your toolkit.

Happy prototyping,

Issara

PS If you’re on a deadline and looking to prototype your projects at higher fidelity, check out my rapid learning UI animation courses for UX/UI/product designers.

🔥 Save 15% on any UI animation course or bundle on uxinmotion.com

Join my mailing list to receive a one time coupon, plus the latest news and updates from me. Don't worry, your information will not be shared.

Click here for coupon

You're a designer, you get paid to have opinions. Share them! 👇🏽

Close

🔥 Take 15% off your first purchase

90% Complete