SuperAPI AI 工具集

figma-implement-motion

设计与创作

查看项目

更新于 10-16 03:47

技能介绍

用途:把 Figma 设计中的动画与过渡转成仓库里可运行的动效代码,输出格式可为 motion.dev、CSS @keyframes 或框架专用动画库。前提是已连接可用的 Figma MCP 服务器,并从 Figma 链接中解析出 fileKey 与 nodeId(形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2),同时需有目标代码库。

主要能力:通过两个工具协作。get_motion_context 是动效数据的权威来源,返回动画节点清单、预生成代码片段(CSS @keyframes 与 motion.dev)、代码片段缺失时的回退关键帧绑定,以及递归时间线协调提示(timelineCohorts);支持 recursive: true(上限 500 节点)。get_design_context 提供结构、布局、尺寸、资源、样式、Code Connect 提示与截图上下文,可能含 data-node-id 及在拆分节点上的 data-motion-keys、data-motion-wrapper-for、data-motion-transform-template 等标记。两者以 node id 关联。

使用方式:先确认已有静态设计上下文,再拉取权威动效数据,然后将每个动效节点按 data-node-id 合并进设计结构,必要时把普通元素转为 motion.{tag} 或加包装,最后落地代码并验证。有 motion.dev 片段时 React 目标原样使用,从 motion/react 导入;若代码库已用其他动画库则适配;有 CSS keyframes 用于非 React 目标;仅有 keyframeBindings 时按它和 motionSummary 构建等价实现。

限制与注意:动效值以代码片段为准,不要从关键帧绑定重新生成;transformOrigin 需逐元素应用;尊重 prefers-reduced-motion;不要编造动效,无数据则保持静态;精确 nodeId 匹配优先于 fallbackNodeId;保留 display: contents 包装(除非该组自身动画);布局变换与 motion 变换需分离,避免相互覆盖;批量修改前先端到端验证单个动画。若用户要在 Figma 内部创建或编辑动画,应改用 figma-use。更广泛的交互式变体流程可能仍需产品侧状态处理。其余细节(如具体命令、价格、平台)本资料暂未提供。