用途:把代码里的 UI 组件、状态矩阵与设计令牌导出到 Figma,属于 c2d2c(code-to-design)管线的导出环节。项目参数从仓库根目录 C2D2C.md(回退 .claude/c2d2c.md)解析,缺失时可按 ../../templates/C2D2C.template.md 模板引导创建,涉及 EXPORT_FILE、VAR_COLLECTIONS、VAR_SNAPSHOT、ICON_SOURCE、DS_ROUTE、TOKEN_HOME、TOKEN_EXPORT 等参数。
主要能力:先做代码普查,从源码枚举所有变体轴、数据形态(value/empty/fallback、截断、loading、error)与交互态(rest/hover/focus/selected/disabled、hover 浮层),并为每个状态加灰色标注;再把颜色、圆角、文字样式全部绑定到已同步变量,CSS 变量名经 $codeSyntax.WEB 映射到 Figma 变量名;令牌同样走该管线,由 TOKEN_EXPORT 生成 VAR_SNAPSHOT,并有 CI 门禁 check:figma-variables 保证两侧一致。
使用方式:绑定前先预检目标文件是否存在项目已同步变量(用 get_variable_defs 或小型 use_figma 查询核对 VAR_SNAPSHOT),缺失或漂移需先同步;导出前询问一次是创建组件/变体集还是扁平画框。调用 use_figma 前先读 /figma-use 技能。
限制:品牌资产与占位符可豁免绑定;Figma 无法表达的值(color-mix/oklch)绑定最接近变量或记录推导;快照为生成产物,禁止手改;重命名须从代码侧发起;本地字体对 MCP 会话不可见。另有多项已知坑,如 resize 会把 auto-layout 变 FIXED、实例根填充不随主组件更新、绑定透明度顺序等。