Lottie is an open-source format originally developed at Airbnb that renders vector animation in real time. It’s the most practical way to get genuine animation into a web page or app without the weight of video.
After Effects is where most Lottie files are actually made. Here’s the workflow, end to end.
What Lottie Animations Actually Are
Start with vector animation, because that’s what Lottie is built on.
Vector graphics are defined mathematically — the size, colour, and position of every shape described as values rather than pixels. That’s why they scale to any resolution without degrading.
Lottie extends that to animation, and adds the part that matters for products: rather than being pre-rendered and played back as video, a Lottie animation renders natively on the device. That means it can be controlled and manipulated at runtime — paused, reversed, triggered by an interaction, or recoloured to match a theme.
The practical consequence is file size. A Lottie animation is typically a fraction of the equivalent video, which is what makes it viable on a landing page or inside an app build.
Step 1: Prepare Your Vector Files
We’ll use Figma here, but any vector tool works — Adobe Illustrator is equally fine.
To export a Figma file that will work with the After Effects Lottie plugin:
- Open the file and navigate to the artboard containing the graphic you want to animate
- Select the graphic, then click Export in the properties panel on the right
- Choose SVG as the format and pick a destination folder
A note worth knowing: clean up the vector before exporting. Ungrouped strays, hidden layers, and unnecessary masks all cause problems downstream, and they’re much easier to fix now than after import.
Step 2: Import, Animate, and Export
Lottie’s advantage — lightweight and scalable, integrating easily into web and mobile — only holds if the animation is built with the format’s constraints in mind.
The process:
- Create a new After Effects composition and import your vector files
- Animate the properties of your assets — position, scale, rotation, opacity — using keyframes
- Preview the animation and adjust the timing until it reads correctly
- Install the Lottie plugin for After Effects and export the animation as a JSON file
That JSON is the deliverable. Hand it to a developer and it drops into the product directly.
What to Watch For
Lottie doesn’t support everything After Effects can do. Complex effects, some blending modes, and expression-heavy work often won’t survive the export.
Build within the format’s limits from the start rather than discovering them at export. Keyframed transform properties, shape layers, masks, and trim paths all translate reliably — and they’re enough for the overwhelming majority of interface animation.
Preview the exported JSON before handing it over. What plays correctly in After Effects and what plays correctly as a Lottie file are not always the same thing.
Conclusion
Good animation on a site or in an app holds attention and improves how the product feels to use. Lottie is what makes that affordable in file-size terms, and After Effects is where the work actually gets made.
The workflow is straightforward once you know it: clean vectors out of Figma, keyframed animation in After Effects, JSON out through the plugin.
This is the pipeline we run on client work, which is why our Lottie files drop into a build without a round of fixes first. Clean vectors in, tested JSON out.
Want Lottie animation produced properly for your product? Get in touch.