---
summary: "Figma 图片导出工具"
description: "从 Figma 设计文件快速导出图片，支持单个/批量导出、指定格式尺寸、自动创建文件夹"
trigger:
  - "导出 figma"
  - "figma 导出图片"
  - "导出设计稿"
  - "figma export"
  - "批量导出 figma"
  - "figma 批量导出"
---

# Figma 图片导出 Skill

快速从 Figma 设计文件导出图片到本地。

## 核心功能

✅ **单个节点导出** - 导出指定节点为图片  
✅ **批量导出** - 一次导出多个节点  
✅ **格式支持** - PNG、JPG、SVG、PDF  
✅ **尺寸控制** - 0.5x、1x、2x、3x、4x  
✅ **智能保存** - 自动创建文件夹、智能命名  
✅ **URL 解析** - 自动从 Figma URL 提取 file_key 和 node_id  

## 使用方式

### 1. 单个节点导出

**用户说**：
> 把这个 Figma 节点导出为 2x PNG 图片：https://www.figma.com/file/ABC123/Design?node-id=123:456

**助手自动**：
1. 从 URL 提取 file_key 和 node_id
2. 调用 Figma API 导出
3. 下载图片到指定位置
4. 返回文件路径

### 2. 批量导出

**用户说**：
> 把这个文件的 3 个页面都导出为 1x PNG，保存到下载文件夹的"项目名"文件夹

**助手自动**：
1. 获取文件结构，识别所有页面节点
2. 批量调用导出 API
3. 创建目标文件夹
4. 下载所有图片并命名
5. 返回文件列表

### 3. 指定格式和尺寸

**用户说**：
> 导出这个节点为 SVG 格式，保存到桌面

**用户说**：
> 导出这个设计为 3x PNG，用于 Retina 屏幕

## 导出流程

```
用户请求 → URL解析 → 获取文件信息 → 导出图片 → 下载保存 → 返回结果
```

### 步骤详解

#### 1. URL 解析
```python
# 从 Figma URL 提取关键信息
file_key = extract_file_key("https://www.figma.com/file/ABC123/Design")
# → "ABC123"

node_id = extract_node_id("https://www.figma.com/file/ABC123?node-id=123:456")
# → "123:456"
```

#### 2. 获取节点信息（可选）
```python
# 如果需要批量导出或查看文件结构
file_data = api.get_file(file_key)
# 遍历节点树，找出所有 FRAME 或 GROUP
```

#### 3. 导出图片
```python
# 调用 Figma Images API
result = api.export_image(
    file_key="ABC123",
    node_ids=["123:456", "789:012"],
    format="png",
    scale=2.0
)
# 返回图片 URL 映射
```

#### 4. 下载保存
```python
# 下载图片到指定位置
for node_id, url in result['images'].items():
    download_image(url, f"~/Downloads/{filename}.png")
```

## 参数说明

### 格式 (format)
- `png` - PNG 格式（默认，支持透明）
- `jpg` - JPEG 格式（文件更小）
- `svg` - SVG 矢量格式（可缩放）
- `pdf` - PDF 格式（适合打印）

### 尺寸 (scale)
- `0.5` - 0.5x（缩小一半）
- `1.0` - 1x（默认，原始尺寸）
- `2.0` - 2x（Retina 屏幕）
- `3.0` - 3x（高清屏幕）
- `4.0` - 4x（超高清）

### 保存位置
- `~/Downloads/` - 下载文件夹（默认）
- `~/Desktop/` - 桌面
- 自定义路径 - 用户指定

## 实际案例

### 案例 1：导出单个设计稿

**用户**：
> 导出这个设计为 1x PNG：https://www.figma.com/file/ABC123/Design?node-id=18-358

**助手执行**：
```bash
# 1. 提取信息
file_key: "ABC123"
node_id: "18:358"

# 2. 调用 API
python3 figma_api.py export "ABC123" "18:358" png 1

# 3. 下载图片
curl -o ~/Downloads/设计稿.png "<image_url>"

# 4. 返回结果
✅ 已导出到: ~/Downloads/设计稿.png (1.3 MB)
```

### 案例 2：批量导出多个页面

**用户**：
> 把这个文件的 3 个页面都导出为 1x PNG，保存到"项目设计"文件夹

**助手执行**：
```bash
# 1. 获取文件结构
python3 figma_api.py get_file "ABC123"
# 识别出 3 个顶层 GROUP

# 2. 批量导出
python3 figma_api.py export "ABC123" "18:358,18:359,18:360" png 1

# 3. 创建文件夹
mkdir -p ~/Downloads/项目设计

# 4. 下载所有图片
curl -o ~/Downloads/项目设计/页面1.png "<url1>"
curl -o ~/Downloads/项目设计/页面2.png "<url2>"
curl -o ~/Downloads/项目设计/页面3.png "<url3>"

# 5. 返回结果
✅ 已导出 3 个文件到: ~/Downloads/项目设计/
```

### 案例 3：导出高清图片

**用户**：
> 导出这个图标为 4x PNG，用于应用图标

**助手执行**：
```bash
# 导出 4x 高清图片
python3 figma_api.py export "ABC123" "45:678" png 4

✅ 已导出 4x 高清图片: ~/Downloads/图标@4x.png (2.5 MB)
```

## 错误处理

### 常见错误

| 错误 | 原因 | 解决方案 |
|------|------|----------|
| `403 Forbidden` | Token 无权限访问该文件 | 检查文件权限或联系文件所有者 |
| `404 Not Found` | 文件或节点不存在 | 确认 URL 正确，检查文件是否被删除 |
| `429 Rate Limit` | API 调用过于频繁 | 等待 1 分钟后重试 |
| `网络错误` | 无法连接到 Figma API | 检查网络连接，重试 |

### 错误提示示例

```
❌ 导出失败：权限不足

该文件不公开，你的 Token 没有访问权限。

解决方案：
1. 联系文件所有者请求访问权限
2. 确认文件 URL 是否正确
3. 检查 Token 是否有效
```

## 最佳实践

### 1. 批量导出优化
```python
# ✅ 推荐：一次性导出多个节点
api.export_image(file_key, ["node1", "node2", "node3"])

# ❌ 不推荐：多次单独导出（容易触发 Rate Limit）
for node in nodes:
    api.export_image(file_key, [node])
```

### 2. 智能命名
```python
# 根据节点名称自动命名
filename = f"{node_name}_{format}_{scale}x.png"
# → "首页设计_png_2x.png"
```

### 3. 文件夹组织
```
~/Downloads/
  └── 项目名称/
      ├── 首页-方案一.png
      ├── 首页-方案二.png
      └── 详情页.png
```

## 依赖工具

- **figma_api.py** - Figma API Python 客户端
- **curl** - HTTP 下载工具
- **figma_token** - 存储在 `TOOLS.md`

## 配置

无需额外配置，Token 已存储在 `TOOLS.md`：
```
Figma → YOUR_FIGMA_TOKEN_HERE
```

## 相关 Skill

- **figma-api** - 完整的 Figma API 集成（查看文件、评论、团队等）
- **feishu-send-file** - 导出后发送到飞书

---

**版本**: 1.0.0  
**创建时间**: 2026-04-20  
**作者**: UU 🦞