98.8K+下载
跳转到使用指南
figma作者 HeyGen

Figma Skill.

一个用于动效和视频的 Claude Code 和 Codex skill：将 Figma 资产、品牌 token 和故事板导入到 HyperFrames 组合中。

  • Motion & Video
  • Video
下载 OpenDesign查看使用指南
heygen-com/hyperframes · skills/figma/SKILL.mdSKILL.md
--- name: figma description: Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition. --- ## Auth — two credentials, scoped ## Routing ## Assets (Phase 1 — CLI) ## Tokens (Phase 2 — CLI) ## Components (Phase 3 — CLI) ## Motion (Phase 4 — connector-assisted)
前置数据和章节标题读取自上游文件，日期 2026-09-14 · 完整内容 17,829 字符

01 功能说明

figma Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

分五个阶段将 Figma 内容导入 HyperFrames 合成：静态资源、品牌 token、作为 HTML 的组件、动效时间线和着色器。尽可能使用 REST API（资源、token、组件），动效和着色器数据可选使用连接器。每次导入都会在本地冻结产物并记录来源，因此渲染永不调用 Figma，并保持确定性。

故事板重建将帧视为描述元素随时间变化状态的关键帧，而非幻灯片。支持 token 到组件的绑定，因此更新一个品牌变量即可为所有导入组件重新上色。具备速率限制感知并自动重试。可跨配置 token 可访问的所有 Figma 文件工作。

它产出什么

  • 冻结在 .media/images/ 下的图片资源，附带 manifest 来源信息和 img 代码片段
  • 品牌 token 条目、figma-tokens.json 附属文件，以及 .media/figma-bindings.jsonl 中的 binding-index 记录
  • 位于 compositions/components/<name>/ 下的可编辑 HTML 组件包
  • 在 CDN 标签之后注入的 GSAP 时间线脚本，处于暂停且有限状态，注册在 window.__timelines 上
查看示例提示词 ↗

工作方式

  1. 01
    解析 Figma 引用

    使用 parseFigmaRef 从用户提供的 URL、fileKey:nodeId 字符串或单独的 fileKey 中提取 fileKey 和 nodeId。

  2. 02
    根据意图路由到正确阶段

    将用户请求匹配到五个阶段之一：资源导出、token 导入、组件重建、动效时间线或着色器处理。

  3. 03
    通过 REST 或连接器获取

    资源、token 和组件使用 REST。动效和着色器需要兼容的连接器或手动导出。

  4. 04
    在本地冻结产物并记录来源

    每次导入都会写入本地文件，将来源元数据追加到 manifest 中，并重新生成共享的媒体使用清单。

  5. 05
    从状态数据重建动效和故事板

    故事板帧通过对相邻帧进行差异比较，转化为元素时间线。动效上下文先规范化为 MotionDocs，再转为 GSAP 脚本。

  6. 06
    与真实数据进行核对

    将渲染结果与 Figma 自身的像素导出进行比较，以验证静态还原度。动效重建必须达到至少 15dB 的 motion-PSNR。

02 找到适合场景

何时使用 figma Skill

在 Claude Code 或 Codex 中使用 figma skill 处理此类动效和视频任务。适用范围和限制来自该 skill 自身的文件。

适合场景

  • 用户粘贴一个 figma.com 链接，或要求将 Figma 设计带入视频或合成
  • 从 Figma 文件中提取品牌色彩、token 或样式到合成变量
  • 将 Figma 帧构建为可编辑 HTML 组件场景
  • 从包含场景帧作为关键帧的故事板部分重建动画

了解边界

  • 在没有兼容 Figma 连接器的情况下，动效和着色器导入需要手动进行原生导出
  • Figma 的连接器渲染路径不执行 shader；它们会被压平为基础颜色
  • REST variables API 仅限 Enterprise 版本使用；其他套餐降级为 published 风格的元数据
  • 描绘同一产品 UI 连贯效果的分镜帧会升级为将应用重建为实时 DOM，而非元素链

需要提供的信息

  • Figma 个人访问 token只读作用域：File content、File metadata，可选包括 Library content 和 Variables。在 shell 或 .env 中设置为 FIGMA_TOKEN。
  • 兼容的 Figma 连接器（可选）授权与 token 分开。动效时间轴和 shader 源码需要它。若无此连接器，请改用原生导出。
  • 分镜意图的导演注释分镜条下方的 TEXT 节点描述了如何进行动效。通过 x 轴范围重叠与场景配对。
  • shader 的 Figma 原生导出当连接器路径无法执行 shader 或没有可用连接器时，直接从 Figma 导出 PNG 或 Motion MP4。

03 Skill 内部

figma Skill 赋予 Claude Code 与 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 首次调用 CLI 前检查 Token

    在运行任何 hyperframes figma 命令之前，先验证 FIGMA_TOKEN 是否存在于 shell 环境变量或项目 .env 中。若两者皆无，引导用户完成一次性设置并停止。

  2. 始终为资源传递 --description

    每个资源导入都必须包含 --description，说明其内容。这将成为索引行和 img 的 alt 文本。为命名的品牌标识添加 --entity。

  3. 每个文件在单次请求中批量处理节点

    将同一文件的多个引用以空格分隔或逗号连接的参数传入。它们都会在单次 /v1/images 调用中渲染，以避免触发速率限制。

  4. 先导入 Token，再导入组件

    在导入组件之前先运行 hyperframes figma tokens。这样组件颜色可以链接到品牌变量，而不是烘焙重复的字面值。

  5. 绝不在合成中保留 Figma URL

    先将所有 Figma 内容冻结为本地文件。渲染只能读取本地文件，以确保输出的确定性。

  6. 绝不发出 Repeat: -1

    时间轴必须是暂停、有限的，并带有字面量的 window.__timelines 键。不允许无限循环。

  7. 为用户讲解每一步

    在执行每条命令之前，说明你正从 Figma 拉取什么内容。之后，说明结果落在了何处、合成中发生了什么变化，以及下一步的即时动作。

04 投入使用

在 Claude Code 或 Codex 中安装 figma

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 figma 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill figma

针对 skills/figma/SKILL.md 的通用 skills CLI 形式；该仓库可能会记录其自己的路径。

给 Skill 一个首次动效和视频任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt
Import the hero section from [figma.com/file/abc123/Brand?node-id=42-1] including the logo, headline text, and background. Pull the brand tokens from the same file so the colors stay linked to our design system variables. Then build the animation timeline — the logo should scale in with a burst effect and the headline should slide from the left.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

  • 在调用动效或组件导入完成之前运行 npx hyperframes check
  • 使用 verify-motion.mjs 脚本验证动效重建是否达到至少 15dB 的 motion-PSNR
  • 验证资产导入按 fileKey:nodeId:format:scale:version 保持幂等，仅重新导入发生变化的内容

在 OpenDesign 中通过其 SKILL.md 链接导入 figma：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author
HeyGen
Repository
github.com/heygen-com/hyperframes 分支 main
Skill 文件
skills/figma/SKILL.md 验证时记录的内容校验和；提交 558c11b
License
Apache-2.0 来自 LICENSE。
仓库星标数
49,761 GitHub 快照摄于 2026-09-14，针对整个 heygen-com/hyperframes 仓库，该仓库在本目录中包含 9 个 skills。不是 figma 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

  1. Figma → HyperFrames五阶段能力拆分：资产、token、组件通过 REST 获取；动效和着色器通过连接器或手动导出
  2. 认证 — 两套凭据，作用域受限用于 REST 的个人访问 token，仅具只读作用域；motion/shaders 使用独立的连接器认证；运行 CLI 前先做 token 预检
  3. 路由解析 Figma 引用，按意图路由到资产 / token / 组件 / 动效 / 分镜 / 着色器阶段
  4. 资产（第一阶段 — CLI）通过 REST 渲染节点，清理 SVG，冻结存放于 .media/images/ 下，按文件批量处理节点以避免触发速率限制
  5. Token（第二阶段 — CLI）将变量导入为 composition 品牌条目，非 Enterprise 版本降级为已发布样式，构建绑定索引
  6. 组件（第三阶段 — CLI）将节点树按精确几何转换为 HTML，矢量自动栅格化，导入时通过 var() 将填充绑定到 token
  7. 动效（第四阶段 — 连接器辅助）递归获取动效上下文，归一化为 MotionDocs，生成 GSAP 脚本，按 15dB motion-PSNR 阈值校验
  8. 着色器（第五阶段 — 主要为手动）连接器渲染会将着色器扁平化；请改为要求用户以 Figma 原生方式导出为 PNG 或 MP4
  9. 分镜（场景帧组成的 SECTION → 动画）帧是关键帧而非幻灯片；将相邻帧差异化为元素链，先按名称再按几何匹配，导演注释指定过渡方式
  10. 确定性在本地冻结所有 Figma URL，绝不发出 repeat -1，时间线保持暂停且有限，所有 I/O 均在导入时完成
Skill 自身的描述
"将 Figma 内容导入 HyperFrames 组合——渲染资源、品牌 token、组件、故事板分段 → 重建动画（帧被读取为状态，而非幻灯片）（REST/CLI），可用时使用连接器辅助动画，以及来自连接器或原生导出的着色器。当用户粘贴 figma.com 链接或要求将 Figma 设计、帧、Logo、品牌或动画引入视频/组合时使用。"

来自 SKILL.md 的 front-matter 描述。完整文件约 17,829 字符。在 GitHub 上阅读完整文件。

Figma

在真实的动效和视频任务中运行 figma。

下载 OpenDesign，从其 SKILL.md 链接导入 figma，粘贴上述提示词，在查看结果之前先阅读计划。

下载 OpenDesign浏览所有 skills
终端
npx skills add https://github.com/heygen-com/hyperframes --skill figma

OpenDesign 桌面客户端

一套设计系统，让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中，用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手，即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统，以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows