mcpField
F
figma-prototyping

figma-prototyping

github.com/dylantarre设计与 UI132554 次安装43 周前更新
代码仓库

关于 figma-prototyping

面向 Figma 原型设计者的动画指南，说明如何用 Smart Animate 实现迪士尼 12 条动画原则，并设置交互、缓动和组件状态。

主要功能

  1. 0112 条动画原则的应用
  2. 02Smart Animate 帧间过渡
  3. 03交互触发与时序设置
  4. 04组件变体状态设计
  5. 05图层命名与层级建议

适用场景

  1. 01制作按钮微交互原型
  2. 02构建连续的动画帧序列
  3. 03为组件设计悬停和禁用状态

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/figma-prototyping确认已加载。

详细介绍

Figma 原型动画原则

使用 Figma 的原型设计和 Smart Animate 功能，实现迪士尼动画的全部 12 项原则。

1. 挤压与拉伸

  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. 预备动作

创建 3 个画框：

  1. 待机 - 起始位置
  2. 预备 - 蓄力（朝动作的反方向移动）
  3. 动作 - 主要移动

连接：待机 → 预备（100ms）→ 动作（延迟后）

3. 舞台调度

技巧：

  • 降低背景元素的不透明度（60-80%）
  • 对非焦点区域应用模糊效果
  • 放大主体元素
  • 使用投影营造层次感

4. 直线逐帧动画 / 姿势到姿势动画

在 Figma 中制作姿势到姿势动画：

  1. 将关键帧设计为独立画面
  2. 使用 Smart Animate 连接
  3. Figma 会在不同状态之间进行插值

创建：姿势 A → 姿势 B → 姿势 C 画框

5. 跟随动作与重叠动作

  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. 慢入与慢出

Figma 缓动选项：

  • Ease In - 开始慢，结束快
  • Ease Out - 开始快，结束慢
  • Ease In and Out - 两端都慢（最自然）
  • Custom Bezier - 微调曲线

默认建议：大多数 UI 交互使用 Ease Out。

7. 弧形运动

  1. 沿弧线路径创建多个画框
  2. 将元素放置在曲线的关键点上
  3. 使用 3 个以上的画框以实现平滑弧线
  4. Smart Animate 会对路径进行插值

或者使用组件旋转，并偏移变换原点。

8. 次要动作

分层交互：

  1. 主要动作：按钮在点击时缩放
  2. 次要动作：图标旋转，阴影扩展
On Click:
  - Button → Scale 1.1, Smart Animate, 150ms
  - Icon → Rotate 15°, Smart Animate, 100ms (starts simultaneously)

9. 时长

时长使用场景
100ms微交互、按钮反馈
200ms标准过渡
300ms页面过渡、模态框
400-500ms复杂的显现效果
800ms+戏剧性、吸引注意力的效果

10. 夸张

让效果超越细微变化：

  • 悬停缩放：使用 1.1x，而非 1.02x
  • 旋转：使用 15°，而非 5°
  • 移动：使用 20px，而非 8px
  • 使用「Spring」缓动实现过冲效果

11. 扎实绘制

通过以下方式营造深度：

  • 保持画框间的透视一致
  • 保持阴影方向一致
  • 使用正确的 z 顺序排列分层元素
  • 使用 3D 变换（带透视效果的旋转）

12. 吸引力

设计原则：

  • 圆角（显得友好）
  • 间距一致
  • 平滑的颜色过渡
  • 令人满意的交互反馈
  • 清晰的视觉层次

Smart Animate 设置

  1. 跨画框使用相同的图层名称
  2. 使用组件确保命名一致
  3. 保持图层层级匹配以获得最佳效果
  4. 在动画开始前设置变换原点

交互设置

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

用于状态的组件变体

创建变体：

  • State=Default
  • State=Hover
  • State=Active
  • State=Disabled

在变体之间使用带有 Smart Animate 的「Change To」交互。

专家技巧

  1. 使用「While Hovering」实现可逆动画
  2. 「After Delay」链式连接可创建动画序列
  3. 在画框上设置 Overflow: Hidden 可裁剪动画
  4. 使用交互组件实现可复用的微交互
  5. 使用 Present 模式（播放按钮）预览

评论

支持 Markdown