cs/15 · design systems & figma plugins · figma community

Lottie Engine

Figma to Lottie Converter Plugin

figma → lottie3 export targets

install from figma community
Lottie Engine Figma plugin
fig. 15.0 — lottie engine

Problem

Animation handoff from Figma to development was too manual. Designers could prototype motion beautifully in Figma, but turning that work into dev-ready Lottie files meant extra tools, cleanup, and fidelity loss.

Role

I designed and built the plugin concept, translating Figma prototype behavior into a workflow that outputs usable Lottie JSON for developers.

Constraints

  • There was no native Figma path for exporting prototype animations as Lottie.
  • The output had to preserve timing, easing, and transition intent.
  • The export needed to stay compatible across web, mobile, and motion workflows.
  • Plugin support had to start with a practical subset of shapes and animation behavior.

Process

I mapped where animation fidelity was getting lost in the handoff and focused on the most important bridge: reading Figma prototype behavior, interpreting motion intent, and exporting that behavior into a format developers could actually use.

Decisions

  • Built a frame rendering engine: the plugin reconstructs Figma frames with their visual hierarchy intact.
  • Captured prototype animation properties: easing, delays, duration, triggers, and transition logic are translated into Lottie-compatible keyframes.
  • Started with core shape support: rectangle, ellipse, and star coverage created a practical first release.
  • Exported directly to Lottie JSON: files are compatible with Lottielab, Lottiefiles, and After Effects workflows.
  • Defined a clear roadmap: groups, nested frames, vectors, gradients, and smoother rotations were identified as next steps.

Outcome

The plugin created a far more direct path from prototype motion to developer-ready output. Instead of manually recreating animation behavior, teams could carry more of the original design intent into implementation.

Impact

  • Eliminated manual animation conversion workflow between design and development.
  • Preserved animation fidelity by directly exporting from Figma prototypes to Lottie format.
  • Reduced handoff time - animations go from prototype to dev-ready files in seconds.
  • Universal compatibility ensures animations work across web, mobile, and After Effects workflows.
  • Maintained exact easing curves, timing, and transitions as designed in Figma.
Link to Plugin