Figma转React Native组件工具

Figma转React Native组件工具是 kailashGN 开发的 MCP 服务器：将Figma设计转换为React Native组件，支持组件层次结构、属性和类型的自动生成。接入两步走：npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{，再把下文配置粘进客户端 mcpServers 段重启即可。

先把话说清楚：Figma转React Native组件工具不是又一个大模型，而是一个标准的 MCP 服务器。装好之后，你的 AI 客户端多出一组新工具，模型可以按需调用。将Figma设计转换为React Native组件，支持组件层次结构、属性和类型的自动生成

• ✅ Extract components from Figma
• ✅ Generate React Native components
• ✅ Maintain component hierarchy
• ✅ Handle component props and types
• ✅ Support nested components
• ? GraphQL schema generation

两类人最该装：一是天天在 Claude Desktop、Cursor 里写代码，想让 AI 直接帮你跑命令、改仓库、读文件的人；二是已经在用 MCP 生态、想按需拼装能力的折腾型用户。反过来，如果你只需要偶尔手动用它背后的服务，直接开网页就行，不必上 MCP。

动手前确认环境齐了：

• Node.js 18 或更高版本（旧版 npx 跑不动一部分新版 MCP 包）。
• 一个支持 MCP 的客户端：Claude Desktop、Cursor、Cline、Windsurf 任选其一。
• 对应平台的 API Key（第 2 步要用）。

终端里任选一条（不同安装方式，效果等价）：

npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{

先把凭证准备好：FIGMA_TOKEN、YOUR_FIGMA_TOKEN。拿不到后面全白搭。

Claude Desktop 的配置文件路径：macOS 在 ~/Library/Application Support/Claude/claude_desktop_config.json，Windows 在 %APPDATA%\Claude\claude_desktop_config.json；Cursor 则是 ~/.cursor/mcp.json（或项目级 .cursor/mcp.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"
    }
  }
}

改完保存。Windows 用户注意：如果 command 写 npx 起不来，换成 npx.cmd 再试。

完全退出客户端再打开（是托盘里真正退出，不是关窗口）。工具列表里出现Figma转React Native组件工具的工具即接入成功；调用报错的话，先查下面的坑点清单。

• Key 填了但没生效：多半填在了 args 而不是 env 段。客户端日志里看到 Environment variable FIGMA_TOKEN not set 就是这个原因。
• 改了配置没反应：客户端只重启了窗口没退进程。macOS 按 Cmd+Q，Windows 检查托盘。
• JSON 报错打不开客户端：多半是最后多个逗号。粘进任何 JSON 校验器里查一遍再保存。