Figma Prototyping Animation Principles

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

1. Squash and Stretch

• Create two frames: normal and squashed states

• Scale element: width: 120% , height: 80%

• Connect with Smart Animate

• Use "Ease In and Out" timing

Frame 1: Circle 100x100 Frame 2: Circle 120x80 (squashed) Interaction: Smart Animate, 150ms

2. Anticipation

Create 3 frames:

• Idle - Starting position

• Anticipate - Wind-up (move opposite to action)

• 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:

• Design key frames as separate screens

• Connect with Smart Animate

• Figma interpolates between states

Create: Pose A → Pose B → Pose C frames

5. Follow Through and Overlapping Action

• Create component variants for each element

• Stagger the state changes across frames

• 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

• Create multiple frames along arc path

• Position element at key points on the curve

• Use 3+ frames for smooth arc

• Smart Animate interpolates the path

Or use component rotation with transform origin offset.

8. Secondary Action

Layer interactions:

• Primary: Button scales on tap

• Secondary: Icon rotates, shadow expands

On Click:

• Button → Scale 1.1, Smart Animate, 150ms
• Icon → Rotate 15°, Smart Animate, 100ms (starts simultaneously)

9. Timing

Duration Use Case

100ms Micro-interactions, button feedback

200ms Standard transitions

300ms Page transitions, modals

400-500ms Complex reveals

800ms+ Dramatic, attention-getting

10. Exaggeration

Push beyond subtle:

• Scale hover: 1.1x instead of 1.02x

• Rotation: 15° instead of 5°

• Movement: 20px instead of 8px

• Use "Spring" easing for overshoot effect

11. Solid Drawing

Create depth with:

• Consistent perspective across frames

• Shadow direction consistency

• Layered elements with proper z-order

• 3D transforms (rotation with perspective)

12. Appeal

Design principles:

• Rounded corners (friendly)

• Consistent spacing

• Smooth color transitions

• Satisfying interaction feedback

• Clear visual hierarchy

Smart Animate Setup

• Name layers identically across frames

• Use components for consistent naming

• Match layer hierarchy for best results

• Set transform origin before animating

Interaction Settings

Trigger: On Click / While Hovering / After Delay Action: Navigate To / Smart Animate Animation: Smart Animate Easing: Ease Out Duration: 200ms

Component Variants for States

Create variants:

• State=Default

• State=Hover

• State=Active

• State=Disabled

Use "Change To" interaction with Smart Animate between variants.

Pro Tips

• Use "While Hovering" for reversible animations

• After Delay chains create sequences

• Overflow: Hidden on frames clips animations

• Interactive Components for reusable micro-interactions

• Preview with Present mode (Play button)