项目简介

'Figma Console MCP 服务器' 是一个基于 Model Context Protocol (MCP) 构建的后端服务，旨在将 AI 助手无缝集成到 Figma 设计环境中。它允许 AI 模型直接访问 Figma 的实时控制台、进行视觉调试以及提取设计系统元素，从而极大地提升了 AI 在设计流程中的辅助能力。

主要功能点

• 实时插件调试: 捕获 Figma 插件的控制台日志、错误信息和堆栈跟踪，帮助开发者快速定位问题。
• 可视化调试: 能够截取 Figma 界面截图，为 AI 助手提供直观的视觉上下文，辅助调试和分析。
• 设计系统提取: 自动从 Figma 文件中提取设计变量、组件和样式等设计系统信息，供 AI 进行分析和利用。
• 多模式安装: 支持远程 SSE (Server-Sent Events) 模式实现零配置快速启动，也支持本地 NPX 包或 Git 克隆源代码运行，满足不同用户需求。
• 丰富的工具集: 提供导航、状态查询、控制台操作、截图、设计系统数据获取等多达14种专用工具，赋能AI执行多样化任务。

安装步骤

'Figma Console MCP 服务器' 提供三种主要安装方式，您可以根据自己的需求选择。

1. 远程模式 (推荐，零配置):

   • 最适合人群: 大多数用户，用于设计系统提取和基本调试。
   • 特点: 无需安装，通过 OAuth 自动认证，提供所有Figma工具和设计系统提取（部分高级功能需Figma企业版）。
   • 步骤:
     1. 在您的 MCP 客户端 (例如 Claude Desktop) 中，打开连接器或设置界面，找到添加自定义连接器的选项。
     2. 添加一个自定义连接器。
     3. 将 名称 设置为 'Figma Console'。
     4. 将 URL 设置为 'https://figma-console-mcp.southleft.com/sse'。
     5. 保存并启用。初次使用时，浏览器会自动弹出 Figma 授权页面，授权后即可开始使用。

2. NPX 包模式 (本地执行):

   • 最适合人群: 希望在本地运行服务器但不想克隆源代码的用户，或需要 Desktop Bridge 插件功能的用户。
   • 特点: 需要手动配置 Figma Personal Access Token (PAT)，并启动 Figma 桌面版时启用远程调试端口。
   • 步骤:
     1. 获取您的 Figma Personal Access Token：访问 'https://www.figma.com/developers/api#access-tokens' 并生成一个。
     2. 关闭 Figma 桌面应用，然后使用特定参数重新启动：
        • macOS 用户请在终端运行: 'open -a "Figma" --args --remote-debugging-port=9222'
        • Windows 用户请在命令提示符运行: 'start figma://--remote-debugging-port=9222'
     3. 将 MCP 服务器配置添加到您的 MCP 客户端的配置文件中（例如 '.claude.json' 或 'claude_desktop_config.json'）。请参考下方的“服务器配置”部分了解具体配置信息。

3. 本地 Git 模式 (开发者推荐):

   • 最适合人群: Figma 插件开发者，需要零延迟调试、无 Enterprise 计划访问变量，或需要访问 Figma 桌面状态的用户。此模式支持独有的 'Desktop Bridge' 插件。
   • 特点: 需要克隆源代码、安装 Node.js 依赖，手动配置 Figma PAT，并启动 Figma 桌面版时启用远程调试端口。
   • 步骤:
     1. 安装服务器:
        • 打开终端/命令行工具，克隆仓库：'git clone https://github.com/southleft/figma-console-mcp.git'
        • 进入仓库目录：'cd figma-console-mcp'
        • 安装依赖：'npm install'
        • 构建本地模式：'npm run build:local'
     2. 获取 Figma Personal Access Token:
        • 访问 'https://www.figma.com/developers/api#access-tokens'，生成并复制您的令牌。
     3. 启动 Figma 桌面版并启用远程调试:
        • 关闭 Figma 桌面应用，然后使用特定参数重新启动（同 NPX 包模式）。
     4. 配置 MCP 客户端:
        • 将 MCP 服务器配置添加到您的 MCP 客户端的配置文件中（例如 Claude Desktop 的配置文件）。请参考下方的“服务器配置”部分了解具体配置信息，并确保替换为您的实际文件路径和令牌。
     5. 重启 MCP 客户端: 完全退出并重新启动您的 MCP 客户端，MCP 服务器将自动连接。
     6. 如果需要使用“Desktop Bridge 插件”获取高级功能（如无企业版获取变量），请从 Releases 下载插件并按照文档导入到 Figma Desktop 中运行。

服务器配置 (MCP 客户端侧配置示例)

MCP 客户端需要配置 MCP 服务器的启动信息才能连接。以下是客户端中配置 'Figma Console MCP 服务器' 的示例描述（请根据您的实际 MCP 客户端类型和其配置方式进行调整，通常需要设置名称、传输协议、命令及参数）：

• 远程 SSE 模式:

  • 服务器名称 (Server Name): 'figma-console'
  • 传输协议 (Transport Protocol): SSE (Server-Sent Events)
  • 服务器 URL (Server URL): 'https://figma-console-mcp.southleft.com/sse' (此模式下，客户端通常无需配置命令和参数，只需提供URL)

• NPX 包模式 (Stdio 传输):

  • 服务器名称 (Server Name): 'figma-console'
  • 传输协议 (Transport Protocol): Stdio (标准输入输出)
  • 启动命令 (Command): 'npx' (用于执行 npm 包的命令)
  • 命令参数 (Args): '-y', 'figma-console-mcp@latest' (指示 npm 安装并运行最新版的 'figma-console-mcp' 包)
  • 环境变量 (Env): 'FIGMA_ACCESS_TOKEN: your_figma_access_token_here' (请将 'your_figma_access_token_here' 替换为您的 Figma 个人访问令牌)

• 本地 Git 模式 (Stdio 传输):

  • 服务器名称 (Server Name): 'figma-console-local'
  • 传输协议 (Transport Protocol): Stdio (标准输入输出)
  • 启动命令 (Command): 'node' (Node.js 运行时)
  • 命令参数 (Args): '/absolute/path/to/figma-console-mcp/dist/local.js' (请将 '/absolute/path/to/figma-console-mcp' 替换为您本地仓库的实际绝对路径，指向编译后的本地模式入口文件)
  • 环境变量 (Env): 'FIGMA_ACCESS_TOKEN: figd_YOUR_TOKEN_HERE' (请将 'figd_YOUR_TOKEN_HERE' 替换为您的 Figma 个人访问令牌)

基本使用方法

配置并连接 MCP 服务器后，您可以通过 AI 助手直接与 Figma 进行交互。

1. 检查连接状态:

   • 向 AI 提问: '"Check Figma status"'
   • 预期 AI 回复: 显示“✅ Figma Desktop connected”（如果是本地模式）或类似已连接的提示。

2. 设计系统提取:

   • 向 AI 提问: '"Get all design variables from [您的 Figma 文件 URL]"' (例如: 'https://figma.com/design/abc123')
   • 预期 AI 回复: 返回 Figma 文件中的设计变量数据。

3. 插件调试 (本地模式特有):

   • 向 AI 提问: '"Navigate to my Figma plugin and show me any console errors"'
   • 预期 AI 回复: 打开 Figma 插件并返回控制台错误信息。

4. 视觉调试:

   • 向 AI 提问: '"Take a screenshot of the current Figma canvas"'
   • 预期 AI 回复: 截取当前 Figma 画布的图片。