-
securityF
license-
qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
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
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
- AsecurityFlicenseAqualityA 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 -57252
- -securityAlicense-qualityConverts 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 -51MIT License
- -securityFlicense-qualityEnables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.Last updated -