Back to Details

figma-prototyping

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma Prototyping Animation Principles

Figma原型设计动画原则

Implement all 12 Disney animation principles using Figma's prototyping and Smart Animate features.
利用Figma的原型设计和Smart Animate功能，实现迪士尼全部12条动画原则。

1. Squash and Stretch

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
  1. 创建两个帧：正常状态和挤压状态
  2. 缩放元素：
    width: 120%
    ，
    height: 80%
  3. 使用Smart Animate连接
  4. 选择“Ease In and Out”（缓入缓出）时序
Frame 1: Circle 100x100
Frame 2: Circle 120x80 (squashed)
Interaction: Smart Animate, 150ms

2. Anticipation

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个帧：
  1. Idle（空闲） - 初始位置
  2. Anticipate（预备） - 蓄力阶段（向动作相反方向移动）
  3. Action（动作） - 主要运动
连接方式：Idle → Anticipate（100ms）→ Action（延迟触发）

3. Staging

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
技巧：
  • 背景元素使用较低不透明度（60-80%）
  • 对非焦点区域应用模糊效果
  • 放大核心元素
  • 使用投影构建深度层级

4. Straight Ahead / Pose to Pose

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
Figma中的关键帧动画：
  1. 将关键帧设计为独立屏幕
  2. 使用Smart Animate连接
  3. Figma会自动在状态间插值过渡
创建：Pose A → Pose B → Pose C帧

5. Follow Through and Overlapping Action

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
  1. 为每个元素创建组件变体
  2. 跨帧错开状态变化时机
  3. 头发/布料的变化比身体晚1-2帧
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

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.
Figma缓动选项：
  • Ease In（缓入） - 开始慢，结束快
  • Ease Out（缓出） - 开始快，结束慢
  • Ease In and Out（缓入缓出） - 两端都慢（最自然）
  • Custom Bezier（自定义贝塞尔曲线） - 精细调整曲线
默认推荐：大多数UI交互使用
Ease Out
（缓出）。

7. Arc

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.
  1. 沿弧线路径创建多个帧
  2. 将元素放置在曲线上的关键点
  3. 使用3个及以上帧实现流畅弧线
  4. Smart Animate会自动插值路径
或使用组件旋转并偏移变换原点。

8. Secondary Action

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)
分层交互：
  1. 主要动作：按钮点击时缩放
  2. 次要动作：图标旋转、阴影扩大
On Click:
  - Button → Scale 1.1, Smart Animate, 150ms
  - Icon → Rotate 15°, Smart Animate, 100ms (starts simultaneously)

9. Timing

9. 时间节奏（Timing）

DurationUse Case
100msMicro-interactions, button feedback
200msStandard transitions
300msPage transitions, modals
400-500msComplex reveals
800ms+Dramatic, attention-getting
时长适用场景
100ms微交互、按钮反馈
200ms标准过渡
300ms页面切换、模态框
400-500ms复杂展开效果
800ms+戏剧性、吸引注意力的效果

10. Exaggeration

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
突破细微效果：
  • 悬停缩放：1.1x而非1.02x
  • 旋转：15°而非5°
  • 移动距离：20px而非8px
  • 使用“Spring”（弹簧）缓动实现过冲效果

11. Solid Drawing

11. 坚实造型（Solid Drawing）

Create depth with:
  • Consistent perspective across frames
  • Shadow direction consistency
  • Layered elements with proper z-order
  • 3D transforms (rotation with perspective)
通过以下方式创建深度：
  • 各帧保持一致透视
  • 阴影方向一致
  • 元素分层并设置正确的z轴顺序
  • 3D变换（带透视的旋转）

12. Appeal

12. 吸引力（Appeal）

Design principles:
  • Rounded corners (friendly)
  • Consistent spacing
  • Smooth color transitions
  • Satisfying interaction feedback
  • Clear visual hierarchy
设计原则：
  • 圆角（友好感）
  • 间距一致
  • 平滑颜色过渡
  • 令人满意的交互反馈
  • 清晰的视觉层级

Smart Animate Setup

Smart Animate设置

  1. Name layers identically across frames
  2. Use components for consistent naming
  3. Match layer hierarchy for best results
  4. Set transform origin before animating
  1. 跨帧使用相同的图层名称
  2. 使用组件确保命名一致
  3. 匹配图层层级以获得最佳效果
  4. 设置变换原点后再进行动画

Interaction Settings

交互设置

Trigger: On Click / While Hovering / After Delay
Action: Navigate To / Smart Animate
Animation: Smart Animate
Easing: Ease Out
Duration: 200ms
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.
创建变体：
  • State=Default
  • State=Hover
  • State=Active
  • State=Disabled
使用“Change To”交互，通过Smart Animate在变体间过渡。

Pro Tips

专业技巧

  1. Use "While Hovering" for reversible animations
  2. After Delay chains create sequences
  3. Overflow: Hidden on frames clips animations
  4. Interactive Components for reusable micro-interactions
  5. Preview with Present mode (Play button)
  1. **使用“While Hovering”（悬停时）**实现可逆动画
  2. **After Delay（延迟后）**触发可创建序列动画
  3. 为帧设置**Overflow: Hidden（溢出隐藏）**裁剪动画
  4. **Interactive Components（交互式组件）**用于可复用微交互
  5. 使用**Present（演示）**模式预览（播放按钮）