内容
# Figma 转 React Native MCP
使用 Cursor 的 MCP 将 Figma 设计转换为 React Native 组件。此工具从您的 Figma 设计中提取组件，并生成具有适当类型和样式的对应 React Native 组件。
## 安装
### 开发环境
在您的 `eas.json` 中添加：
```json
{
"mcpServers": {
"figma-to-code": {
"command": "node",
"args": ["PATH_TO_REPO/build/index.js"],
"env": {
"FIGMA_TOKEN": "您的 Figma token",
"FIGMA_FILE": "您的 Figma 文件 ID",
"PROJECT_DIR": "您的项目目录"
}
}
}
}
```
### 终端用户
在 Cursor IDE 中安装 MCP 服务器：
```bash
npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
\"figmaToken\": \"您的 Figma token\",
\"figmaFile\": \"您的 Figma 文件 ID\",
\"projectDir\": \"您的项目目录\"
}"
```
## 使用
安装后，您可以在 Cursor 中使用以下提示：
### 提取所有组件
```
使用 extract_components mcp 工具，从 Figma 中获取所有组件，并在 components 文件夹中生成对应的 React Native 组件
```
### 提取特定组件
```
使用 extract_components mcp 工具，从 Figma 中获取 [组件名称] 组件，并在 components 文件夹中生成对应的 React Native 组件
```
## 配置
配置对象接受以下参数：
```typescript
{
"figmaToken": string, // 您的 Figma 访问令牌
"figmaFile": string, // 您的 Figma 文件 ID（来自 URL）
"projectDir": string // 生成组件的位置
}
```
## 功能
当前：
- ✅ 从 Figma 提取组件
- ✅ 生成 React Native 组件
- ✅ 维护组件层次结构
- ✅ 处理组件属性和类型
- ✅ 支持嵌套组件
即将推出：
- 🚧 GraphQL 模式生成
## 开发
贡献或修改：
1. 克隆仓库
2. 安装依赖：
```bash
npm install
```
3. 构建：
```bash
npm run build
```
4. 本地运行：
```bash
npm start
```
## 环境变量
本地运行时，您需要在 `.env` 中设置：
```bash
FIGMA_TOKEN=您的_figma_token
FIGMA_FILE=您的_figma_file_id
PROJECT_DIR=您的项目目录
```
## 错误处理
常见错误和解决方案：
- **"Failed to create client"**：检查所有环境变量是否正确设置
- **"Components page not found"**：确保您的 Figma 文件具有名为“Components”的页面
- **"Failed to fetch Figma file"**：验证您的 Figma token 和文件 ID
## 许可证
MIT
---
如有问题和功能请求，请在 GitHub 上提出问题。
