Motion In Design Systems
summary
Argues that animation must be designed top‑down and included early, not tacked on at the end, and gives three concrete deliverables to use: storyboards, motion comps, interactive prototypes. Shows a drag‑and‑drop storyboard using trigger / action / quality, recommends motion comps (After Effects, Adobe Animate CC, Hype) for exact timing and brand personality, and interactive prototypes (Framer, Atomic, CodePen, GSAP) to test feel and edge cases. Advises to document durations and easing (timing scales, easing palette, CSS/Sass variables) and demo slowed animations via DevTools for clearer handoff.
AI-written summary · about
chapters (8)
- 0:00Why animation matters
- 1:04Static deliverables limit animation
- 3:56Deliverables for better animation
- 4:39Storyboards and sketches
- 11:42Motion comps for details
- 18:45Interactive prototypes
- 25:43Documenting motion decisions
- 34:27Resources and closing
related talks
50mDesigning with animation
27m"Building Motion for the Web: Practical Strategies for Designers and Developers"
23mEmbrace your project: Animation with concept
39mMeaningful motion design and how to implement it
37mAnimation in UX: The Subconscious Influence of Motion
43mPurpose and Style: Using Motion with Meaning in Interfaces
37mAnimating the User Experience
37mMeaningful Motion in Design