JinDaGe - Figma Context MCP Details

article

README

🚀 Figma MCP 服务器

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

🚀 快速开始

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

✨ 主要特性

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

📦 安装指南

本地开发和打包

克隆本仓库。
安装依赖：pnpm install。
复制 .env.example 为 .env 并填入您的 Figma API 访问令牌。
本地开发：pnpm run dev。
构建项目：pnpm run build。
打包项目：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 连接

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

可用工具

`get_figma_data`

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

参数：

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

Figma Context