figma-prototyping

Installation
SKILL.md

Figma Prototyping Animation Principles

Implement all 12 Disney animation principles using Figma's prototyping and Smart Animate features.

1. Squash and Stretch

  1. Create two frames: normal and squashed states
  2. Scale element: width: 120%, height: 80%
  3. Connect with Smart Animate
  4. Use "Ease In and Out" timing
Frame 1: Circle 100x100
Frame 2: Circle 120x80 (squashed)
Interaction: Smart Animate, 150ms

2. Anticipation

Installs
292
GitHub Stars
54
First Seen
Jan 24, 2026
figma-prototyping — dylantarre/animation-principles