SuperAPI AI 工具集
合作ENAI 行业资讯收藏
全部工具AI设计工具figwright

figwright

Figwright 是一个免费的双向 Figma MCP 服务器，用于让 AI 编码智能体真正读写 Figma 画布。它通过本地 WebSocket 中继把 MCP 服务器与 Figma 插件连接起来，支持 Claude Code、Cursor、Codex 等任意 MCP 客户端。读取方向上，它能把 Figma 选中内容转换为贴合项目框架的代码，复用你已有的组件、设计令牌和图标；写入方向上，它可以直接创建和编辑画布内容，包括画框、文本、形状、自动布局、样式、变量、组件乃至整屏页面。全部组件（服务器、中继、插件）均在本机运行，设计数据不会被发送到其他地方。它提供 121 个读写工具，不依赖付费的 Dev Mode 席位，免费版 Figma 即可使用；服务器通过 npx 启动，需 Node.js 20.19+ 或 22.12+，并需从 GitHub Release 手动导入 Figma 插件。

访问官网

工具介绍

用途

Figwright 是一个免费、双向的 Figma MCP 服务器，面向 AI 编码智能体。它把 MCP 服务器与 Figma 插件通过本地 WebSocket 中继连接，使 Claude Code、Cursor、Codex 或其他任意 MCP 客户端能够真正操作 Figma 画布，而不仅仅是查看设计。设计数据、服务器、中继与插件全部在本机运行，不会发送到外部。

它不是只读工具：读取方向可以把 Figma 选中内容转换为贴合项目框架的代码；写入方向可以直接在画布上创作和编辑内容，从画框、文本，到自动布局、样式、变量、组件乃至完整页面。

主要能力

Figwright 暴露 121 个 MCP 工具，分为三组：

  • 读取：选中内容、文档与节点检查、样式、变量、组件、字体、原型交互与流程、动效（动画）状态、截图、原始图片填充资源、PDF 导出，以及动态画框的视频导出（MP4 / GIF / WebM）；还有 list_files / use_file，用于在多个已打开的 Figma 文件之间切换工作。
  • 写入：创建与编辑画框、文本、形状、自动布局、效果、图片（作为新图层或写入现有图层的填充）、样式、变量（包括导入团队库的变量和样式，以及把画框切换到 Dark 等模式）、组件（包括编写其布尔/文本/实例交换属性）、页面、原型交互与流程，以及 Motion 动画（关键帧、动画风格预设、时间线）；另有一个批量工具可一次应用多项编辑。
  • 基础信息（Grounding）：get_design_context 提供忠实、去重的设计上下文；component_map / token_map / icon_map 把 Figma 数据与你的代码库对接，使代码生成复用已有内容；design_diff 报告设计相对已保存基线的变化，便于只更新受影响的代码。

代码生成是「provider-first」的：Figwright 检测你真实的项目栈（框架 + 样式系统），复用你已有的组件、令牌和图标，而不是输出需要重写的通用标记。

使用方式

前提：一个 MCP 客户端（Claude Code、Cursor 等）、Node.js 20.19+ 或 22.12+、以及 Figma。免费版 Figma 足够，但导入插件需要桌面应用。服务器通过 npx 作为独立进程运行，其 Node 版本与项目构建所用的版本相互独立；不支持 Node 18/21 和 22.0–22.11。

  1. 向 MCP 客户端添加服务器。以 Claude Code 为例，在 .mcp.json 中加入（其他客户端结构相同）：
{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": ["-y", "@figwright/mcp@latest"]
    }
  }
}

npx 会拉取并运行已发布的服务器，无需全局安装。

  1. 安装 Figma 插件。插件尚未上架 Figma Community，需从最新 Release 手动安装：从最新 GitHub Release 下载插件 zip 并解压；在 Figma 桌面应用中依次进入 Menu → Plugins → Development → Import plugin from manifest…，选择解压后的 manifest.json；在 Figma 中打开 Figwright 插件（Plugins → Development → Figwright），它会自动连接本地服务器并显示 Connected。可让智能体运行 ping 确认连接。

3.（可选）安装 skills。skills 让智能体在合适的时机使用 Figwright 并遵循基于上下文的流程。在 Figma 中选中一个画框后，可以提示智能体：

  • “Code this Figma selection as a React component.”
  • 或反方向：“Build a pricing section in Figma from this spec.”

可通过 skills CLI 安装到任意受支持的智能体。skills 需要 @figwright/mcp 服务器已连接，单独使用没有工具可驱动。

常见问题与限制

  • 与 Dev Mode 的关系：Figwright 通过插件与 Figma 通信，免费版即可，不需要 Dev Mode 席位或付费层级。
  • 在不同编辑器中的能力：Figma Design 中功能完整；Dev Mode（Inspect 面板）中 Figma 只允许插件读取，截图、PDF 导出和所有检查工具可用，但所有写入操作（节点、页面、变量、样式）会失败，适合代码生成方向，构建请用 Design 模式；FigJam 中画框、分区、形状和文本可用，但组件、变量、样式和 Motion 在该编辑器中不存在。get_metadata 会报告编辑器类型，因编辑器失败的工具会在错误中说明。
  • 安全性与边界：所有组件在本机运行，中继使用 127.0.0.1:3055。中继对每个请求校验 Host 和 Origin 头以防范 DNS 重绑定，并拒绝浏览器来源；leader 的 HTTP 端点还要求无法在无 CORS 预检情况下发送的媒体类型。写入工具会修改 Figma 文件，导出工具会写入智能体选择的路径，可能被恶意设计或提示注入滥用，MCP 客户端的工具审批控制是重要边界。
  • 连接问题：若客户端找不到 npx/node，可用绝对路径或通过 env 传递 PATH；若启动时 @latest 解析失败导致连接关闭，可将包安装为项目依赖并去掉 @latest，或全局安装后直接指向 figwright-mcp 二进制路径。服务器由 MCP 客户端启动，仅在该客户端打开时运行。
  • 多文件与多智能体：多个 MCP 服务器可通过 leader/follower 选举共享同一插件。默认调用跟随最后触碰的文件；多个文件打开且智能体未认领文件时，结果会提示。list_files 列出插件已打开的文件，use_file 为某个智能体认领文件，认领属于该智能体的服务器进程，不影响其他智能体，可用 use_file({ release: true }) 释放。一个 MCP 客户端对应一个服务器进程，因此多智能体需为独立客户端（两个编辑器或两个终端）。
  • 版本匹配：服务器每次启动经 npx 重新解析，插件为手动导入的 zip，二者可能版本不一致且不报错，面板会提示旧插件并提供更新方法，工具结果会标注结果未经验证。
  • 明确的限制：Figwright 不能替代对智能体行为的审查；写入与导出工具存在风险。

同类工具

查看分类