Figma Design Processor

🚀 Figma MCP 服务器

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

🚀 快速开始

安装

1. 克隆仓库：

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

2. 安装依赖项：

   npm install
   

3. 配置 Figma 访问令牌：

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

Cursor IDE 设置

1. 在项目根目录中创建 .cursor/mcp.json 文件：

   mkdir -p .cursor
   touch .cursor/mcp.json
   

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

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

使用方法

1. 构建服务器：

   npm run build
   

2. 根据你的 IDE 配置 MCP 设置：

   • 对于 Visual Studio Code： 安装并配置 vscode-mcp 以支持 Figma 文件。

   • 对于其他编辑器，参考文档中的高级配置。

3. 在项目中使用 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 组件。

处理流程

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

📄 许可证

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

🤝 贡献指南

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