figma-prototyping

仓库: dylantarre/animation-principles
安装量: 45
排名: #16286

安装

npx skills add https://github.com/dylantarre/animation-principles --skill figma-prototyping

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

| 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)

← 返回排行榜