| name | figma-export |
| description | 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. |
Figma Export
從 Figma URL 導出指定 frame 的 PNG 截圖。
使用時機
- 需要取得 Figma 設計稿的靜態截圖
- 進行設計稿 vs 實作的比對前
前置條件
FIGMA_ACCESS_TOKEN:環境變數,或放在專案根的 .env(腳本會自己讀)
- 不需額外套件——腳本只用 Python 內建的 urllib
使用方式
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:
- 請使用者手動從 Figma 匯出截圖
- 或用 Playwright 開啟 Figma URL 截圖(需要使用者已登入 Figma)