# Figma Export

> Export Figma frames as PNG images via Figma REST API. Use when you need to get a design screenshot from a Figma URL for visual comparison.

- Skill: `mukiwu/figma-export` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mukiwu/figma-export`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mukiwu/figma-export/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: mukiwu (https://skillmd.com/u/mukiwu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mukiwu/figma-export

---


# Figma Export

從 Figma URL 導出指定 frame 的 PNG 截圖。

## 使用時機

- 需要取得 Figma 設計稿的靜態截圖
- 進行設計稿 vs 實作的比對前

## 前置條件

- `FIGMA_ACCESS_TOKEN`：環境變數，或放在專案根的 `.env`（腳本會自己讀）
- 不需額外套件——腳本只用 Python 內建的 urllib

## 使用方式

```bash
python "${CLAUDE_PLUGIN_ROOT}/scripts/figma-export.py" "<figma_url>" --output design.png [--scale 1] [--node-id <id>]
```

腳本在 plugin 目錄裡，不在使用者專案裡——路徑一定要用 `${CLAUDE_PLUGIN_ROOT}`，寫相對路徑會找不到檔案。

## 參數

| 參數 | 必填 | 說明 |
|------|------|------|
| `figma_url` | 是 | Figma 檔案或 frame 的 URL |
| `--output` | 否 | 輸出檔名（預設 `figma-export.png`） |
| `--scale` | 否 | 縮放倍數（預設 1）。要跟網頁截圖的 device pixel ratio 一致，不然像素比對會滿版假差異 |
| `--node-id` | 否 | 指定 node ID（從 URL 的 `node-id=` 參數取得） |

## Figma URL 格式

支援以下格式：
- `https://www.figma.com/file/XXXXX/FileName?node-id=1-2`
- `https://www.figma.com/design/XXXXX/FileName?node-id=1-2`

## 替代方案

如果沒有 Figma Token：
1. 請使用者手動從 Figma 匯出截圖
2. 或用 Playwright 開啟 Figma URL 截圖（需要使用者已登入 Figma）