← 返回目录

Figma MCP Server

社区

通过配套 Figma 插件，让 AI 代理直接在 Figma 文档中进行读写操作的社区版 MCP 服务器。

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 团队协作第 42 / 55
Stars: ★ 175 热门
传输方式: stdio（本地进程） · Streamable HTTP
运行环境: Node.js
凭据: 无需凭据
许可证: Apache-2.0
最近提交: 37 天前

44FMRS · D

这是一个早期（v0.1.0）的社区 Figma MCP 服务器，通过本地 WebSocket 桥接插件实现官方只读服务器所不具备的读写能力，但工具列表尚未公开，需要手动完成插件与服务器的本地搭建。

最强项 · 安全与权限 11/20 最弱项 · 可靠性 7/20

可靠性

7/20

安全与权限

11/20

维护活跃度

10/20

文档质量

9/20

安装易用性

7/20

查看各项评分依据

可靠性 7/20: 仓库为纯静态审查，未发现任何 CI 工作流或已提交的测试用例，也没有可验证的自动化执行证据。manifest 中声明了两个 npm 包条目（stdio 与 streamable-http），但 README 仅描述了基于 Express + socket.io 的 streamable-http 架构，对 stdio 传输方式未作任何说明，二者存在不一致。工具列表章节明确写着 'TBD'，因此无法核实声明的工具与实际行为是否一致。整体架构依赖外部 Figma 插件通过 WebSocket 桥接，链路较长，超时处理有提及但错误处理细节不详，版本号仅为 0.1.0，属早期阶段。按静态校准规则，缺乏 CI/测试证据，可靠性不得高于 12 分，结合以上问题给出偏低分。
安全与权限 11/20: 该服务器通过 Figma 插件对设计文档提供写入/修改权限，属于有实际副作用的操作，但文档中未描述对破坏性或不可逆设计变更的确认机制，也没有细粒度的权限范围控制，仅建议用户'关闭不需要的工具'作为唯一的权限管理手段。本地 streamable-http 端点（localhost:38450/mcp）未见身份验证说明。好的方面是：README 的 Security 一节明确披露了'仅本地运行、不主动暴露到网络'的边界，并提示用户若联网使用需自担风险，这是较为坦诚的风险披露；未发现凭证泄露、恶意代码或伪造身份等红线问题。综合来看主要风险已被披露但确认与最小权限机制不完整。
维护活跃度 10/20: 仓库状态为 active、非 archived，使用 Apache-2.0 许可证，具备一定社区关注度（170 星，3 个未关闭 issue）。但版本仅为 0.1.0，未见发布历史、变更日志或依赖更新策略的证据。安全问题报告渠道仅为'通过 GitHub issue 提交'，没有专门的 SECURITY.md 或安全响应流程说明。证据有限导致维护活跃度只能判定为中等水平。
文档质量 9/20: 文档提供了较为详细的安装、插件构建、服务器启动及架构说明（含架构图和时序图），Security 章节也做了范围披露。但 Tools 章节明确标注 'TBD'，完全缺失工具参数、限制与用法说明，这是文档质量的重大缺口；同时缺少故障排查（troubleshooting）章节，且文中存在若干拼写错误（如 'Imprort Plugin'），反映文档尚不成熟。
安装易用性 7/20: 安装流程为手动、多步骤：需要克隆仓库、本地构建 Figma 插件并以开发者模式手动导入 Figma、再单独启动 MCP server，最后在客户端手工配置 streamable-http 端点，未提供如 claude_desktop_config.json 之类的主流客户端配置示例。README 中说明插件尚未通过 Figma 官方审核上架，因此无法通过市场一键安装；manifest 虽列出了 npm 包，但 README 并未说明如何直接通过 npm 包完成安装/连接，两者存在脱节。按静态校准规则，缺乏可验证的执行证据，setup 分数进一步受限，加之流程本身繁琐脆弱，给出偏低分。

静态评测 · 未实际运行收录于 2026-08-26

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

需要 AI 代理对 Figma 文档进行写入（而不仅是读取）的开发者或设计师
愿意在本地运行 Node.js 服务并手动以开发者模式加载插件的用户

不适合谁

只需要只读访问、希望使用官方受支持方案的用户
无法在本地运行服务或安装开发者模式插件的用户
需要在多用户网络环境或生产环境中暴露该服务的场景

所需权限

插件可访问并修改当前在 Figma 中打开的设计文档的完整内容
本地网络端口（默认 38450）用于 MCP 服务器与 Figma 插件之间的 WebSocket 通信

风险与副作用

项目仍处于早期阶段（版本 0.1.0），为社区维护而非官方支持
具体工具集尚未在文档中列出（标记为 TBD），行为透明度有限
作者明确提示：若在网络环境中暴露该服务，需自行承担安全风险
插件尚未通过 Figma 官方审核，只能以开发者模式手动导入，流程可能随后续更新变化

安装接入

准备工作

运行环境：Node.js

其他可选配置项（1 个）

TRANSPORT 可选可选环境变量，用于选择传输方式，取值可为 stdio 或 streamable-http；不设置时按所用启动方式默认即可。

安装 Node.js 并克隆仓库 Antonytm/figma-mcp-server。
构建并加载 Figma 插件：进入 plugin 目录，执行 npm i 与 npm run build，然后在 Figma 中通过 Plugins > Development > Import plugin from manifest 选择 /plugin/manifest.json，并启动该插件，直到看到 “Connected to MCP server” 提示。
启动 MCP 服务器：进入 mcp 目录，执行 npm i 与 npm run start，控制台应显示 “Server listening on http://localhost:38450”。
在你的 AI 客户端中配置 Streamable HTTP 传输，地址为 http://localhost:38450/mcp（也可通过 TRANSPORT 环境变量切换为 stdio），并按需关闭不需要的工具。

claude_desktop_config.json

{"mcpServers": {"figma": {"url": "http://localhost:38450/mcp"}}}

以 Claude Desktop 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "figma": {
      "url": "http://localhost:38450/mcp"
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add --transport http figma http://localhost:38450/mcp

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

先在 Figma 中启动插件并看到 'Connected to MCP server'，再运行 MCP 服务器并确认控制台输出 'Server listening on http://localhost:38450'；然后在客户端使用 streamable-http 地址 http://localhost:38450/mcp 连接，检查工具列表中出现了该服务器的工具。

常见排障

确认 Figma 插件窗口显示 “Connected to MCP server”，而非 “Not connected to MCP server”
确认 MCP 服务器控制台输出 “Server listening on http://localhost:38450” 及用户连接日志
检查导入插件时选择的是 /plugin/manifest.json 且已执行最新的 npm run build
确认客户端配置的传输方式（stdio 或 streamable-http）与 TRANSPORT 环境变量及服务器实际监听方式一致
确认本地 38450 端口未被其他进程占用

试试这样问

连接成功后，可以直接对 AI 助手这样说：

帮我在当前 Figma 文档里实现这个设计
把选中的 Figma 框架里的标题文字改成 'Welcome'
在 Figma 页面中新建一个按钮组件
列出当前 Figma 文档中的所有图层

使用场景

让 AI 代理根据自然语言描述在已打开的 Figma 文件中直接创建或修改设计元素

在聊天界面中迭代设计，无需在 Figma Make 与 Figma 主应用之间来回搬运结果

为设计到实现的工作流添加自动化，减少手动重复操作

支持客户端

Claude Desktop部分支持

依据项目文档列出，未经本站实测。

详细介绍

figma-mcp-server 是一个非官方的社区项目（当前版本 0.1.0，Apache-2.0 许可），旨在解决官方 Figma MCP 服务器只能只读的问题。它由两部分组成：一个运行在本地的 MCP 服务器（Express.js + Socket.IO）和一个需要手动以开发者模式导入 Figma 的插件。MCP 服务器将工具调用放入队列并通过 WebSocket 发送给 Figma 插件；插件在打开的 Figma 文档中执行相应操作，并把结果回传给 MCP 服务器。服务器支持 stdio 和 streamable-http（默认监听 http://localhost:38450/mcp）两种传输方式。README 中具体的工具列表标记为“待定（TBD）”，尚未正式公布。作者说明该服务器仅在本机运行，不会将信息暴露到网络；若要在网络环境中使用需自行承担风险。项目正在申请成为官方 Figma 插件，但截至目前尚未通过 Figma 审核。