Bringing Designers and Engineers Closer: Practical Lottie Techniques
summary
Shows how After Effects compositions, precomps, layers and contents map into Bodymovin JSON that Lottie Android turns into model and drawing classes, and which AE features fail on different platforms. Demonstrates using KeyPath/ValueCallback (Lottie Dynamic Properties) and a Hyperion plugin to adjust colors, timing and play ranges live in an app without rebuilding, and recommends automated AE export (Overlord, scripts), disciplined layer naming, and sharing JSON previews via QR to speed designer–engineer iteration.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 3:24Lottie benefits
- 7:49Lottie workflow tools
- 12:02How Lottie works
- 18:55Interactive Lottie
- 21:28Lottie workflow challenges
- 25:48Debugging Lottie
- 28:44Summary
related talks
22mLottie: Animating the bridge between designers and developers
42mLottie and the Language of Motion Design
28mAnimating the Web: Elevating UX with Lottie and modern technologies
39mMeaningful motion design and how to implement it
15mLottie: Establishing an Open Standard for Vector Animation
49mDesign Tools - Closing the Gap Between Design and Development
19mHow to make interactive animations with Figma
45mDesign Tools and Handoffs*