Figma响应原生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配置
config对象接受以下参数：
{
"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组件
- ✅ 维护组件层次结构
- ✅ 搬运组件道具和类型
- ✅ 支持嵌套组件
马上就来：
- 🚧 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文件有一个名为“Components”的页面
- “无法获取Figma文件”：验证您的Figma令牌和文件ID
许可证
麻省理工学院
______________________________________________________________________
对于问题和功能请求，请在GitHub上打开问题。