SuperAPI AI 工具集

figma-use-motion

设计与创作

查看项目

更新于 10-15 18:37

技能介绍

概览

figma-use-motion 是 use_figma MCP 工具的运动(Motion)/动画上下文技能。资料指出,figma-use 覆盖基础的 Plugin API 规则,二者应一起加载。在处理运动工作时调用 use_figma,需始终传入 skillNames: "figma-use-motion"(与 figma-use 以逗号分隔并列),该字段仅用于日志记录。

运行时限制(Runtime Gating)

运动 API 受 metronome 用户功能标志(feature flag)控制。当调用用户未启用该标志时,本技能引用的每一个运动属性和辅助方法都会抛出“<name> is not a supported API”错误。资料明确要求:遇到该错误应快速退出,不要重试;告知用户其未启用运动功能并停止,否则会浪费调用次数并让用户因重复的相同失败而困惑。

何时使用

资料列出以下场景应加载本技能:

  • 在节点上添加、编辑或移除关键帧(manualKeyframeTracks、applyManualKeyframeTrack、removeManualKeyframeTrack)。
  • 让填充(fill)或描边(stroke)颜色随时间动画。
  • 应用、编辑或移除动画样式(applyAnimationStyle、removeAnimationStyle、animationStyles)。
  • 通过 node.timelines / node.setTimelineDuration(id, seconds) 读取或写入时间线时长。
  • 为上述任一操作选择缓动(easing)。

静态设计工作(创建形状、组件、变量、布局)仅通过 figma-use 完成;本技能只针对时间维度。

暴露的运动 API 表面

  • node.manualKeyframeTracks —— 读写手动关键帧(包括填充、描边和效果轨道)。
  • node.applyManualKeyframeTrack(field, track) / node.removeManualKeyframeTrack(field) —— 添加、替换或移除单个手动关键帧轨道,而无需重写整个对象。
  • node.animationStyles —— 读写应用于节点的动画样式元数据。
  • node.applyAnimationStyle(styleId, presetData?) / node.removeAnimationStyle(id) —— 应用已发现的样式,并通过返回/读回的 id 移除已应用的样式实例。
  • node.timelines —— 所属顶层框架的只读时间线列表,时长为秒。
  • node.setTimelineDuration(id, durationSeconds) —— 写入所属顶层框架的时间线时长。
  • node.animations —— 只读的已解析关键帧数据(目前仅手动轨道,见 motion-patterns.md)。
  • figma.motion.figmaAnimationStyles() —— 只读的 Figma 第一方动画样式列表。

编写自定义 “figma:motion” 预设模块源代码不在范围内。如果用户想要全新的动画样式,资料要求明确说明并停止,不要编造。

参考文档

按任务内容按需加载:motion-patterns.md 用于添加/编辑运动动画(手动关键帧、动画填充/描边、应用动画样式、时间线时长);motion-easing.md 用于设置动画缓动(关键帧缓动对象、自定义 cubic/spring、HOLD、在动画样式内应用缓动)。

验证动画

get_screenshot 只显示时间线的静止状态,从不显示运动。要检查运动,需 export_video 并采样帧;但它在服务端渲染,速度慢且昂贵(约 10 秒到数分钟),因此要让每次渲染都有价值。资料建议:先规划再渲染,成本随像素 × 帧数增长,两者都不应超过帧所需;先选定时刻,每个阶段一帧(如每个错开步骤,或开始/中间/稳定),通常 4–6 帧,这一数量决定 fps;按需定尺寸,从小开始(constraint: { type: 'WIDTH', value: 320 }, quality: "low"),但文字和小元素会模糊,需要判断细节时提高 WIDTH(768+),省略 constraint 即为全尺寸(1x;服务端钳制到 10x / 4096px);将 fps 设得刚好能落在那几帧上,fps: 5 可覆盖少量帧,10 是上限,更高只会增加渲染负担。

机制方面:export_video 仅对子节点携带动画的顶层框架生效(传入该框架,而非你打了关键帧的后代节点)。它返回带 status: "processing" 的 jobId,再次以 { fileKey, jobId } 调用以轮询。随后本地用 ffmpeg -ss <t> -i anim.mp4 -frames:v 1 frame_<t>.png 提取帧;提取是免费的,所以一旦为渲染付费,就应把它挖尽以获得每一帧有用信息,而不是重复导出。没有 ffmpeg 这类帧提取器时,跳过导出,改为对关键帧进行推理。

迭代至正确:导出是诊断而非签收。如果帧不对(顺序错误、时机偏差、元素缺失、遮罩使合成变空),修正关键帧/样式并重新导出。读完所有帧并把每处修复合并为一次,再重新渲染;每次渲染都有真实开销,让每一次都有价值,而不是每改一点就重新导出。对于琐碎或不言自明的改动,完全跳过导出。

预检清单

除 figma-use 预检清单外,还需确认:

  • 缓动使用公开的 { type: 'EASE_OUT', easingFunctionCubicBezier?: …, easingFunctionSpring?: … } 形状,而非内部场景图名称如 OUT_CUBIC。
  • 缓入缓出使用精确的公开枚举 EASE_IN_AND_OUT(或 EASE_IN_AND_OUT_BACK);绝不输出无效别名 EASE_IN_OUT。
  • 被动画的节点不是顶层框架(页面的直接子级),应改为动画其后代。
  • 时间线数值在公开 Plugin API 中为秒。通过 setTimelineDuration 延长;除非用户要求,否则不要缩短。
  • 变换关键帧字段使用公开名称(TRANSLATION_X、TRANSLATION_Y、ROTATION、SCALE_X、SCALE_Y、SCALE_XY),而非内部 MOTION_* 场景图名称。
  • 手动关键帧字段来自 motion-patterns.md 中的公开允许列表;生成/内部场景图字段会故意抛出错误。
  • 已变异节点 ID 会被返回(依据 figma-use 规则 15)。
  • 当运动正确性并非不言自明且存在帧提取器(ffmpeg)时,通过 export_video + 帧采样验证——渲染要小、fps 要低、迭代至正确(见上文验证动画部分)。get_screenshot 只显示静止状态。

限制

资料未提供价格、收费、平台支持范围或具体性能指标等信息。运行时受 metronome 功能标志限制;不支持编写自定义 figma:motion 预设模块源代码;本技能不覆盖静态设计工作。