Figma Context

🚀 Figma MCP 服务器

Figma MCP 服务器是一款用于与 Figma 设计工具交互的中间件。它支持通过 MCP 协议 提供 Figma 文件和资源的数据访问，允许 AI 工具（如 Claude、ChatGPT 等）直接获取并操作 Figma 项目中的设计资产。

🚀 快速开始

Figma MCP 服务器能为 AI 工具与 Figma 之间搭建桥梁，让您轻松获取和操作设计资产。下面将为您详细介绍其使用方法。

✨ 主要特性

1. 获取 Figma 数据：支持通过 get_figma_data 工具获取 Figma 文件的元数据以及特定节点的信息。
2. 下载图像资源：通过 download_figma_images 工具下载 Figma 文件中的图片和图标资源。
3. 命令行运行：可以通过命令行启动服务器，并支持多种模式（如 HTTP 和 SSE）与 AI 工具集成。

📦 安装指南

本地开发和打包

1. 克隆本仓库。
2. 安装依赖：pnpm install。
3. 复制 .env.example 为 .env 并填入您的 Figma API 访问令牌。
4. 本地开发：pnpm run dev。
5. 构建项目：pnpm run build。
6. 打包项目：pnpm run publish:local。

打包后会在项目根目录生成一个 .tgz 文件，如 figma-mcp-server-1.0.0.tgz。

本地安装使用

有三种方式可以使用该服务：

方式1：从NPM安装（推荐）

# 全局安装
npm install -g @yhy2001/figma-mcp-server

# 启动服务
figma-mcp --figma-api-key=<your-figma-api-key>

方式2：从本地包安装

# 全局安装本地包
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

# 在 package.json 的 scripts 中添加
{
  "start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"
}

# 或者直接运行
npx figma-mcp --figma-api-key=<your-figma-api-key>

命令行参数

• --version：显示版本号。
• --figma-api-key：您的 Figma API 访问令牌（必需）。
• --port：服务器运行的端口（默认：3333）。
• --stdio：以命令模式运行服务器，而不是默认的 HTTP/SSE 模式。
• --help：显示帮助菜单。

📚 详细文档

与 AI 工具连接

在配置文件中使用

许多工具如 Cursor、Windsurf 和 Claude Desktop 使用配置文件来启动 MCP 服务器。您可以在配置文件中添加以下内容：

# MCP Client 使用
{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}
# 本地使用
{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

与 Cursor 连接

1. 启动服务器：figma-mcp --figma-api-key=<your-figma-api-key>。
2. 在 Cursor 的设置 → 功能选项卡中连接 MCP 服务器：http://localhost:3333。
3. 确认连接成功后，在 Agent 模式下使用 Composer。
4. 粘贴 Figma 文件链接并要求 Cursor 实现设计。

可用工具

get_figma_data

获取 Figma 文件或特定节点的信息。

参数：

• fileKey：Figma 文件的密钥。
• nodeId：节点 ID（强烈推荐使用）。
• depth：遍历节点树的深度。