使用说明

Figma MCP服务器

用于与 Figma API 集成的 Model Context Protocol （MCP）服务器。它允许您通过MCP工具导出Figma文件，页面，组件，节点和图像。

📋 索引

先决条件
安装
配置
使用
可用工具
项目结构
开发
故障排除

🔧 先决条件

Node.js 18+
npm瓯纱
TypeScript 5.0+
Figma API 访问令牌

如何获得Figma令牌

访问 Figma
进去设置 → 账户 → 个人访问令牌
Clique em 创建新令牌
复制生成的令牌（您只会看到它一次！）

📦 安装

克隆仓库：

git clone <repository-url>
cd mcp-figma

安装依赖关系：

npm install
# ou
yarn install

编译工程：

npm run build
# ou
yarn build

配置您的 Figma 令牌（请参阅本节）配置)

⚙️ 配置

选项 1：环境变量（推荐）

设置环境变量 FIGMA_API_TOKEN:

Windows（PowerShell）：

$env:FIGMA_API_TOKEN = "seu-token-figma"

Windows（CMD）：

set FIGMA_API_TOKEN=seu-token-figma

Linux/Mac：

export FIGMA_API_TOKEN="seu-token-figma"

要在 Windows 中永久化：

打开 环境变量 系统
添加 FIGMA_API_TOKEN 用户或系统变量

选项 2: 光标设置

复制示例文件：

cp .cursordev/settings.json.example .cursordev/settings.json

编辑文件 .cursordev/settings.json 哦 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "FigmaMCP": {
      "command": "node",
      "args": ["/caminho/absoluto/para/seu/projeto/mcp-figma/dist/index.js"],
      "env": {
        "FIGMA_API_TOKEN": "seu-token-figma-aqui"
      }
    }
  }
}

注：

调整路径 args 您的项目的绝对路径
文件 .cursordev/settings.json 在 .gitignore 它不会被承诺
使用文件 .cursordev/settings.json.example 作为参考

🚀 使用

启动服务器

npm start
# ou
yarn start

MCP 服务器通过 stdio 运行，并等待 MCP 客户端的请求。

Usar无光标/克劳德桌面

配置 MCP 服务器后，您可以直接使用这些工具：

@FigmaMCP exportFullFile fileId="seu-file-id"

或使用明确的令牌：

@FigmaMCP exportFullFile fileId="seu-file-id" token="seu-token"

🛠️ 可用工具

1. `exportFullFile`

导出完整的 Figma 文件。

参数：

fileId （必填）： Figma 文件 ID
token （可选）： Figma API 令牌（如果不在 env var 中）

例如：

@FigmaMCP exportFullFile fileId="abc123xyz"

2. `exportPages`

导出 Figma 文件中的所有页面。

参数：

fileId （必填）： Figma 文件 ID
token （可选）： Figma API 令牌

例如：

@FigmaMCP exportPages fileId="abc123xyz"

3. `exportPageFrames`

导出特定页面的框架。

参数：

fileId （必填）： Figma 文件 ID
pageName （必填）：网页名称
token （可选）： Figma API 令牌

例如：

@FigmaMCP exportPageFrames fileId="abc123xyz" pageName="Home"

4. `exportComponents`

导出 Figma 文件中的所有组件。

参数：

fileId （必填）： Figma 文件 ID
token （可选）： Figma API 令牌

例如：

@FigmaMCP exportComponents fileId="abc123xyz"

5. `exportNodes`

从 Figma 文件导出特定节点。

参数：

fileId （必填）： Figma 文件 ID
ids （必填）：节点 ID 数组
token （可选）： Figma API 令牌

例如：

@FigmaMCP exportNodes fileId="abc123xyz" ids=["node1", "node2"]

6. `exportImages`

导出特定节点的图像。

参数：

fileId （必填）： Figma 文件 ID
ids （必填）：节点 ID 数组
token （可选）： Figma API 令牌

例如：

@FigmaMCP exportImages fileId="abc123xyz" ids=["node1", "node2"]

7. `exportTokens`

返回关于设计令牌（手动提取）的信息。

参数：

例如：

@FigmaMCP exportTokens

📁 项目结构

mcp-figma/
├── src/
│   ├── api/
│   │   └── figmaClient.ts      # Cliente para API do Figma
│   ├── handlers/
│   │   ├── exportFullFile.ts   # Handler para exportar arquivo completo
│   │   ├── exportPages.ts      # Handler para exportar páginas
│   │   ├── exportPageFrames.ts  # Handler para exportar frames
│   │   ├── exportComponents.ts # Handler para exportar componentes
│   │   ├── exportNodes.ts      # Handler para exportar nodes
│   │   ├── exportImages.ts     # Handler para exportar imagens
│   │   └── exportTokens.ts    # Handler para exportar tokens
│   ├── mcp/
│   │   ├── registry.ts         # Registro do servidor MCP
│   │   └── schema.ts           # Schema dos métodos MCP
│   ├── utils/
│   │   ├── logger.ts           # Utilitário de logging
│   │   └── parseNodes.ts       # Utilitário para parsing de nodes
│   └── index.ts                # Ponto de entrada do servidor
├── dist/                       # Código compilado (gerado)
├── package.json
├── tsconfig.json
└── README.md

💻 开发

可用脚本

# Compilar TypeScript
npm run build

# Iniciar o servidor
npm start

编译

该项目使用TypeScript并编译为ES2020模块：

npm run build

在文件夹中生成已编译的文件 dist/.

添加新工具

创建处理器 src/handlers/:

import { FigmaClient } from "../api/figmaClient.js";

export async function exportNovaFerramenta(token: string, fileId: string) {
  const client = new FigmaClient(token);
  // Sua lógica aqui
  return result;
}

将导入添加到 src/index.ts:

import { exportNovaFerramenta } from "./handlers/exportNovaFerramenta.js";

将工具注册到 ListToolsRequestSchema:

{
  name: "exportNovaFerramenta",
  description: "Descrição da ferramenta",
  inputSchema: {
    type: "object",
    properties: {
      token: { type: "string", description: "..." },
      fileId: { type: "string", description: "..." },
    },
    required: ["fileId"],
  },
}

添加字符串 CallToolRequestSchema:

case "exportNovaFerramenta":
  result = await exportNovaFerramenta(token, params.fileId as string);
  break;

推荐：

npm run build

🐛 故障排除

错误：“找不到模块”

问题： 编译后找不到模块。

解决方案：

npm install
npm run build

错误：“需要Figma API令牌”

问题： 未配置令牌。

解决方案：

设置环境变量 FIGMA_API_TOKEN
或将令牌作为通话中的参数传递

错误：“意外标记'F'…不是有效的JSON”

问题： 将日志发送到 stdout，干扰 JSON-RPC。

解决方案： 已修正！日志现在转到 stderr 。如果仍然发生，请检查是否有 console.log() 没有代码。

错误：“ERR_MODULE_NOT_FOUND”

问题： 无扩展名导入 .js.

解决方案： 所有相对进口必须有扩展 .js:

import { algo } from "./arquivo.js"; // ✅ Correto
import { algo } from "./arquivo";    // ❌ Errado

服务器未启动

问题： 启动服务器出错。

解决方案：

检查是否已编译： npm run build
检查路径 settings.json
检查 Node.js 是否已安装： node --version

如何查找Figma文件ID

File ID 在 Figma 文件的 URL 中：

https://www.figma.com/file/FILE_ID_HERE/nome-do-arquivo

例如：

网址： https://www.figma.com/file/abc123xyz/Meu-Design
文件ID: abc123xyz

📚 资源

🔒 安全

重要提示： 永远不要在仓库中提交令牌或敏感信息！

文件 .cursordev/settings.json 在 .gitignore 它不会被承诺
在生产中使用代币的环境变量
使用文件 .cursordev/settings.json.example 作为参考
如果您不小心提交了一个令牌，请立即在Figma中撤销并生成一个新的令牌。

📦 发布

该项目已准备好公开分享。请确保：

✅ 不要提交令牌或敏感信息
✅ Ter o .gitignore 正确配置
✅ 拥有完整和最新的README
✅ 有没有令牌的配置示例

📝 许可证

这个项目是根据许可证 MIT许可证.

👥 贡献

创建项目分叉
为您的功能创建一个分支（git checkout -b feature/AmazingFeature)
提交您的更改（git commit -m 'Add some AmazingFeature')
推动一个分支(git push origin feature/AmazingFeature)
Abra um Pull请求

📧 联系方式

不和谐：godzamy

使用说明

Figma MCP服务器

📋 索引

🔧 先决条件

如何获得Figma令牌

📦 安装

⚙️ 配置

选项 1：环境变量（推荐）

选项 2: 光标设置

🚀 使用

启动服务器

Usar无光标/克劳德桌面

🛠️ 可用工具

1. exportFullFile

2. exportPages

3. exportPageFrames

4. exportComponents

5. exportNodes

6. exportImages

7. exportTokens

📁 项目结构

💻 开发

可用脚本

编译

添加新工具

🐛 故障排除

错误：“找不到模块”

错误：“需要Figma API令牌”

错误：“意外标记'F'…不是有效的JSON”

错误：“ERR_MODULE_NOT_FOUND”

服务器未启动

如何查找Figma文件ID

📚 资源

🔒 安全

📦 发布

📝 许可证

👥 贡献

📧 联系方式

相关 MCP

Blender 3D建模MCP服务

iOS模拟器交互服务器

网页抓取与搜索MCP服务器

B站视频搜索服务

Minecraft MCP服务器

SSH远程命令执行MCP服务器

1. `exportFullFile`

2. `exportPages`

3. `exportPageFrames`

4. `exportComponents`

5. `exportNodes`

6. `exportImages`

7. `exportTokens`