Figma MCP 服务器

一个模型上下文协议（MCP）服务器，作为Figma 设计与 React 实现之间的桥梁。此服务器通过处理 Figma 文件数据并提供 React 友好的格式，实现了像素完美的设计转换为 React 应用。

🚀 功能特性

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

🛠️ 提供的工具

1. get_file_content：

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

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

2. get_node_images：

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

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

📦 安装

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
   

示例项目

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

处理流程

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

许可证

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

贡献指南

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