Exporting Clean Lottie Files from After Effects and Figma

After Effects (Bodymovin / LottieFiles plugin)

Lottie files are exported from After Effects using the Bodymovin plugin (now distributed as the "LottieFiles for After Effects" plugin). Once installed via the ZXP installer, it adds an export panel where you choose the composition to export and configure a few settings that materially affect the output file.

Settings worth paying attention to

• Compress / Minify: strips whitespace and shortens property names in the JSON. Safe with modern players; only worth disabling if you're targeting a very old Lottie renderer that expects the original property names.
• Include hidden layers: leaving this on is one of the most common causes of bloated exports — hidden reference layers, guides, and old versions left in the composition all get exported even though nothing renders them.
• Glyphs vs. outlines for text: exporting text as editable glyphs keeps the file small and text selectable/re-colorable at runtime, but depends on the viewer having (or substituting) the right font. Converting text to shapes guarantees identical rendering everywhere at the cost of a larger file.

Common export pitfalls

• Unsupported expressions: simple expressions like wiggle() or loopOut() export fine, but complex custom expressions often aren't translated symbolically — Bodymovin bakes them into a keyframe per frame instead, which can dramatically inflate file size for long compositions.
• Layer styles: After Effects layer styles (drop shadow, glow, stroke applied as a "layer style" rather than an effect) are not part of the Lottie spec and are silently dropped on export — use the equivalent effects or shape strokes instead.
• 3D layers and cameras: not supported by standard Lottie renderers. Fake the effect with 2D transforms and scale instead of relying on AE's 3D space.
• Nested precomps with time remapping: usually work, but are worth previewing carefully — remapped time inside a precomp is one of the more fragile things to translate correctly across different Lottie player versions.

Figma (via a Lottie export plugin)

Figma has no native animation timeline, so exporting Lottie from Figma relies on a plugin (such as "LottieFiles for Figma" or similar) that interprets Smart Animate transitions between frames or component variants and converts them into Lottie keyframes.

This works well for simple property tweens — position, scale, opacity, rotation, and corner radius — but it's a translation layer, not a native export: easing curves are approximated rather than pixel-identical to what Figma previews, and anything beyond basic Smart Animate transitions (custom paths, complex staggered sequences) generally needs to be built in After Effects instead.

Pre-export checklist