SuperAPI AI 工具集

figma-use

figma-use 是一个用于从命令行控制 Figma 的 CLI 工具,为 AI 智能体提供完整的读写访问能力。它可以创建形状、文本、组件,设置样式、自动布局、变量,导出图像等,支持 100 多个命令。该工具基于 Chrome DevTools Protocol(CDP)直接与 Figma 通信,无需安装插件,同时支持命令式 CLI 操作和声明式 JSX 描述两种方式。

访问官网

工具介绍

figma-use 是一个从命令行控制 Figma 的 CLI 工具,为 AI 智能体提供完整的读写访问能力,可创建形状、文本、组件,设置样式、自动布局、变量,导出图像,包含 100 多个命令。

用途

figma-use 旨在让 AI 智能体通过命令行全面控制 Figma。Figma 官方的 MCP 插件可以读取文件但无法修改,而 figma-use 可以修改。它将 LLM 熟悉的 CLI 和 React(JSX)两种方式结合,命令紧凑易读、易生成、易串联,适合涉及数十个操作的任务场景。

主要能力

  • 创建形状、文本、组件:支持 Frame、Rectangle、Ellipse、Text、Line、Star、Polygon、Vector、Group、Icon、Image 等元素。
  • 图标:按名称从 Iconify 插入任意图标,无需下载、导入或清理,可浏览 150k+ 图标(icon-sets.iconify.design)。
  • 组件与变体:在 .figma.tsx 文件中定义组件,首次调用创建主组件,其余创建实例;ComponentSet 可创建包含所有组合的真实组件集。
  • 自动布局与 CSS Grid:支持 2D 布局的 CSS Grid(日历、仪表盘、画廊),支持 px、fr、auto/hug,可用 colGap 和 rowGap 设置间距。
  • 变量作为 Token:按名称将颜色绑定到 Figma 变量,hex 值作为回退;CLI 中可使用 var:Colors/Primary 或 $Colors/Primary。
  • 样式与导出:可为节点设置样式,一键导出任意节点或截图。
  • 图像:从 URL 加载图像。
  • 向量与 SVG:导入 SVG 或直接处理路径(读取、修改、平移、缩放、翻转)。
  • 节点查询:使用 XPath 选择器查找节点,支持完整 XPath 3.1(谓词、函数、算术、轴)。
  • JSX 转换与 diff:将任意 Figma 节点转换回 JSX;将向量形状自动匹配到 Iconify 图标;以 JSX diff 比较两个节点;比较两个 frame 得到补丁并应用(应用时会校验当前状态)。
  • 视觉 diff:以红色高亮变化的像素。
  • 页面树:以可读形式展示页面树。
  • 画布整理:整理画布布局,基于 d3-hierarchy treemap 实现 squarify 和 binary 模式(尺寸感知的矩形打包),适合智能体在相同位置创建多个 frame 后使用。
  • 发现工具:用于理解设计系统。
  • Lint(实验性):检查设计的一致性、可访问性和最佳实践,包含 6 个类别 17 条规则,支持 JSON 输出用于 CI/CD。
  • 评论驱动工作流(实验性):AI 智能体可等待 Figma 评论并响应,返回评论文本、作者和 target_node(评论图钉下的确切元素);智能体处理请求后解决评论,再运行 watch 等待下一条。
  • Storybook 导出(实验性):将组件导出为 Storybook stories,生成带类型化 props 的 .stories.tsx。
  • MCP 支持:对于支持 Model Context Protocol 的 AI 智能体,暴露 90+ 工具。
  • 配置文件:可创建 .figma-use.json 用于 Storybook 导出和 linting,CLI 参数会覆盖配置值。
  • 附带 SKILL.md:供 Claude Code、Cursor 等智能体参考。

使用方式

  1. 以启用远程调试的方式启动 Figma:使用 --remote-debugging-port=9222。也可不安装直接运行。无需安装插件。
  2. 检查连接。
  3. 可使用命令式(一次一个命令)或声明式(用 JSX 描述结构并渲染)。
  4. stdin 模式仅接受纯 JSX(无变量、无逻辑);组件、变体和条件请使用 .figma.tsx 文件。
  5. 可设置非默认端口:向任意命令传 --port <N>,或设置 FIGMA_PORT 环境变量。
  6. 命令通过 Figma JavaScript 上下文中的 Runtime.evaluate 执行,拥有 Plugin API 的完整访问权限。
  7. 可选守护进程保持 CDP 连接活跃,加快连续命令的速度:figma-use daemon start。
  8. 对于 Figma 126+ 且无管理员权限打补丁的情况,守护进程可用 --remote-debugging-pipe 启动 Figma;守护进程持有管道连接,所有命令自动路由。可设置 FIGMA_BIN 自定义二进制位置。

适用场景

  • AI 智能体自动创建和修改 Figma 设计(形状、文本、组件、样式)。
  • 将设计导出为图像或导出为 Storybook stories。
  • 通过评论驱动工作流让智能体响应设计评审评论。
  • 在 CI/CD 中对设计执行 lint 检查。
  • 在设计系统中查找、比较和 diff 节点与 frame。

限制

  • Figma 126+ 阻止远程调试,figma-use 仍可通过 figma-use daemon start --pipe 使用;或者可完全跳过 Figma,使用 OpenPencil(一个开源设计编辑器,可读写 .fig 文件,内置 AI 和 P2P 协作)。
  • stdin 模式仅接受纯 JSX,不支持变量和逻辑。
  • Storybook 导出、Lint 和评论驱动工作流为实验性功能。
  • 其余功能、收费、价格、平台、效果等信息暂未提供。