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