AI导哈

Figma转React Native组件工具

将Figma设计转换为React Native组件，支持组件层次结构、属性和类型的自动生成。

  • by kailashGN
  • TypeScript
  • 本地部署
  • 8 星标
  • 更新于
在 GitHub 查看 kailashAppDev/figma-mcp-toolkit

使用说明

Figma响应原生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中使用以下提示：

提取所有成分

using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder

提取特定成分

using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder

配置

config对象接受以下参数：

{
  "figmaToken": string,    // Your Figma access token
  "figmaFile": string,     // Your Figma file ID (from the URL)
  "projectDir": string     // Where to generate the components
}

特性

当前：

  • ✅ 从Figma中提取成分
  • ✅ 生成React Native组件
  • ✅ 维护组件层次结构
  • ✅ 搬运组件道具和类型
  • ✅ 支持嵌套组件

马上就来：

  • 🚧 GraphQL模式生成

发展

贡献或修改：

  1. 克隆存储库
  2. 安装依赖项：
npm install
  1. 构建：
npm run build
  1. 在本地运行：
npm start

环境变量

在本地运行时，您需要在您的 .env:

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

错误处理

常见错误及解决方法：

  • “创建客户端失败”：检查是否正确设置了所有环境变量
  • “找不到组件页面”：确保你的Figma文件有一个名为“Components”的页面
  • “无法获取Figma文件”：验证您的Figma令牌和文件ID

许可证

麻省理工学院

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

相关 MCP