使用说明

项目简介

Figma Context MCP Server 是一个 MCP 服务器的实现，它专注于将 Figma 设计文件转化为 AI 模型可以理解的结构化数据，并以 MCP 协议标准提供给 AI 编码工具，如 Cursor、Windsurf 和 Cline。通过此服务器，AI 工具能够直接访问 Figma 设计稿的布局、样式和资源信息，从而更精确地生成符合设计规范的代码，提升开发效率和设计还原度。

主要功能点

Figma 数据解析与转换：高效解析 Figma 设计文件，提取布局、样式、文本和资源信息，并转换为优化的 JSON 格式，减少上下文数据量。
资源管理与访问：托管 Figma 设计资源，提供 AI 工具按需访问设计数据的能力，支持获取文件、画板、组件的详细信息。
图片和图标资源下载：支持从 Figma 设计稿中下载图片和图标资源，方便 AI 工具在代码生成过程中使用。
MCP 协议兼容：遵循模型上下文协议（MCP），通过 JSON-RPC 协议与客户端通信，支持 Stdio 和 SSE 传输协议，易于集成到各种 MCP 客户端工具中。
工具注册与提供：内置 'get_figma_data' 和 'download_figma_images' 两个 MCP 工具，分别用于获取 Figma 设计数据和下载图片资源，满足 AI 工具对设计信息的不同需求。

安装步骤

克隆仓库

git clone https://github.com/1yhy/Figma-Context-MCP.git
cd Figma-Context-MCP

安装依赖 确保已安装 pnpm，然后运行：

pnpm install

或者使用 npm：

npm install

配置 Figma API 令牌 复制 '.env.example' 文件并重命名为 '.env'，然后填写您的 Figma API 访问令牌。
```
FIGMA_API_KEY=YOUR_FIGMA_API_KEY
```
您可以在 Figma 官方文档中了解如何获取 Figma API 访问令牌。

启动服务器 使用 npm 或 pnpm 启动服务器，可以通过命令行参数配置端口和 API 密钥。

方式 1: 使用 npm 全局安装 (推荐)

npm install -g @yhy2001/figma-mcp-server
figma-mcp --figma-api-key=<your-figma-api-key>

方式 2: 从本地包安装 先本地打包：

pnpm run publish:local

然后全局安装本地包：

npm install -g ./figma-mcp-server-1.0.0.tgz
figma-mcp --figma-api-key=<your-figma-api-key>

方式 3: 在项目中使用

npm install @yhy2001/figma-mcp-server --save
npx figma-mcp --figma-api-key=<your-figma-api-key>

服务器配置

对于 MCP 客户端（如 Cursor, Windsurf），您需要在其配置文件中添加 MCP 服务器的配置信息。以下是两种常用的配置方式，选择其一添加到 MCP 客户端的配置文件中即可。

1. 配置启动命令 (command) 及其参数 (args) (推荐用于 Cursor, Windsurf 等工具)

这种方式配置简单，客户端直接通过命令行启动 MCP 服务器。

{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}

参数说明:

'command': 'npx' (通常用于执行本地 node_modules 中的包)
'args': 启动 Figma MCP Server 的参数列表
- '"figma-mcp"': 执行 'figma-mcp' 命令启动服务器
- '--figma-api-key=<your-figma-api-key>': 您的 Figma API 密钥，请替换为您的真实密钥
- '--stdio': 指定使用 Stdio 传输协议，推荐在命令行启动的场景下使用

2. 配置服务器 URL (url) 和环境变量 (env) (适用于支持 HTTP/SSE 的客户端)

这种方式需要服务器预先启动，客户端通过 URL 连接到服务器。

{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

参数说明:

'url': Figma MCP Server 的 SSE Endpoint URL，默认为 'http://localhost:3333/sse'
'env': 环境变量配置
- 'API_KEY': Figma API 密钥，请替换为您的真实密钥，服务器将从环境变量 'API_KEY' 中读取 Figma API 密钥

请注意: '<your-figma-api-key>' 务必替换为您真实的 Figma API 访问令牌。

基本使用方法

启动 Figma Context MCP Server：根据上述安装步骤和服务器配置，启动 Figma MCP Server。
配置 MCP 客户端：在您的 AI 编码工具（如 Cursor）中，按照工具的 MCP 服务器配置指南，填入上述生成的 MCP 服务器配置信息。
连接 Figma 设计稿：在 AI 编码工具中，使用 Agent 模式或 Composer，粘贴 Figma 文件链接，并向 AI 提出您的需求，例如“实现这个 Figma 设计稿”。
AI 工具智能编码：AI 工具将通过 Figma Context MCP Server 获取 Figma 设计数据，并据此生成更贴合设计稿的代码。

可用工具 (Tools)

Figma Context MCP Server 提供了以下 MCP 工具供客户端调用：

get_figma_data: 获取 Figma 文件或特定节点的设计数据。
- 参数:
  - 'fileKey' (String, 必需): Figma 文件 Key。
  - 'nodeId' (String, 可选): Figma 节点 ID (推荐使用，更精确)。
  - 'depth' (Number, 可选): 节点树遍历深度 (按需使用)。
download_figma_images: 下载 Figma 文件中的图片和图标资源。
- 参数:
  - 'fileKey' (String, 必需): Figma 文件 Key。
  - 'nodes' (Array, 必需): 图像节点信息数组，包含 'nodeId', 'imageRef' (可选), 'fileName'。
  - 'localPath' (String, 必需): 项目中存储图像的本地目录路径。

关键词