Figma MCP Server 使用说明

项目简介

Figma MCP Server 是一个实现了 Model Context Protocol (MCP) 的服务器，旨在为大型语言模型（LLM）客户端提供与 Figma API 集成的桥梁。通过这个服务器，LLM 可以访问和操作 Figma 设计文件和设计系统数据，例如读取文件信息、列出项目文件、管理设计变量和主题等。目前该服务器主要支持只读操作，但架构设计已为未来更高级的设计管理功能（如设计令牌和主题管理）预留了扩展空间。

主要功能点

Figma API 集成: 通过 MCP 协议，为 LLM 客户端提供对 Figma API 的访问能力。
文件操作: 支持读取 Figma 文件和列出项目文件。
设计系统管理 (部分实现):
- 变量管理 (架构已支持，但受 Figma API 限制，当前为只读)
- 主题管理 (架构已支持，但受 Figma API 限制，当前为只读)
- 引用处理 (架构已支持，但受 Figma API 限制，当前为只读)
性能优化:
- 使用 LRU 缓存提高数据访问速度。
- 实施速率限制处理，避免 API 调用超限。
监控: 提供健康检查、使用统计和错误跟踪等监控功能。
传输协议: 支持 Stdio 和 SSE 传输协议。
工具:
- 'get-file': 获取 Figma 文件详细信息。
- 'list-files': 列出 Figma 项目中的文件。
- 'create-variables' (待API支持): 创建设计系统变量。
- 'create-theme' (待API支持): 创建和配置主题。

安装步骤

安装 Node.js: 确保已安装 Node.js 18.x 或更高版本。

安装 Figma MCP Server:

npm install figma-mcp-server

服务器配置

MCP 服务器需要配置在 MCP 客户端中，以便客户端能够连接并使用服务器提供的功能。以 Claude Desktop 为例，配置信息应添加到 'claude_desktop_config.json' 文件中。

Claude Desktop 配置示例 (JSON 格式):

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"]
    }
  }
}

配置参数说明:

'server name': 'figma' (服务器名称，客户端用以识别和调用)
'command': 'node' (启动服务器的命令)
'args': '["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"]' (启动命令的参数，指向服务器入口文件 'dist/index.js' 的绝对路径)

注意:

必须使用绝对路径配置 'args' 中的服务器入口文件路径。
Windows 系统路径中的反斜杠 '' 需要转义为双反斜杠 '\'。
修改配置文件后需要重启 Claude Desktop 才能生效。

基本使用方法

服务器启动后，MCP 客户端可以通过 JSON-RPC 协议调用服务器提供的工具 (Tools) 来实现与 Figma 的交互。

可用工具示例:

get-file: 获取 Figma 文件信息

{
  "name": "get-file",
  "arguments": {
    "fileKey": "your_figma_file_key"
  }
}

list-files: 列出 Figma 项目文件

{
  "name": "list-files",
  "arguments": {
    "projectId": "your_figma_project_id"
  }
}

更多工具和详细使用方法请参考项目 'README.md' 文件或 API 文档。

关键词