Figma MCP 服务器

一个模型上下文协议 (MCP) 服务器，提供 Figma 设计与 React 实现之间的桥梁。该服务器通过处理 Figma 文件数据并以 React 友好的格式提供这些数据，从而实现将 Figma 设计像素完美地转换为 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
   # 在 .env 中添加您的 Figma 访问令牌
   

🎯 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": "your figma token"
        },
        "disabled": false,
        "alwaysAllow": [],
        "protocol": "stdio"
      }
    }
   

}

## 💻 使用方法

[此处开始可以继续补充具体的使用说明]

1. 构建服务器：
 ```bash
 npm run build
 ```

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

- 对于VS Code（全局设置）：
  ```json
  // 在 settings.json 中
  {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["path/to/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-token-here"
        }
      }
    }
  }
  ```

- 对于Cursor IDE：
  使用如上“Cursor IDE 设置”部分所述的 `.cursor/mcp.json` 配置。
  当使用Cursor IDE时，此配置将优先于VS Code设置。

3. 在应用程序中使用MCP工具：
```typescript
// 示例：获取处理后的Figma内容
const result = await useMcpTool("figma", "get_file_content", {
  fileKey: "your-figma-file-key"
});

🧩 示例项目

查看 raccoon-game 目录，了解如何使用此MCP服务器创建一个像素完美的React实现Figma设计的完整示例。

🔄 处理流程

1. 输入：通过官方API获取的Figma文件数据
2. 处理：
   • 样式转换（颜色、排版、效果）
   • 布局转换（绝对定位到Flexbox）
   • 组件层次结构映射
   • 资源优化
3. 输出：准备好的React组件数据

📝 许可证

MIT许可证

🤝 贡献

欢迎贡献！请阅读我们的贡献指南。

🙏 致谢

• Figma API团队提供的全面API
• Model Context Protocol提供的MCP规范

由[你的名字]用心制作 ❤️