JinDaGe - figma-mcp-toolkit MCP Details

article

README

🚀 Figma 到 React Native 组件转换器 (MCP)

Figma 到 React Native 组件转换器 (MCP) 借助 Cursor 的 MCP 工具，能将 Figma 设计无缝转换为 React Native 组件。该工具可精准从 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 访问令牌
        "FIGMA_FILE": "your_figma_file_id",        // 你的 Figma 文件 ID（从 URL 中获取）
        "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

📚 详细文档

配置

配置对象接受以下参数：

{
  "figmaToken": string,    // 你的 Figma 访问令牌
  "figmaFile": string,     // 你的 Figma 文件 ID（从 URL 中获取）
  "projectDir": string     // 生成组件的位置
}

功能

当前功能

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

即将推出

🚧 GraphQL 方案生成

开发

若你要进行贡献或修改，可按以下步骤操作：

克隆仓库。
安装依赖项：

npm install

构建：

npm run build

本地运行：

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 文件）：验证你的 Figma 令牌和文件 ID。

📄 许可证

本项目采用 MIT 许可证。

如需报告问题或提出功能请求，请在 GitHub 上打开问题。

figma-mcp-toolkit