Figma MCP 服务器指南

Figma MCP 服务器通过向从 Figma 设计文件生成代码的 AI 代理提供重要的设计信息和上下文，将 Figma 直接带入你的工作流程。

[!NOTE] 从 Figma 读取数据的 Figma MCP 服务器工具适用速率限制。部分工具（例如写入 Figma 文件的工具）不受速率限制。

Starter 套餐用户，或付费套餐中拥有 View 或 Collab 席位的用户，每月最多可进行 6 次工具调用。

拥有 Dev 或 Full 席位 且使用 Professional、Organization 或 Enterprise 套餐 的用户，适用每分钟速率限制，与 Tier 1 Figma REST API 的限制相同。与 Figma 的 REST API 一样，Figma 保留更改速率限制的权利。

有关 Figma MCP 服务器的完整文档，请参阅我们的开发者文档。使用 Figma MCP 服务器及相关资源（包括这些技能）即表示你同意 Figma 开发者条款。这些技能目前作为 Beta 功能提供。

功能

• 写入画布（仅限远程服务器）：直接从你的 MCP 客户端创建和修改原生 Figma 内容。借助相应的技能，代理可以使用你的设计系统作为唯一事实来源，在 Figma 文件中构建和更新框架、组件、变量和自动布局。

  注意： 我们正在快速改进 Figma 对 AI 代理的支持。写入画布功能最终将成为基于使用量的付费功能，但在 Beta 期间目前免费提供。

• 从选中的框架生成代码

  选择一个 Figma 框架并将其转换为代码。非常适合构建新流程或迭代应用功能的产品团队。

• 提取设计上下文

  将变量、组件和布局数据直接导入你的 IDE。这对于设计系统和基于组件的工作流程尤其有用。

• 使用 Code Connect 更智能地编写代码

  通过复用你的实际组件来提高输出质量。Code Connect 使生成的代码与你的代码库保持一致。

  了解更多关于 Code Connect 的信息 →

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

  直接从你的 AI 编码代理捕获、导入或转换网页为 Figma 设计。

安装与设置

连接到 Figma MCP 服务器

不同的 MCP 客户端需要略有不同的设置。请按照以下针对你特定客户端的说明连接到 Figma MCP 服务器。

VS Code

1. 使用快捷键 ⌘ Shift P 搜索 MCP:Add Server。
2. 选择 HTTP。
3. 在搜索栏中粘贴服务器 URL https://mcp.figma.com/mcp，然后按 Enter。
4. 当提示输入服务器 ID 时，输入 figma。
5. 选择是全局添加此服务器还是仅添加到当前工作区。确认后，你将在 mcp.json 文件中看到如下配置：

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

6. 使用 ⌥⌘B 或 ⌃⌘I 打开聊天工具栏，并切换到 Agent 模式。
7. 在聊天打开的情况下，输入 #get_design_context 以确认 Figma MCP 服务器工具可用。如果没有列出任何工具，请重启 VS Code。

[!NOTE] 你必须在账户上启用 GitHub Copilot 才能在 VS Code 中使用 MCP。

更多信息，请参阅 VS Code 官方文档。

Cursor

在 Cursor 中设置 Figma MCP 服务器的推荐方式是安装 Figma 插件，该插件包含 MCP 服务器设置以及用于常见工作流程的 Agent Skills。

在 Cursor 的代理聊天中输入以下命令来安装插件：

/add-plugin figma

该插件包含：

• Figma MCP 服务器的 MCP 服务器配置
• 用于实现设计、通过 Code Connect 连接组件以及创建设计系统规则的技能
• 关于正确处理来自 Figma MCP 服务器资产的规则

手动设置

1. 打开 Cursor → Settings → Cursor Settings。
2. 进入 MCP 选项卡。
3. 点击 + Add new global MCP server。
4. 输入以下配置并保存：

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

更多信息，请参阅 Cursor 官方文档。

Claude Code

在 Claude Code 中设置 Figma MCP 服务器的推荐方式是安装 Figma 插件。