Figma MCP Server

官方

将 Figma 设计上下文引入你的 AI 编程工作流程。

分类: 开发工具第 60 / 438
Stars: ★ 2.1k 非常热门
传输方式: Streamable HTTP
运行环境: 远程托管（无需本地环境）
凭据: 可选 API Key
最近提交: 1 天前
工具数: 4

64FMRS · C

这是 Figma 官方维护的远程 MCP 服务器，通过 Streamable HTTP 将设计上下文接入 AI 编程工具，支持代码生成、变量提取及（远程）画布写入；使用前需 Figma 账号鉴权，读取类调用受计划/席位速率限制，且服务器为托管而非本地运行。

最强项 · 文档质量 17/20 最弱项 · 可靠性 7/20

可靠性

7/20

安全与权限

12/20

维护活跃度

14/20

文档质量

17/20

安装易用性

14/20

查看各项评分依据

可靠性 7/20: 该仓库本质上是一份使用指南，并非服务端源码；实际 MCP 服务运行在 Figma 托管的远程端点（https://mcp.figma.com/mcp），仓库内没有可核查的测试套件或 CI 工作流来验证工具声明（如 get_design_context、get_variable_defs 等）与真实行为是否一致。README 中的工具描述内部自洽，server.json 符合 schema，但按静态评审规则，没有真实 CI + 测试覆盖关键路径时不得给 12 分以上，故评为 7 分，反映'看似可行但无法静态验证'的状态。
安全与权限 12/20: 服务需通过 OAuth 等方式接入用户 Figma 账户，仓库示例中未出现明文密钥或令牌，不构成红线问题。文档披露了速率限制，体现出一定的资源边界意识。但'写入画布'功能可直接创建/修改 Figma 文件内容，属于有副作用的操作，指南中未说明 MCP 协议层面是否有显式确认机制或权限分级，最小权限与数据流转（设计数据在客户端与 Figma 服务之间传输）披露不完整，因此不能给满分，扣分至 12。
维护活跃度 14/20: 该仓库由 Figma 官方维护，非归档状态，未解决 issue 仅 7 个，星标数较高，且 manifest 版本号 2.2.90 暗示服务端有持续、频繁的迭代节奏，说明有明确的所有权和更新路径。但许可证信息未知，且仓库内未见明确的安全响应渠道说明，故不能给满分。
文档质量 17/20: README 内容详尽，覆盖 VS Code、Cursor、Claude Code、Gemini CLI 等多客户端安装步骤、配置示例、提示词最佳实践、自定义规则示例，并明确披露速率限制与计费信息（Beta 期间免费，未来可能收费）。也链接到官方开发者文档以获取完整工具参数列表。不足之处在于工具参数的权威说明依赖外部链接，仓库内未直接给出，且部分功能（如网页转设计）标注为'逐步上线'，尚不完整，故未给满分。
安装易用性 14/20: 针对多种主流客户端提供了清晰、步骤化的连接说明及配置文件示例（如 mcp.json、Cursor 配置、Claude CLI 命令），因为是远程 HTTP 服务，本地无需复杂运行环境，理论上安装门槛低。但按静态评审规则，没有可执行验证证据（真实 CI 与测试）时上限为 15 分，且部分步骤依赖账户权限与套餐（如 Dev/Full seat）等外部条件，故评为 14 分。

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

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络修改第三方账户数据

适合谁

已有付费 Figma 席位（Dev/Full）、需要频繁从设计生成代码的产品与前端团队
使用组件、变量与 Auto Layout 组织良好的设计系统团队
希望通过 Code Connect 保持生成代码与真实组件一致的团队

不适合谁

需要离线或本地 stdio 方式运行 MCP 服务器的场景（该服务器仅提供远程 Streamable HTTP 连接）
Starter 计划或 View/Collab 席位用户（每月工具调用次数被严格限制，仅 6 次）
需要服务器直接访问本地文件系统的场景（该服务器提供的是 Figma 设计数据，而非文件系统访问）

所需权限

需要 Figma 账号鉴权（如 Gemini CLI 中的 `/mcp auth figma`），以访问用户有权限的 Figma 文件
远程服务器可读取所选 Figma 节点的设计数据（图层、变量、样式、截图）
「写入画布」功能（仅远程服务器）可创建/修改 Figma 文件中的框架、组件、变量与 Auto Layout

风险与副作用

设计数据经由 Figma 官方远程服务器和你的 AI 客户端处理，属于第三方托管服务而非本地运行
写入画布功能可能在代理执行不当指令时意外修改真实 Figma 文件内容
读取类工具调用受 Figma 定价与席位限制的速率限制约束，Starter/View/Collab 用户每月仅 6 次，超限会导致工具不可用
「写入画布」当前处于 Beta 免费阶段，未来可能转为按使用量付费

安装接入

准备工作

运行环境：远程托管（无需本地环境）

1) VS Code：运行「MCP: Add Server」→选择 HTTP→输入 https://mcp.figma.com/mcp →服务器 ID 填 figma，需已启用 GitHub Copilot。2) Cursor：在 Agent 聊天中运行 /add-plugin figma 安装 Figma 插件（含 MCP 配置与技能），或手动在 Settings→MCP 中添加 {"mcpServers":{"figma":{"url":"https://mcp.figma.com/mcp"}}}。3) Claude Code：运行 claude plugin install figma@claude-plugins-official，或手动执行 claude mcp add --transport http figma https://mcp.figma.com/mcp。4) Gemini CLI：运行 gemini extensions install https://github.com/figma/mcp-server-guide，安装后在 CLI 中执行 /mcp auth figma 完成 Figma 账号鉴权。5) 其他支持 Streamable HTTP 的编辑器可手动添加相同的 URL 配置。

.cursor/mcp.json

{"mcpServers": {"figma": {"url": "https://mcp.figma.com/mcp"}}}

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

.vscode/mcp.json

{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

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

Terminal

claude mcp add --transport http figma https://mcp.figma.com/mcp

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

生成并校验客户端配置

验证是否装好

在 VS Code 中打开聊天并输入 #get_design_context，确认 Figma MCP 服务器的工具出现在可用工具列表中；如果没有列出，重启 VS Code。

常见排障

确认 MCP 客户端已正确配置远程 URL https://mcp.figma.com/mcp 且传输方式为 Streamable HTTP
在客户端中输入 `#get_design_context` 或类似方式确认工具已列出；若未列出，重启编辑器
VS Code 用户需确认账号已启用 GitHub Copilot，否则 MCP 功能不可用
若返回内容过大或被截断，先调用 get_metadata 获取节点结构，再针对具体节点调用 get_design_context
若工具调用失败或受限，检查当前 Figma 账号计划与席位类型是否受月度速率限制影响
Gemini CLI 用户需确认已执行 `/mcp auth figma` 完成鉴权

试试这样问

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

根据这个 Figma 链接中的选中框架生成 iOS SwiftUI 代码
获取这个框架中使用的变量名称和值（颜色、间距、字体等）
使用 Chakra UI 为这个布局生成代码，并复用我 src/components/ui 中的组件
获取这个节点的截图作为视觉参考，然后实现这个设计

工具能力 4

get_design_context 只读

为所选 Figma 节点返回结构化的 React + Tailwind 表示，作为 AI 助手翻译成任意框架/代码风格的起点。

get_variable_defs 只读

提取所选内容中使用的变量与样式（颜色、间距、字体等），便于生成代码直接引用设计令牌。

get_metadata 只读

当响应过大或被截断时，返回高层节点结构图，便于只重新拉取所需的具体节点。

get_screenshot 只读

获取所实现节点/变体的可视化截图参考，用于与代码实现比对。

使用场景

选中 Figma 画板并生成对应的前端代码（如 React、SwiftUI 等，取决于提示词）

为设计系统/组件库工作流提取变量、组件与布局数据

结合 Code Connect 复用真实代码库中的组件以提升生成代码一致性

在支持的客户端中通过远程服务器直接创建/修改 Figma 画布内容（写入画布）

从网页生成 Figma 设计（逐步推出中）

支持客户端

VS Code

Cursor

Claude Code

Gemini CLI

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

详细介绍

Figma MCP 服务器由 Figma 官方维护，通过远程 Streamable HTTP 连接（https://mcp.figma.com/mcp）将 Figma 设计文件中的结构化上下文（图层、变量、样式、布局）提供给 AI 编程助手，用于从选中的画板/图层生成代码、提取设计变量，并（通过远程服务器）在 Figma 画布上创建或修改原生内容。仓库本身是使用指南与配置说明，实际服务器由 Figma 托管运行。