Figma 动态视频转换助手

把 Figma 画面、组件和设计令牌整理成可在浏览器视频工程中驱动的资产与动态场景。适合需要把设计稿用于产品演示、界面动效或品牌视频，而不是简单录屏。

技能说明

Figma 动态视频转换助手

这个 Skill 能做什么

把 Figma 画面、组件和设计令牌整理成可在浏览器视频工程中驱动的资产与动态场景。

完成任务时重点处理：

• Figma 文件、节点和资源的可靠提取
• 设计令牌、组件状态和场景结构
• 从静态画面推导有意义的动态变化

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 需要把设计稿用于产品演示、界面动效或品牌视频，而不是简单录屏。
• 用户需要把 Figma 画面、组件和设计令牌整理成可在浏览器视频工程中驱动的资产与动态场景。
• 任务需要同时控制Figma 文件、节点和资源的可靠提取、设计令牌、组件状态和场景结构。

如果无法访问设计文件时让用户提供导出资源和关键尺寸，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 目标、输入文件与预期输出 2. 运行环境、依赖、版本和目录约束 3. 已有代码、接口、样例和错误信息 4. 安全、性能、兼容性和测试要求 5. Figma 文件链接、节点范围和访问方式 6. 目标视频工程、画布、时长和希望保留的组件

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 确认设计范围

锁定文件、页面、Frame、组件和需要忽略的草稿。

2. 提取资产与令牌

导出图像、SVG、颜色、字体、间距和组件属性。

3. 清理命名与层级

把设计层转换成可理解的场景、组件和状态。

4. 规划动态语义

把多个 Frame 视为状态变化，设计过渡而非幻灯片切换。

5. 重建视频场景

在目标工程中复原布局并连接时间线、交互或旁白。

6. 对照验证

比较关键帧、字体、颜色、裁切和不同分辨率。

输出格式

至少交付以下内容：

• **资产包**：导出的图片、SVG、字体信息和令牌
• **场景映射**：设计节点到视频组件与状态的对应
• **动态工程**：可运行的浏览器视频场景与验证截图

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

用户提供三个产品界面状态；把它们重建成同一组件的加载、完成和分享状态，并用真实布局变化连接。

合理处理顺序：

1. 确认设计范围 2. 提取资产与令牌 3. 清理命名与层级 4. 规划动态语义 5. 重建视频场景 6. 对照验证

交付时应重点展示资产包、场景映射、动态工程，并说明尚未验证的部分。

质量检查清单

• [ ] 命令、脚本和依赖在目标环境可运行
• [ ] 输入、输出、错误和边界情况均被处理
• [ ] 关键步骤可重复执行且不会意外覆盖原件
• [ ] 完成最小测试并记录验证命令与结果
• [ ] 导出比例、裁切和颜色与原设计一致
• [ ] 动画表达状态变化而不是机械淡入淡出

信息不足时怎么处理

• 缺少依赖或权限时先给出可验证的替代路径。
• 环境未知时避免绑定单一工具，明确适配点。
• 无法访问设计文件时让用户提供导出资源和关键尺寸。