How to make interactive animations with Figma
summary
Live demo shows a working Arcane‑style web playground built entirely in Figma and exported straight to LottieFiles, claiming no After Effects or custom tooling. Workflow uses the LottieFiles plugin to export to LottieFiles in seconds, hosts artifacts on a CDN, and embeds them by drop into code with a tiny snippet. Production stack uses React plus Framer Motion for UI sprinkles while Lottie handles looping effects, character data lives in a tiny JSON, and the demo runs in the browser.
AI-written summary · about
chapters (13)
- 0:00Retro projectors to web motion
- 2:10Why we cut motion and how to fix it
- 3:58Motion in the browser
- 5:00What is Lori
- 6:26Animate in Figma and export to Lori
- 8:15Components and glow effects in Figma
- 10:20Export Figma prototypes to Lori
- 11:45Lori files in production code
- 13:28Interactive motion with React and Lottie
- 15:31Character and animation data structures
- 16:54Lessons on layers, testing and accessibility
- 17:58Co-creating motion in products
- 18:40Resources and thanks
related talks
28mAnimating the Web: Elevating UX with Lottie and modern technologies
36mElevate Your React Workflow with Figma
14mLottie to Rive, the Evolution of Rendering Animations in React
22mLottie: Animating the bridge between designers and developers
31mUI details that connect
42mLottie and the Language of Motion Design
23mHow to create Figma design loved by developers
42mCode, Creativity, and Community at Figma