Figma MCP 服务器

模型上下文协议 (MCP) 服务器，用于在 Figma 设计与 React 实现之间搭建桥梁。该服务器通过处理 Figma 文件数据并以 React 友好的格式提供数据，从而实现将 Figma 设计完美像素地转换为 React 应用程序。

🚀 功能

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

🛠️ 提供的工具

get_file_content ：
- 获取并处理 Figma 文件内容
- 转换布局、样式和组件
- 返回 React-ready 组件结构 GXP1
get_node_images ：
- 从 Figma 检索图像资产
- 支持多种格式（PNG、JPG、SVG）
- 可配置的缩放选项 GXP2

📦安装

克隆存储库：
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp
安装依赖项：
npm install
配置您的 Figma 访问令牌：
cp .env.example .env # Add your Figma access token to .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": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }

}

## 💻 Usage

1. Build the server:
 ```bash
 npm run build
 ```

2. Configure MCP settings based on your IDE:

- For VS Code (global settings):
  ```json
  // In settings.json
  {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["path/to/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-token-here"
        }
      }
    }
  }
  ```

- For Cursor IDE:
  Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
  This configuration will take precedence over VS Code settings when using Cursor IDE.

3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
  fileKey: "your-figma-file-key"
});

🧩示例项目

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

🔄 处理管道

输入：通过官方 API 输入 Figma 文件数据
加工：
- 风格转换（颜色、字体、效果）
- 布局变换（绝对到 Flexbox）
- 组件层次结构映射
- 资产优化
输出：React-ready 组件数据

📝 许可证

MIT 许可证

🤝 贡献

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

🙏 致谢

Figma API 团队提供全面的 API
MCP 规范的模型上下文协议

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

Figma MCP Server

Integrations