Figma-Context MCP 服务器

“Figma-Context” MCP 服务器的作用

Figma-Context MCP 服务器是一款旨在弥合 AI 编码代理与 Figma 设计布局之间鸿沟的工具。通过模型上下文协议（MCP）暴露 Figma 布局数据，它使 AI 助手（如 Cursor 等平台中的 AI）能够在开发流程中直接获取、分析并理解 Figma 文件。这使得 AI 可以在 UI 实现、代码生成、组件提取或设计转代码等场景下，利用 Figma 项目的最新布局信息进行协助。该服务器作为中间层，促进与 Figma 的安全、结构化 API 交互，并将数据以上下文形式提供给大语言模型和开发者。

提示词列表

仓库及其文档中未列出明确的提示模板。

资源列表

仓库及其文档中未描述明确的 MCP 资源。

工具列表

未找到明确的工具列表（如 server.py 或代码清单）。现有文档中也未提供工具端点或函数的详细信息。

本 MCP 服务器的使用场景

• UI 实现辅助： 允许 AI 代理访问 Figma 布局，协助开发者将设计转化为代码，确保像素级还原。
• 组件提取： 自动识别并提取 Figma 文件中的可复用组件，加速前端开发。
• 设计评审自动化： 为 AI 提供上下文，自动对比代码与 Figma 设计，及时发现不一致问题。
• 文档生成： AI 可直接基于 Figma 布局生成 UI 元素文档，提升团队沟通效率。
• 快速原型开发： 基于实时 Figma 文件快速生成代码原型，加快迭代周期。

如何进行设置

Windsurf

1. 确保已安装 Node.js。
2. 找到你的 Windsurf 配置文件。
3. 在 mcpServers 部分添加 Figma-Context MCP 服务器的 JSON 片段：

   {
     "figma-context": {
       "command": "npx",
       "args": ["@GLips/figma-context-mcp-server@latest"]
     }
   }
   

4. 保存配置并重启 Windsurf。
5. 通过 Windsurf 日志或界面确认服务器已启动。

API 密钥安全

将 Figma API 密钥存储为环境变量，并在配置中引用：

{
  "figma-context": {
    "env": {
      "FIGMA_API_KEY": "${FIGMA_API_KEY}"
    },
    "inputs": {
      "figmaApiKey": "${FIGMA_API_KEY}"
    }
  }
}

Claude

1. 安装 Node.js。
2. 打开 Claude 的配置面板或文件。
3. 在 mcpServers 数组中插入 Figma-Context MCP 服务器：

   {
     "figma-context": {
       "command": "npx",
       "args": ["@GLips/figma-context-mcp-server@latest"]
     }
   }
   

4. 保存并重启 Claude。
5. 通过 Claude 检查服务器状态确认连接。

Cursor

1. 确认已安装 Node.js。
2. 编辑 Cursor 的设置或配置文件。
3. 在 mcpServers 属性中添加如下内容：

   {
     "figma-context": {
       "command": "npx",
       "args": ["@GLips/figma-context-mcp-server@latest"]
     }
   }
   

4. 保存更改并重启 Cursor。
5. 通过日志或界面检查服务器是否成功启动。

Cline

1. 若未安装 Node.js，请先安装。
2. 进入 Cline 配置。
3. 添加 Figma-Context MCP 服务器：

   {
     "figma-context": {
       "command": "npx",
       "args": ["@GLips/figma-context-mcp-server@latest"]
     }
   }
   

4. 保存并重新启动 Cline。
5. 通过 Cline 诊断功能验证集成是否成功。

注意： 始终按照 Windsurf 部分所示，使用环境变量安全存储和引用你的 Figma API 密钥。

在流程中如何使用该 MCP

在 FlowHunt 中集成 MCP

要将 MCP 服务器集成到 FlowHunt 工作流中，首先需要将 MCP 组件添加到你的流程，并将其与 AI 代理连接：

点击 MCP 组件以打开配置面板。在系统 MCP 配置部分，使用如下 JSON 格式填写你的 MCP 服务器信息：

{
  "figma-context": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

配置完成后，AI 代理即可作为工具使用此 MCP，访问其全部功能和能力。请记得将 "figma-context" 替换为你实际的 MCP 服务器名称，并将 URL 替换为你自己的 MCP 服务器地址。

概览

本 MCP 的实现提供了清晰的概览和安装说明，但在提示词、资源和具体工具端点等方面缺少详细文档，影响了其对自定义工作流的即用性和发现性。

MCP 评分

评分总结：
基于上述信息，我会给该 MCP 服务器打 4/10。它概览清晰、开源且广受关注（Star/Fork 很多），但关于 MCP 工具、资源和提示词的详细文档缺失，这对高级 MCP 集成和开发者采纳非常关键。