🚀 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=
方式2：从本地包安装
# 全局安装本地包
npm install -g ./figma-mcp-server-1.0.0.tgz
# 启动服务
figma-mcp --figma-api-key=
方式3：在项目中使用
# 在项目中安装
npm install @yhy2001/figma-mcp-server --save
# 在 package.json 的 scripts 中添加
{
"start-figma-mcp": "figma-mcp --figma-api-key="
}
# 或者直接运行
npx figma-mcp --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=" , "--stdio"]
}
}
}
# 本地使用
{
"mcpServers": {
"Figma MCP": {
"url": "http://localhost:3333/sse",
"env": {
"API_KEY": ""
}
}
}
}
与 Cursor 连接
- 启动服务器：
figma-mcp --figma-api-key=。 - 在 Cursor 的设置 → 功能选项卡中连接 MCP 服务器：
http://localhost:3333。 - 确认连接成功后，在 Agent 模式下使用 Composer。
- 粘贴 Figma 文件链接并要求 Cursor 实现设计。
可用工具
get_figma_data
获取 Figma 文件或特定节点的信息。
参数：
fileKey：Figma 文件的密钥。nodeId：节点 ID（强烈推荐使用）。depth：遍历节点树的深度。