Figma to React Native 组件转换 MCP 服务器

关键词

FigmaReact Native组件提取代码生成UI开发设计稿转换

使用说明

项目简介

'Figma to React Native 组件转换 MCP 服务器' 是一个基于 Model Context Protocol (MCP) 构建的应用后端，旨在帮助开发者将 Figma 设计稿快速转换为可用的 React Native 组件代码。通过该服务器提供的工具，LLM 客户端（如 Cursor）可以调用服务器的功能，自动化完成 Figma 组件的提取、代码生成和集成到 React Native 项目中。

主要功能点

  • Figma 组件提取：从指定的 Figma 文件中提取组件定义和属性信息。
  • React Native 代码生成：根据 Figma 组件信息，自动生成对应的 React Native 组件代码，包括组件结构、样式和属性类型定义。
  • 组件层级维护：在生成的 React Native 代码中，尽可能地保持 Figma 设计稿中的组件层级关系。
  • 支持组件属性和类型：能够处理组件的属性，并生成包含类型定义的 React Native 代码。
  • 支持嵌套组件：可以处理 Figma 设计稿中的嵌套组件。

安装步骤

开发环境安装

  1. 添加到 'eas.json': 如果你使用 Expo EAS 构建，可以将该 MCP 服务器添加到你的 'eas.json' 配置文件中，以便在 Cursor IDE 中使用。

    {
  "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"
      }
    }
  }
}

    参数说明:

    • 'server name': 'figma-to-code' (服务器名称，在 Cursor 中使用)
    • 'command': 'node' (启动命令，使用 Node.js 运行)
    • 'args': '["PATH_TO_REPO/build/index.js"]' (命令参数，指向编译后的服务器入口文件路径，需要替换为实际路径)
    • 'env': 环境变量配置
      • 'FIGMA_TOKEN': 你的 Figma 个人访问令牌
      • 'FIGMA_FILE': 你的 Figma 文件 ID (从 Figma 文件 URL 中获取)
      • 'PROJECT_DIR': 你的 React Native 项目根目录

最终用户安装

  1. 在 Cursor IDE 中安装: 如果你是最终用户，可以直接在 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\"
}"

    参数说明:

    • '--client claude': 指定客户端类型为 Claude (Cursor 使用的客户端)
    • '--config': 配置信息，JSON 格式
      • 'figmaToken': 你的 Figma 个人访问令牌
      • 'figmaFile': 你的 Figma 文件 ID
      • 'projectDir': 你的 React Native 项目根目录

服务器配置

MCP 服务器主要通过环境变量进行配置，需要在启动服务器前设置以下环境变量：

  • 'FIGMA_TOKEN': Figma 个人访问令牌，用于访问 Figma API。
  • 'FIGMA_FILE': Figma 文件 ID，指定要从中提取组件的 Figma 文件。
  • 'PROJECT_DIR': React Native 项目根目录，用于指定生成的组件代码存放位置。

基本使用方法

安装并配置好 MCP 服务器后，在 Cursor IDE 中可以使用以下 Prompt 调用服务器提供的工具：

  1. 提取所有组件:

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

  2. 提取特定组件:

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

    将 '[ComponentName]' 替换为你想要提取的 Figma 组件名称。

通过以上 Prompt，Cursor 将会调用 'figma-to-code' MCP 服务器的 'extract_components' 工具，从指定的 Figma 文件中提取组件信息，并在你的 React Native 项目的 'components' 目录下生成相应的 React Native 组件代码。

服务器信息

访问项目