Figma to React Native MCP

Figma to React Native MCP

2025.03.24 1

TypeScript设计到代码转换前端开发工具开发效率

Figma to React Native MCP 是一个将 Figma 设计转换为 React Native 组件的工具。它可以从 Figma 设计中提取组件，并生成具有适当类型和样式的 React Native 组件。该工具支持组件层次结构的维护、组件属性和类型的处理，以及嵌套组件的支持。

View on GitHub

Overview

基本能力

产品定位

Figma to React Native MCP 是一个设计到代码的转换工具，专注于将 Figma 设计转换为 React Native 组件。

核心功能

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

适用场景

快速将 Figma 设计转换为 React Native 代码
自动化前端开发流程
提高设计到代码的转换效率

工具列表

extract_components：从 Figma 提取组件并生成对应的 React Native 组件

常见问题解答

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

使用教程

使用依赖

需要安装 Node.js 和 npm。

安装教程

开发环境

在 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\"
}"

调试方式

克隆仓库
安装依赖：

npm install

构建：

npm run build

本地运行：

npm start

确保在 .env 文件中设置以下环境变量：

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

许可证

该项目遵循 MIT 开源许可条款。