Figma 到 React Native MCP

使用 Cursor 的 MCP 将 Figma 设计转换为 React Native 组件。此工具从您的 Figma 设计中提取组件，并生成相应的带有正确类型和样式的 React Native 组件。

安装

开发环境

在您的 eas.json 中添加以下内容：

{
  "mcpServers": {
    "figma-to-code": {
      "command": "node",
      "args": ["PATH_TO_REPO/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token",
        "FIGMA_FILE": "your_figma_file_id",
        "PROJECT_DIR": "your_project_directory"
      }
    }
  }
}

最终用户

在您的 Cursor IDE 中安装 MCP 服务器：

npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
  \"figmaToken\": \"YOUR_FIGMA_TOKEN\",
  \"figmaFile\": \"YOUR_FIGMA_FILE_ID\",
  \"projectDir\": \"YOUR_PROJECT_DIRECTORY\"
}"

使用方法

安装后，您可以在 Cursor 中使用以下提示：

提取所有组件

使用 extract_components mcp 工具从 Figma 获取所有组件并生成对应的 React Native 组件到 components 文件夹

提取特定组件

使用 extract_components mcp 工具从 Figma 获取 [ComponentName] 组件并生成对应的 React Native 组件到 components 文件夹

配置

配置对象接受以下参数：

{
  "figmaToken": string,    // 您的 Figma 访问令牌
  "figmaFile": string,     // 您的 Figma 文件 ID（来自 URL）
  "projectDir": string     // 在哪里生成组件
}

功能

当前支持：

• ✅ 从 Figma 提取组件
• ✅ 生成 React Native 组件
• ✅ 维护组件层次结构
• ✅ 处理组件属性和类型
• ✅ 支持嵌套组件

即将推出：

• 🚧 GraphQL 模式生成

开发

要贡献或修改：

1. 克隆仓库
2. 安装依赖项：

npm install

3. 构建：

npm run build

4. 本地运行：

npm start

环境变量

本地运行时，您需要在 .env 中设置这些变量：

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

错误处理

常见错误及解决方案：

• "Failed to create client"：检查所有环境变量是否正确设置
• "Components page not found"：确保您的 Figma 文件有一个名为 "Components" 的页面
• "Failed to fetch Figma file"：验证您的 Figma 令牌和文件 ID

许可证

MIT

---

对于问题和功能请求，请在 GitHub 上打开一个 Issue。