使用说明

项目简介

Figma MCP Server 是一个 MCP (Model Context Protocol) 服务器，它允许大型语言模型 (LLM) 通过标准化的 MCP 协议访问和理解 Figma 设计文件的结构。该服务器可以解析 Figma 文件，提取节点层级关系，从而为 LLM 应用提供设计上下文信息，例如用于设计理解、内容提取或自动化任务。

主要功能点

Figma 文件分析: 能够解析 Figma 文件，提取文件中的节点（如图层、组件、画框等）及其层级结构。
MCP 协议支持: 实现了 MCP 服务器的核心功能，可以通过 MCP 协议与 LLM 客户端进行通信，提供工具注册和调用能力。
REST API 支持: 除了 MCP 协议，还提供了 REST API 接口，方便传统应用或非 MCP 客户端使用。
可配置分析深度: 允许用户配置节点树的分析深度，以便控制返回信息的详细程度和计算资源消耗。

安装步骤

安装 Node.js 和 npm: 确保你的计算机上已安装 Node.js (16+) 和 npm (Node.js 包管理器)。

安装 Figma MCP Server:

全局安装 (推荐): 使用 npm 命令全局安装 'figma-mcp-server'。

npm install -g figma-mcp-server

从源代码安装: 如果你希望从源代码构建或修改服务器，可以克隆 GitHub 仓库并进行安装。

git clone https://github.com/moonray/mcp-figma.git
cd mcp-figma
npm install
npm run build

配置 Figma API 密钥:
- 复制 '.env.example' 文件到 '.env' 文件。
```
cp .env.example .env
```
- 编辑 '.env' 文件，将 'FIGMA_API_KEY' 替换为你的 Figma API 密钥。你可以在 Figma 开发者设置中创建 API 密钥。
```
FIGMA_API_KEY=your_figma_api_key_here
```

服务器配置

对于 MCP 客户端，需要配置以下 JSON 对象以连接到 Figma MCP Server。这个配置描述了如何启动和访问 Figma MCP Server 的 MCP 接口。

{
  "serverName": "FigmaMCP",
  "command": "figma-mcp-server",
  "args": ["--cli"]
}

配置参数说明:

'serverName': 自定义的服务器名称，用于在 MCP 客户端中标识该服务器连接，例如 "FigmaMCP"。
'command': 启动 Figma MCP Server MCP 接口的命令。
- 如果你选择全局安装，可以直接使用 'figma-mcp-server' 命令。
- 如果你选择从源代码安装，并且希望在项目根目录下运行，可以使用 'npm run start' 命令，并添加 '--' 和 '--cli' 参数，例如 '"command": "npm run start", "args": ["--", "--cli"]'。
'args': 传递给启动命令的参数。 '["--cli"]' 参数指定服务器以 MCP 命令行接口模式启动，这是 MCP 客户端连接所必需的。

注意: 请确保 MCP 客户端能够执行 'command' 指定的命令。如果使用全局安装，请确保 'figma-mcp-server' 命令在系统的 PATH 环境变量中。如果从源代码安装，请确保 MCP 客户端的工作目录设置正确，或者使用绝对路径指向启动脚本。

基本使用方法

配置 MCP 客户端连接到 Figma MCP Server 后，客户端可以通过 MCP 协议调用名为 'analyze_figma_file' 的工具。

调用 'analyze_figma_file' 工具时，需要提供以下参数：

'figmaUrl': 要分析的 Figma 文件链接 (URL)。
'depth' (可选): 数字，表示节点树的深度。如果不提供，则默认分析完整树结构。

服务器将返回分析结果，包含 Figma 文件的节点层级结构信息。LLM 可以利用这些信息理解 Figma 设计内容。

例如，一个 MCP 客户端请求可能包含调用 'analyze_figma_file' 工具，并提供 Figma 文件 URL 和指定的深度，服务器将返回 JSON 格式的节点树结构作为响应。

关键词