MCP 服务器

Figma MCP Server

一个连接 Figma 设计和 React 实现的桥梁，通过将 Figma 文件数据处理成 React 友好的格式，从而实现 Figma 设计到 React 应用的像素级完美转换。

README

Figma MCP 服务器

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

🚀 功能

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

🛠️ 提供的工具

get_file_content:
- 获取和处理 Figma 文件内容
- 转换布局、样式和组件
- 返回 React 就绪的组件结构
```
{
  fileKey: string;    // Figma 文件 key
  nodeId?: string;    // 可选的特定组件 ID
}
```

get_node_images:

从 Figma 检索图像资源
支持多种格式 (PNG, JPG, SVG)
可配置的缩放选项

{
  fileKey: string;    // Figma 文件 key
  nodeIds: string[];  // 要获取的组件 ID
  format?: 'png' | 'jpg' | 'svg';
  scale?: number;     // 1-4
}

📦 安装

克隆仓库:

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": "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"
});