mcpField
F
figma

figma

github.com/heygen-com创意与媒体74.7k348.2k 次安装今天更新
代码仓库

关于 figma

面向 HyperFrames 视频合成的 Figma 导入技能，可导入素材、设计令牌和组件。它还说明基于连接器的动效与着色器流程，以及将分镜转化为动画的方法。

主要功能

  1. 01将素材导入为本地文件
  2. 02导入品牌令牌和字体
  3. 03将画板转换为可编辑 HTML
  4. 04将 Figma 动效转换为 GSAP
  5. 05将分镜帧映射为动画

适用场景

  1. 01将 Figma Logo 和图片引入项目
  2. 02在组件中应用导入的品牌令牌
  3. 03在分镜帧之间制作状态动画

安装

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

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

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

附带文件scripts/verify-motion.mjs

详细介绍

插件安装： 在运行设置或新鲜度检查命令之前，如果此技能位于 HyperFrames 插件中，请遵循插件执行规则。

Figma → HyperFrames

所有导入都在构建时进行，并将本地文件及其来源记录在 .media/ 下，因此渲染时不会调用 Figma，重新运行命令也只会重新导入有更改的内容。资源、令牌和组件通过 REST 和令牌传输；运动和着色器数据则需要 Figma 连接器，或由相关人员提供原生导出。

访问权限

在 shell 或项目 .env 中设置 FIGMA_TOKEN。运行第一个命令前，先确认它存在；如果不存在，告诉相关人员如何创建，然后停止：前往 figma.com → Settings → Security → Personal access tokens，选择只读的 File content 和 File metadata，非 Enterprise 计划还需选择 Library content，以便使用 tokens。由相关人员自行设置；绝不要让他们把令牌粘贴到聊天中。

错误含义
BAD_TOKEN (401)已过期或已撤销：创建新令牌
FORBIDDEN (403)消息会指出缺少的权限范围，或者该账号无法查看此文件
REQUIRES_ENTERPRISE (403, variables)这不是失败：已运行已发布样式回退方案
RATE_LIMITED (429)已通过退避策略重试；请等待一分钟，或减少每次调用导入的节点数

命令

  • 图层、徽标或图像：npx hyperframes figma asset '<url or fileKey:nodeId>' [more refs] --format svg|png --scale 2 --description "<what it is>" [--entity "<brand mark>"]。矢量图和徽标使用 SVG，位图使用 2x PNG。同一文件的多个节点在一次调用中会通过单个请求渲染；--entity 可让 /media-use 之后找到品牌标记。
  • 品牌颜色和字体：npx hyperframes figma tokens <fileKey>。在运行 component 前执行，并将打印出的条目粘贴到 data-composition-variables 中。非 Enterprise 计划会回退到已发布样式。连接器也可以在此提供变量：将其原始响应缓存到 .media/figma-cache/，并将绑定写入 .media/figma-bindings.jsonl（{kind:"binding", figmaId, sourceFileKey, compositionVariableId:"figma:<name>", version}）。
  • 将画板作为可编辑 HTML 并保持精确几何尺寸：npx hyperframes figma component '<url or fileKey:nodeId>'，打包到 compositions/components/<name>/ 下。绑定到已导入令牌的填充会生成为 var(--slug, #literal)，因此一个变量就能为所有导入内容重新设置品牌样式；未知令牌会保留为字面值并标记 data-figma-unresolved：导入该库的令牌后重新导入。只询问一次库所在的文件；绝不要按十六进制值匹配。
  • 使用 Figma 的像素检查主视觉组件（figma asset <same node> --format png）。文字偏移是最常见的原因；如果无法修正偏移，请报告，不要手动调整导入结果。

Motion（连接器）

使用情况信标：这些阶段没有 CLI 触点，因此开始时运行 npx hyperframes events --skill=figma-motion，完成时运行 npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error。着色器（figma-shaders）和故事板（figma-storyboard）也一样。

  1. 通过一次递归请求获取父级画面的动态上下文；将原始 JSON 缓存到 .media/figma-cache/。
  2. 使用 @hyperframes/core/figma 中的 motionContextToDocs(raw, { selectorFor, repeat }) 进行规范化，绝不要手动转录关键帧。它会读取 motion.dev 代码片段（CSS 代码片段会拉伸时长）、丢弃循环衔接处的尾部关键帧，并保留贝塞尔缓动。selectorFor 返回组件导入中的 ID。
  3. motionToGsap(doc) → emitTimelineScript(spec)，注入到 GSAP 和 CustomEase 标签之后：设为暂停、有限播放，并使用字面量 window.__timelines 键。未映射的命名缓动会回退为线性；请说明这一点。
  4. 对照 Figma 自带的导出进行验证：node <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y。它会比较采样点之间的动态，因此静态偏移会相互抵消；低于 15 dB 时判定失败（忠实度高约为 20 dB 以上，偏差大约为 5 dB）。根据渲染结果中的卡片边缘测量 --crop。验证失败意味着要修正转换，而不是调整阈值。
  5. 无法转换的轨道：导出它，将 MP4 冻结，并作为 <video class="clip"> 放置。

着色器

Figma 的导出路径会将着色器扁平化为其基色，而且只有发布到库中的样式才能访问着色器源代码。请对方导出该画面的原生文件（PNG 或 MP4），并将其作为资源或片段放置。

故事板：画面是关键帧，不是幻灯片

包含同一元素的两个画面描述的是该元素随时间变化的状态：在这些状态之间为元素制作动画。将画面依次作为静态图播放，正是需要避免的做法。

  1. 场景包括区块中的每个与画面同尺寸的节点，既包括命名画面，也包括未命名的全画幅矩形：按尺寸筛选，而不是按类型或名称。按 absoluteBoundingBox.x 排序。
  2. 首先按名称匹配相邻画面中的子元素，然后按相似的尺寸和位置匹配。在各状态之间补间几何属性；像素发生变化时，将两个导出结果原位交叉淡化。每个元素导出一个资源，而不是每个画面导出一张静态图。未匹配的子元素会在其场景的节拍处进入或退出。
  3. 区块下方的文本节点是上方场景的动态注释，不是屏幕上的文案。关于场景内动态的注释（例如“线条逐条显现”）表示应将该画面作为组件导入并为其制作动画。
  4. 每次调用分批导出约 4 个场景画面：超过约 12 个 ID 时，/v1/images 会超时。
  5. 连续状态中的同一产品 UI 画面：将 UI 重建为实时 DOM：编写会改变状态的部分，冻结不变的部分，并将每次画面变化视为需要执行的交互（光标移动、点击、屏幕响应），而不是要应用的补间。
  6. 只有在画面之间没有共享元素时，才将静态图作为后备方案。

不要在合成内容中留下 Figma URL。

评论

支持 Markdown