A practical walkthrough of bridging Figma Smart Animate prototypes to production React code using dotLottie and Framer Motion. The core insight is treating the Figma-to-code animation handoff as two distinct problems: preserving complex Figma animations via dotLottie export, and handling interaction logic with Framer Motion. Covers the LottieFiles Figma plugin export pipeline, setting up the @lottiefiles/dotlottie-web WASM renderer with canvas, controlling playback from React state, the canvas stacking pattern for multi-state animations, and known export pitfalls like nested component states, text animations, spring easing approximation, and frame rate mismatches.
Table of contents
The two problemsThe Figma → dotLottie pipelineSetting up @lottiefiles/dotlottie-webControlling playback from React stateWhere Framer Motion takes overThe canvas stacking problemWhat breaks in the Figma exportWhen this pipeline makes sense22 Impressions