Figma 到 React Native 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

配置

配置对象接受以下参数：

{
  "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 组件
✅ 维护组件层次结构
✅ 处理组件 props 和类型
✅ 支持嵌套组件

即将推出：

🚧 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

错误处理

常见错误及解决方法：

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

执照

麻省理工学院

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

This server cannot be installed

security - not tested

license - not found

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

将 Figma 设计转换为 React Native 组件，允许用户从 Figma 设计中提取组件并生成具有适当类型和样式的相应 React Native 组件。

Related MCP Servers

Talk to Figma MCP
yhc984
-
security
F
license
-
quality
Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
Last updated -
TypeScript
FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
TypeScript
Figma MCP Server
sanjeev23oct
-
security
F
license
-
quality
A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
Last updated -
997
1
TypeScript
MCP Figma to React Converter
StudentOfJS
-
security
A
license
-
quality
Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.
Last updated -
14
TypeScript
MIT License

View all related MCP servers

Figma to React Native MCP