SuperAPI AI 工具集

figma-use

设计与创作

查看项目

更新于 11-04 20:16

技能介绍

figma-use 是一个面向 Figma Plugin API 的操作技能,用于指导 AI 在 Figma 设计文件中通过 use_figma 工具执行 JavaScript 代码。该技能的前置要求是:在每次调用 use_figma 之前必须先加载 figma-use,不得在未加载该技能的情况下直接调用 use_figma。调用时需在逗号分隔的 skillNames 参数中包含 figma-use 作为记录用途的参数;若通过 MCP 资源加载,则名称需加 resource: 前缀(如 resource:figma-use)。

用途与主要能力:该技能覆盖通过 Plugin API 读写 Figma 文件的操作规则,包括节点创建与修改、文本编辑、自动布局、变量、组件属性与设计系统相关内容。它要求脚本使用顶层 await 和 return,返回值自动 JSON 序列化;console.log 输出不会被返回。每次创建或修改画布节点后,必须返回所有受影响的节点 ID(如 createdNodeIds、mutatedNodeIds),以便后续调用引用、验证或清理。

关键规则:颜色使用 0–1 范围,仅含 r、g、b 字段,透明度放在 paint 级别;填充和描边是只读数组,需克隆修改后重新赋值。文本编辑必须先加载字体并 await,否则会报未加载字体错误;对已有文本应加载节点当前字体而非硬编码默认字体。页面切换必须使用 await figma.setCurrentPageAsync(page),同步 setter 不可用,且每次 use_figma 调用最多切换一次页面,多页工作应拆分为并行调用。布局尺寸方面,HUG/FILL 受结构上下文限制,新节点需先挂到自动布局父级再设置;resize() 会重置尺寸模式,应先调用再设置 layoutSizing*。容器若包含有结构关系的子元素,应使用 figma.createAutoLayout()。创建变量时应显式设置 scopes。

辅助资源:详细的 API 类型可查阅 plugin-api-standalone.d.ts(按需 grep,不要整体加载);设计系统相关工作需先阅读 working-with-design-systems/wwds.md。若涉及整页或屏幕构建,应同时加载 figma-generate-design;若涉及组件创建,应同时加载 figma-generate-library。

适用场景与限制:该技能适用于设计模式下(figma.com/design/...)的 Figma 文件操作,支持 Rectangle、Frame、Component、Text 等设计节点;FigJam(figma.com/board/...)和 Slides(figma.com/slides/...)支持的节点类型不同,且 figma.createPage() 仅在 Design 文件中可用。figma.notify() 会抛出未实现错误。出现错误时应遵循 safeToRetryWithoutCanvasRead 决定是否直接重试。Slides 文件暂无专用读取工具,可用只读脚本检查,相关指引需加载 figma-use-slides 技能。