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
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.
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.
Learn how to make an icon animation in Adobe After Effects
Show-off your icon animation on your phone for your team, clients, or stakeholders
Build a portfolio-quality showcase UI Animation
Export your assets for hand-off to engineers