Figma MCP (Song Jiyeon)

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

示例输出

按钮组件

  Click Me

输入框组件

它是如何工作的

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

演示设置

1. 在Figma中创建组件：

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

1. 获取文件密钥：

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

1. 运行演示：

   npm run web

1. 试试看：

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

要求

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

脚本

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

许可证

麻省理工学院（MIT）