AI导哈

Figma图像与样式导出工具

一个与Figma API集成的模型上下文协议(MCP)服务器，用于导出图像和提取样式数据，适用于设计资产管理和前端开发工作流。

  • by Echoxiawan
  • TypeScript
  • 本地部署
  • 11 星标
  • 更新于
在 GitHub 查看 Echoxiawan/figma-mcp-full-server

使用说明

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 <repository>
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文件！

联系

相关 MCP