JinDaGe - Figma Design Processor MCP Details

article

README

🚀 Figma MCP 服务器

Figma MCP 服务器是一个模型上下文协议（MCP）服务器，它充当了 Figma 设计与 React 实现之间的桥梁。该服务器通过处理 Figma 文件数据，并将其转换为 React 友好的格式，能够实现将像素完美的设计转换为 React 应用。

🚀 快速开始

安装

克隆仓库：

git clone https://github.com/yourusername/figma-mcp.git
cd figma-mcp

安装依赖项：
```
npm install
```

配置 Figma 访问令牌：

cp .env.example .env
# 将你的 Figma 访问令牌添加到 .env

Cursor IDE 设置

在项目根目录中创建 .cursor/mcp.json 文件：
```
mkdir -p .cursor
touch .cursor/mcp.json
```

对于基于 Stdio 的服务器配置：

{
 "mcpServers": {
   "figma": {
     "command": "node",
     "args": ["d:/<folder>>/figma-mcp/build/index.js"],
     "env": {
       "FIGMA_ACCESS_TOKEN": "你的 figma 令牌"
     },
     "disabled": false,
     "alwaysAllow": [],
     "protocol": "stdio"
   }
 }
}

使用方法

构建服务器：
```
npm run build
```
根据你的 IDE 配置 MCP 设置：
- 对于 Visual Studio Code：安装并配置 vscode-mcp 以支持 Figma 文件。
- 对于其他编辑器，参考文档中的高级配置。
在项目中使用 MCP 工具：
```
npx mcp serve figma
```

✨ 主要特性

Figma API 集成：直接连接到 Figma 的 API 以访问设计文件
React 就绪输出：处理 Figma 数据并转换为 React 兼容格式
样式处理：将 Figma 样式转换为 CSS/styled-components
资产处理：管理图像资产和 SVG 组件
布局处理：将 Figma 自动布局转换为 Flexbox
类型安全：使用 TypeScript 实现可靠的类型检查

📦 安装指南

克隆仓库

git clone https://github.com/yourusername/figma-mcp.git
cd figma-mcp

安装依赖

npm install

配置访问令牌

cp .env.example .env
# 将你的 Figma 访问令牌添加到 .env

💻 使用示例

基础用法

`get_file_content`

获取并处理 Figma 文件内容，转换布局、样式和组件，返回 React 就绪组件结构。

{
  fileKey: string;    // Figma 文件键
  nodeId?: string;    // 可选特定组件 ID
}

`get_node_images`

从 Figma 中检索图像资产，支持多种格式（PNG、JPG、SVG），可配置缩放选项。

{
  fileKey: string;    // Figma 文件键
  nodeIds: string[];  // 组件 ID 列表
  format?: 'png' | 'jpg' | 'svg';
  scale?: number;     // 1-4
}

示例项目

查看 examples 目录中的示例，了解如何将 Figma 设计转换为 React 组件。

处理流程

在 Figma 中设计组件并导出为 JSON。
使用 get_file_content 工具处理 JSON 文件。
生成 React 组件代码并进行必要的调整。
使用 get_node_images 获取所需的图像资产。
将生成的组件集成到你的 React 应用中。

📄 许可证

项目使用 MIT 许可证，具体内容请查看 LICENSE 文件。

🤝 贡献指南

欢迎贡献！请参考 CONTRIBUTING.md 了解如何参与此项目。

Figma Design Processor