Figma MCP Tool

Figma MCP工具

英语| 简体中文

模型上下文协议（MCP）服务器，与Figma API集成以导出图像和提取风格数据。

特性

• 🖼️ 图像输出：从Figma URL导出节点图像；支持PNG、JPG、SVG、PDF
• 🎨 风格提取：获取设计元素的详细样式数据；支持CSS生成
• 📦 批量导出：一次性导出多个节点
• 🔄 智能重试：内置重试以处理网络打嗝和API限制
• 🛡️ 稳健的错误：明确的错误处理和故障排除指南
• 🧩 设计要素分析：深入分析设计中的图像、矢量和组件🆕
• 📋 SVG提取：直接获取矢量图形的SVG代码🆕

安装并运行

选项1：通过npx运行（推荐，无需安装）

npx figma-mcp-full-server figd_your_figma_token_here

选项2：全局安装

# Install globally
npm install -g figma-mcp-full-server

# Run
figma-mcp-full-server figd_your_figma_token_here

选项3：本地项目安装

# Install in your project
npm install figma-mcp-full-server

# Run
npx figma-mcp-full-server figd_your_figma_token_here
# or
node_modules/.bin/figma-mcp-full-server figd_your_figma_token_here

选项4：从源代码运行（用于开发）

git clone 
cd figma-mcp
npm install
npm run build

# Run
npm start figd_your_figma_token_here
# or
node build/index.js figd_your_figma_token_here

快速开始

1.获取Figma访问令牌

1. 登录到 Figma
2. 打开设置
3. 查找“个人访问令牌”部分
4. 点击“创建新令牌”
5. 复制令牌（以开头 figd_)

2.在Claude Desktop中配置

编辑Claude配置文件（选择您的操作系统）：

macOS/Linux： ~/.config/claude-desktop/config.json\ 窗户： %APPDATA%\Claude Desktop\config.json

选择以下设置之一：

设置A：通过npx运行（推荐）

{
  "mcpServers": {
    "figma-mcp-full-server": {
      "command": "npx",
      "args": ["figma-mcp-full-server"],
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

安装程序B：全局安装

npm install -g figma-mcp-full-server

{
  "mcpServers": {
    "figma-mcp-full-server": {
      "command": "figma-mcp-full-server",
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

设置C：从项目中使用

npm install figma-mcp-full-server

{
  "mcpServers": {
    "figma-mcp-full-server": {
      "command": "npx",
      "args": ["figma-mcp-full-server"],
      "cwd": "/path/to/your/project",
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

设置D：从源代码运行

{
  "mcpServers": {
    "figma-mcp": {
      "command": "node",
      "args": [
        "/absolute/path/to/figma-mcp/build/index.js"
      ],
      "cwd": "/absolute/path/to/figma-mcp",
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

⚠️ 笔记：

• 推荐：安装程序A（npx）--不安装，始终为最新版本
• 全局安装：如果你经常使用，那很好
• 项目安装：为每个项目固定一个版本
• 来源：用于开发和定制
• 替换 figd_your_figma_token_here 用你真正的Figma代币

3.重新启动克劳德桌面

重新启动Claude Desktop以应用配置。

用法

配置后，直接在Claude中使用它：

获取Figma图像

Please fetch images from this Figma URL:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name?node-id=123-456&t=abc123-0

获取样式数据并生成CSS

Please get style data from this design and generate CSS:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name?node-id=123-456&t=abc123-0

获取文件信息

Please show the basic info for this Figma file:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name

获取设计元素🆕

Please analyze what design elements this Figma node contains:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name?node-id=123-456&t=abc123-0

获取图像资产🆕

Please extract all image assets under this Figma node:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name?node-id=123-456&t=abc123-0

获取SVG数据🆕

Please get the SVG code for this Figma node:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name?node-id=123-456&t=abc123-0

可用工具

此MCP服务器提供7个工具：

基础

1. get_figma_image --通过Figma URL获取节点图像
2. get_figma_styles --获取节点样式数据；可选CSS输出
3. 导出多张图片 --批量导出多个节点
4. 获取_文件_信息 --获取基本文件信息

设计元素工具🆕

1. get_node_images --获取节点下的所有图像资源
2. get_node_svg --获取节点的SVG数据
3. extract_node_elements --提取所有设计元素（图像、矢量、组件）

故障排除

常见问题

1.“找不到模块”

• 原因：使用 .ts 入口而不是建成 .js
• 修复：使用 /path/to/build/index.js 而不是 index.ts

2.“拒绝访问”

• 原因：Figma令牌无效或文件权限不足
• 修复：验证令牌，确保文件是公共的或可访问的

3.MCP服务器无法启动

• 原因：路径错误或Node.js版本过低
• 修复：

- 使用绝对路径 - 确保Node.js≥18 - 重建： npm run build

4.“未找到可导出的图像”

• 原因：URL丢失 node-id 参数
• 修复：确保URL包含 ?node-id=xxxxx-xxxxx

手动测试

cd /path/to/figma-mcp
node build/index.js figd_your_token_here

您应该看到： Figma MCP server started

验证配置

# macOS/Linux
cat ~/.config/claude-desktop/config.json | python -m json.tool

# Windows
type "%APPDATA%\Claude Desktop\config.json" | python -m json.tool

技术细节

智能重试

• 自动处理瞬态网络问题
• 指数退避
• 错误分类和恢复

批量处理

• 自动拆分大型节点集（每批90个）
• 避免URL长度限制
• 并发控制和资源管理

错误处理

• 详细的消息和补救提示
• 友好的反馈
• 完成日志记录

发展

开发模式

npm run dev
# Then set FIGMA_TOKEN in your environment

项目结构

figma-mcp/
├── src/
│   ├── index.ts             # MCP server entry
│   ├── figma-service.ts     # Figma API service
│   ├── image-extractor.ts   # Image export
│   ├── style-extractor.ts   # Style extraction
│   └── element-extractor.ts # Design element extraction 🆕
├── build/                   # Build output
├── package.json
└── README.md

新功能🆕

设计要素分析

• 图像资产识别：查找所有图像，包括嵌入式和外部图像
• 矢量提取：提取SVG路径、形状、图标
• 成分分析：识别组件和实例
• 层次结构遍历：深入遍历节点树

SVG数据

• 完整SVG导出：使用样式和路径完成SVG代码
• 矢量保真度：保留矢量属性以实现无损缩放
• 行内样式：SVG包含完整的样式，随时可用

智能元件检测

• 自动分类：图像、矢量、文本、组件
• 重复数据删除：删除重复的资源引用
• 细节控制：概述与详细输出模式

安全最佳实践

1. 代币安全：为Figma令牌使用env变量；从不硬编码
2. 访问控制：定期旋转令牌
3. 最小特权：授予所需的最低文件访问权限

许可证

MIT许可证

______________________________________________________________________

支持

如果您遇到问题：

1. 确保Node.js≥18
2. 验证您的Figma令牌
3. 验证JSON配置
4. 检查克劳德桌面日志
5. 手动启动MCP服务器

配置后，您可以直接在Claude中使用Figma文件！

联系