AI导哈

Figma组件代码生成器

一个连接Figma API的模型上下文协议(MCP)服务器，可从设计稿生成HTML/React组件代码，包含交互式网页演示功能。

  • by SongJiyeon
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 SongJiyeon/FigmaMCP

使用说明

Figma MCP（Master Certified Professional）演示

一个模型上下文协议（MCP）服务器，它连接到Figma的API，并从设计中生成HTML/React组件代码。包含一个交互式网页演示，用于实时组件预览。

特点/特性

  • 🎨 获取Figma组件从Figma文件中获取组件结构和样式数据
  • 🔄 生成代码自动从Figma设计中创建HTML/React组件
  • 🌐 网页演示交互式网页界面，用于预览和生成代码
  • 🤖 兼容MCP与任何MCP客户端（如Claude Desktop等）兼容
  • 🎯 智能检测通过名称或样式自动检测按钮、文本和输入字段

快速入门

1. 安装依赖项

npm install

2. 获取Figma令牌

  1. 首选 Figma 设置
  2. 导航至“个人访问令牌”
  3. 生成一个新的令牌
  4. 复制令牌

3. 配置环境

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

FIGMA_TOKEN=your_figma_personal_access_token_here

4. 运行网页演示

npm run web

打开您的浏览器，访问 http://localhost:3000

使用方法

网页演示（推荐）

网络演示提供了一个交互式界面，用于：

  • 输入您的Figma文件密钥和组件名称
  • 实时预览组件
  • 查看提取的样式信息
  • 查看并复制生成的HTML代码
npm run web

MCP 服务器

在您的MCP客户端配置中添加（例如，Claude Desktop）：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/FigmaMCP/src/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token_here"
      }
    }
  }
}

命令行示例

列出Figma文件中的所有组件：

npm run list YOUR_FIGMA_FILE_KEY

生成React组件：

npm run example YOUR_FIGMA_FILE_KEY "Button"

组件检测

系统自动检测组件类型：

按名称（主要方法）：

  • Button， btn → 按钮组件
  • TextBox， Input， Field → 输入框
  • Text， Label， Title → 文本/标签

通过视觉风格（备用选项）：

  • 带背景的框架 + 圆角 → 按钮
  • 纯文本或无样式框架 → 文本

可用工具

get_figma_file

获取一个Figma文件并提取所有组件

输入：

  • fileKey从URL中获取的Figma文件密钥

generate_react_component

从Figma设计生成React组件代码

输入：

  • fileKeyFigma文件密钥
  • nodeNameFigma中的组件名称

create_button

在Figma中创建一个按钮组件（注：受Figma REST API限制）

输入：

  • fileKeyFigma文件密钥
  • text按钮文本
  • backgroundColor十六进制颜色代码
  • width， height尺寸

项目结构

FigmaMCP/
├── src/
│   └── index.js              # MCP server implementation
├── web/
│   ├── server.js             # Web demo backend
│   └── index.html            # Web demo frontend
├── examples/
│   ├── generate-button.js    # CLI example
│   └── list-components.js    # List components script
├── package.json
├── .env.example
└── README.md

示例输出

按钮组件

<button style="
  width: 200px;
  height: 50px;
  background-color: #007AFF;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
">
  Click Me
</button>

输入框组件

<input type="text" placeholder="Enter text" style="
  width: 300px;
  height: 40px;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 14px;
  border-radius: 4px;
  padding: 8px 12px;
  border: 1px solid #ddd;
">

它是如何工作的

  1. 使用您的个人访问令牌连接到Figma REST API
  2. 获取文件结构和组件数据
  3. 提取样式属性（颜色、尺寸、排版等）
  4. 检测组件类型（按钮、输入框、文本）
  5. 生成带有提取样式的HTML/React代码
  6. 在网页界面中显示预览和代码

演示设置

  1. 在Figma中创建组件：

    • 设计一个按钮（将其命名为“按钮”或“主要按钮”）
    • 创建一个文本框（将其命名为“TextBox”或“Input”）
    • 添加一些文本标签

  2. 获取文件密钥：

    • 打开你的Figma文件
    • 从URL复制文件密钥： figma.com/file/FILE_KEY_HERE/...

  3. 运行演示：

    npm run web

  4. 试试看：

    • 输入您的文件密钥和组件名称
    • 点击“从Figma获取”
    • 查看实时预览和生成的代码！

要求

  • Node.js 版本 >= 18
  • Figma个人访问令牌
  • 一个包含组件用于演示的Figma文件

脚本

  • npm run web - 启动网页演示服务器
  • npm run start - 启动MCP服务器
  • npm run example [fileKey] [componentName] - 生成组件
  • npm run list [fileKey] - 列出文件中的所有组件

许可证

麻省理工学院（MIT）

相关 MCP