Figma Prototyping

This one translates all 12 Disney animation principles into Figma prototyping techniques. You get specific timing recommendations (100ms for micro-interactions, 200ms for standard transitions), Smart Animate setup instructions, and practical implementations for things like squash and stretch, anticipation sequences, and arc motion. The guide includes easing curve advice, component variant patterns for state changes, and concrete tricks like staggering animations for overlapping action. Most useful when you're prototyping interactions that need to feel polished rather than just functional. The timing chart alone will save you from guessing durations, and the secondary action layering examples show how to add subtle complexity without overcomplicating your prototype structure.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill figma-prototyping --agent claude-code