AI导哈

Figma MCP服务器

一个强大的MCP服务器，连接AI应用与Figma API，实现无缝访问Figma设计、自动生成HTML/CSS和截图捕获。

  • by MinhazTopaz
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 MinhazTopaz/figma-mcp

使用说明

Figma MCP服务器

功能强大的MCP（模型上下文协议）服务器，将人工智能应用程序连接到Figma API，实现对Figma设计的无缝访问、自动HTML/CSS生成和屏幕截图捕获。

🚀 特性

可用的MCP工具

工具 描述 用例
getFile 获取完整的Figma文件数据 获取整个文件结构和元数据
getNode 从文件中获取特定节点 访问单个组件或帧
分析设计 提取和分析设计属性 了解组件结构和样式
generateCSS 从Figma节点生成CSS 将Figma样式转换为CSS代码
生成HTML 生成HTML结构 从设计中创建语义HTML
generateFullDesign 生成完整的HTML/CSS文件 将整个设计转换为工作代码
获取图像 捕获屏幕截图/渲染 将设计导出为PNG、JPG、SVG或PDF
生成带有屏幕截图的设计 使用屏幕截图参考生成HTML/CSS 使用视觉上下文更准确地设计代码
generateBootstrap设计 ⭐ 从Figma生成Bootstrap 5+SCSS 生产就绪的响应式设计

你能做什么

  • 📊 提取设计数据 -访问完整的设计规范
  • 🎨 生成CSS -将Figma样式转换为生产就绪的CSS
  • 🏗️ 创建HTML -从设计生成语义HTML结构
  • 📸 捕获屏幕截图 -将设计导出为多种格式的图像
  • 🔍 分析组件 -了解设计属性和层次结构
  • ⚡ 自动化工作流程 -与Claude Desktop等人工智能工具集成
  • 🚀 Bootstrap集成 ⭐ 新功能-使用Bootstrap 5+SCSS生成响应式设计

📋 先决条件

  • Node.js v17或更高版本
  • Figma个人访问令牌 （不是文件访问令牌）

🛠️ 安装

1.克隆和安装

git clone <your-repo-url>
cd figma-mcp
npm install

2.配置Figma令牌

创建一个 .env 根目录中的文件：

FIGMA_TOKEN=your_personal_access_token_here

获取您的令牌：

  1. 首选 Figma帐户设置
  2. 滚动到“个人访问令牌”
  3. 点击“创建新的个人访问令牌”
  4. 复制令牌并将其添加到 .env

⚠️ 重要提示： 使用 个人访问令牌，不是特定于文件的令牌。

3.建设项目

npm run build

🎯 用法

使用克劳德桌面

添加到您的Claude配置文件中：

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
窗户： %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["C:\\path\\to\\figma-mcp\\build\\index.js"]
    }
  }
}

使用VS代码MCP

增添 .vscode/mcp.json:

{
  "servers": {
    "figma-mcp-server": {
      "type": "stdio",
      "command": "npm",
      "args": ["start"]
    }
  }
}

📖 工具使用示例

理解Figma URL

对于以下URL：

https://www.figma.com/design/YwUqmarhRx74Gb4zePtEUx/My-Design?node-id=8384-4
  • 文件密钥: YwUqmarhRx74Gb4zePtEUx
  • 节点ID: 8384-4 （或 8384:4 -两种格式都有效）

1.分析设计结构

Use analyzeDesign with:
- fileKey: YwUqmarhRx74Gb4zePtEUx
- nodeId: 8384-4

返回详细的设计属性，包括：

  • 组件层次结构
  • 颜色和填充
  • 排版设置
  • 尺寸和定位

2.生成CSS样式

Use generateCSS with:
- fileKey: YwUqmarhRx74Gb4zePtEUx
- nodeId: 8384-4
- className: .my-component (optional)

通过以下方式生成生产就绪的CSS：

  • 颜色（rgba格式）
  • 排版（字体系列、大小、粗细）
  • 布局（宽度、高度、填充）
  • 效果（阴影、边框、边框半径）

3.生成HTML结构

Use generateHTML with:
- fileKey: YwUqmarhRx74Gb4zePtEUx
- nodeId: 8384-4

创建与Figma层次结构匹配的语义HTML结构。

4.生成完整的HTML/CSS页面

Use generateFullDesign with:
- fileKey: YwUqmarhRx74Gb4zePtEUx
- nodeId: 8384-4

生成一个完整的HTML文件，其中包含：

  • 内联CSS样式
  • 语义HTML结构
  • 响应式重置样式
  • 正确的排版和间距

5.捕获屏幕截图/图像

Use getImage with:
- fileKey: YwUqmarhRx74Gb4zePtEUx
- nodeId: 8384-4
- format: png (or jpg, svg, pdf)
- scale: 2 (optional, 0.01 to 4)

格式指南：

  • 便携式网络图形 -最适合透明的UI设计（推荐）
  • JPG格式 -文件大小更小，没有透明度
  • 可缩放矢量图形 -矢量格式，可扩展
  • PDF -打印就绪文档

缩放选项：

  • 1 -原始尺寸（默认）
  • 2 -Retina/HiDPI显示器（推荐）
  • 3-4 -极高分辨率（打印质量）
  • 0.01-0.99 -缩略图/预览

返回一个临时下载URL（有效期约为30分钟）。

6.使用截图参考生成设计（增强版）⭐

Use generateDesignWithScreenshot with:
- fileKey: YwUqmarhRx74Gb4zePtEUx
- nodeId: 8384-4
- includeScreenshot: true (optional, default true)

这有什么特别之处： 该工具结合了Figma API数据和实际设计的屏幕截图，为您提供更准确的HTML/CSS生成。

优点：

  • 📸 目视参考 -CSS注释中包含的截图URL
  • 🎯 准确的 -生成具有视觉上下文的代码
  • 💡 更好的指导 -评论建议如何匹配屏幕截图
  • 🔄 并排比较 -轻松比较输出与原始输出

非常适合：

  • 像素完美实现
  • 需要视觉验证的复杂布局
  • 当您想确保设计保真度时
  • 学习设计如何转化为代码

🧪 测试工具

从运行测试脚本 tests/ 目录。 所有输出都保存到 output/ 文件夹。

测试Bootstrap增强生成🚀 推荐

npx tsx tests/test-bootstrap-enhanced.ts

通过以下方式生成生产就绪设计：

  • ✅ 包含Bootstrap 5框架
  • ✅ SCSS源文件（可编辑）
  • ✅ HTML中嵌入的编译CSS
  • ✅ Figma中的语义类名
  • ✅ 用于比较的屏幕截图参考
  • ✅ 响应式、移动优先布局

输出： output/{component-name}.html, output/{component-name}.scss, output/{component-name}-screenshot.png

为什么要用这个？ 生成实际看起来像屏幕截图的设计！

测试HTML/CSS生成

npx tsx tests/test-tool.ts

生成 output/output.html 使用Figma设计的完整HTML/CSS。

使用屏幕截图测试增强型生成

npx tsx tests/test-screenshot-enhanced.ts

生成 output/output-with-screenshot.html 并将参考屏幕截图下载到 output/screenshot-{nodeId}.pngHTML包含带有截图路径的注释，便于比较。

测试图像采集

npx tsx tests/test-image.ts

将屏幕截图下载为 output/figma-screenshot-{nodeId}.png

测试令牌验证

npx tsx tests/test-token.ts

验证您的Figma API令牌和权限。

🏗️ 项目结构

figma-mcp/
├── src/
│   └── index.ts                     # Main MCP server implementation
├── tests/
│   ├── test-bootstrap-enhanced.ts   # 🚀 Bootstrap + SCSS generation (RECOMMENDED)
│   ├── test-tool.ts                 # HTML/CSS generation test
│   ├── test-screenshot-enhanced.ts  # Enhanced generation with screenshot
│   ├── test-image.ts                # Image capture test
│   ├── test-token.ts                # Token validation test
│   └── README.md                    # Test documentation
├── output/                          # Generated HTML/CSS and screenshots
│   ├── .gitignore                   # Ignores generated files
│   └── README.md                    # Output folder guide
├── docs/
│   ├── TROUBLESHOOTING.md           # Common issues and solutions
│   ├── CSS-IMPROVEMENTS.md          # CSS generation details
│   ├── IMAGE-FEATURE.md             # Screenshot feature guide
│   ├── SCREENSHOT-ENHANCED.md       # Enhanced generation guide
│   ├── BOOTSTRAP-ENHANCED.md        # 🚀 Bootstrap + SCSS guide (NEW)
│   └── README.md                    # Documentation index
├── build/                           # Compiled JavaScript output
├── .env                             # Environment variables (not in git)
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md

🔧 发展

构建命令

# Build once
npm run build

# Build and watch for changes
npm run build -- --watch

# Start the server
npm start

支持的Figma属性

布局：

  • 宽度、高度、定位
  • 填充和边距
  • 圆角半径

排版：

  • 字体系列、大小、粗细
  • 行高、文本对齐
  • 文本内容

颜色：

  • 填充颜色（纯色、渐变色）
  • 笔划/边框颜色
  • 不透明度

影响：

  • 阴影
  • 方框阴影
  • 边框样式

📚 文档

🐛 故障排除

“无效令牌”错误

✅ 解决方案： 使用个人访问令牌，而不是文件访问令牌

  • 转到Figma设置→ 个人访问令牌
  • 创建具有完全API访问权限的新令牌
  • 更新您的 .env 文件

未找到节点

✅ 解决方案： 检查节点ID格式

  • 两者 8384-4 和 8384:4 工作
  • 从Figma URL获取节点ID或检查面板

类名不起作用

✅ 解决方案： 已在最新版本中修复

  • 类名被规范化（冒号→ 破折号）
  • CSS选择器有效

看 docs/TROUBLESHOOTING.md 更多解决方案。

🔒 安全

  • ⚠️ 永不承诺 .env -包含您的Figma令牌
  • ✅ 对所有机密使用环境变量
  • 🔐 对于生产，请遵循 MCP授权最佳实践

🌟 用例

  1. 按代码设计 -将Figma设计自动转换为HTML/CSS
  2. 设计系统 -提取组件样式以用于文档
  3. 资产导出 -将设计元素批量导出为图像
  4. 设计审查 -捕获演示文稿的屏幕截图
  5. AI集成 -通过MCP将Figma连接到AI工具
  6. 自动化 -使用Figma数据构建工作流程

📖 参考文献

📄 许可证

麻省理工学院

由以下材料制成❤️ 面向代码设计社区

相关 MCP