figma-prototyping

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

Create 3 frames:

1. Idle - Starting position
2. Anticipate - Wind-up (move opposite to action)
3. Action - Main movement

Connect: Idle → Anticipate (100ms) → Action (After Delay)

3. Staging

Techniques:

• Use lower opacity on background elements (60-80%)
• Apply blur effect to non-focus areas
• Scale up the hero element
• Use drop shadows for depth hierarchy

4. Straight Ahead / Pose to Pose

Pose to Pose in Figma:

1. Design key frames as separate screens
2. Connect with Smart Animate
3. Figma interpolates between states

Create: Pose A → Pose B → Pose C frames

5. Follow Through and Overlapping Action

1. Create component variants for each element
2. Stagger the state changes across frames
3. Hair/cloth changes 1-2 frames after body

Frame 1: Body at A, Hair at A
Frame 2: Body at B, Hair at A (delayed)
Frame 3: Body at B, Hair at B

6. Slow In and Slow Out

Figma easing options:

• Ease In - Starts slow, ends fast
• Ease Out - Starts fast, ends slow
• Ease In and Out - Slow at both ends (most natural)
• Custom Bezier - Fine-tune curve

Default recommendation: Ease Out for most UI interactions.

7. Arc

1. Create multiple frames along arc path
2. Position element at key points on the curve
3. Use 3+ frames for smooth arc
4. Smart Animate interpolates the path

Or use component rotation with transform origin offset.

8. Secondary Action

Layer interactions:

1. Primary: Button scales on tap
2. Secondary: Icon rotates, shadow expands

On Click:
  - Button → Scale 1.1, Smart Animate, 150ms
  - Icon → Rotate 15°, Smart Animate, 100ms (starts simultaneously)