面向設計師、運營、前端素材處理用戶：在遠端 Mac上做Sketch或Figma的批量導出 PNG時，尺寸規範與命名規範直接影響交付效率與前端對接。本文提供可落地的步驟清單 + 校驗清單，涵蓋 @1x/@2x/@3x 尺寸表、前綴/後綴/切圖規則、推薦工作流，以及常見導出偏色與解析度問題排查；文末可直達站內部落格、首頁與購買頁。📐✅
為什麼尺寸與命名規範影響交付效率
尺寸不統一會導致前端需要手動換算或重複切圖；命名混亂則難以做自動化校驗、CDN 快取與版本管理。在遠端 Mac上集中做批量導出 PNG時，若事先約定尺寸規範（如統一 @2x 或按倍率出 @1x/@2x/@3x）和命名規範（前綴表模組、後綴表密度或尺寸），可減少返工、便於腳本校驗與團隊協作，整體交付效率明顯提升。
Sketch/Figma 批量導出 PNG 的常用設定對比
在遠端 Mac上，兩款工具在批量導出時的入口與選項略有不同，建議按下面要點設定，保證輸出一致。
| 對比項 | Sketch | Figma |
|---|---|---|
| 批量導出入口 | 選中多個圖層/畫板 → 右下角「Make Exportable」→ 選 PNG | 選中對象 → 右側 Export → 新增 PNG，可多倍率 |
| 倍率 | 1x, 2x, 3x 可多選，每個切片獨立設 | 1x, 2x, 3x 等，在 Export 裡新增多份 |
| 透明背景 | 畫布無背景即透明；導出選 PNG-24 或 PNG-32 | 預設透明；導出時選 PNG 即可，注意「Include 'id' in file name」可關 |
| 命名 | 以圖層/畫板名為基礎，可加後綴如 @2x | 以節點名為基礎，可關掉「id」避免冗長 |
@1x/@2x/@3x 與尺寸規範表
設計稿通常按某一邏輯尺寸（如 375pt 寬）繪製，導出時需按倍率出圖。下表為常用對應關係，便於統一尺寸規範。
| 邏輯尺寸（pt） | @1x（px） | @2x（px） | @3x（px） |
|---|---|---|---|
| 44×44 | 44×44 | 88×88 | 132×132 |
| 100×100 | 100×100 | 200×200 | 300×300 |
| 375×812（整屏範例） | 375×812 | 750×1624 | 1125×2436 |
校驗要點： 導出後抽檢尺寸是否為整數、寬高比是否與設計一致；若為圖示/按鈕，確認與規範表一致，避免前端用錯倍率。
命名規範（前綴/後綴/切圖規則）與校驗要點
建議採用「前綴表模組 + 名稱 + 後綴表尺寸/密度」的形式，便於自動化與人工核對。
- 前綴： 如
ico_（圖示）、btn_（按鈕）、banner_（橫幅），便於按模組篩選與 CDN 目錄劃分。 - 後綴： 如
@2x.png、_2x.png或-44x44.png，明確倍率或實體尺寸，避免與 @1x 混用。 - 切圖規則： 一圖一切片；畫板/元件名即導出檔名基礎；避免空格與特殊字元，用底線或連字號。
校驗要點： 用腳本或手工檢查：① 檔名是否含約定前綴/後綴；② 是否出現重複檔名（不同畫板導出到同一目錄時）；③ 副檔名是否為 .png 且大小寫統一。
可執行步驟與推薦工作流
- 設計稿內： 為需要導出的圖層/畫板設定好導出預設（PNG、倍率、命名），統一勾選「透明背景」或「無背景」。
- 批量導出： 在遠端 Mac上開啟 Sketch/Figma 檔案，全選目標畫板或圖層，執行批量導出到同一目錄（建議按模組分子目錄）。
- 命名與目錄： 導出前確認命名規則（前綴/後綴）與工具中的「Export」名稱一致；導出後按清單核對檔名與數量。
- 尺寸與格式校驗： 用
sips -g pixelWidth -g pixelHeight（macOS）或 ImageMagick 批量檢查尺寸；抽檢 Alpha 與 sRGB 標籤。 - 交付： 打包或上傳至 CDN/設計交付平台，附上本次導出的尺寸與命名說明，便於前端直接引用。
常見導出偏色與解析度問題排查
- 偏色： 統一使用 sRGB 色彩描述檔導出；在遠端 Mac 與本機預覽時盡量使用相同色彩設定。若 Figma 在瀏覽器中導出，注意瀏覽器色彩管理差異，建議用桌面端或遠端 Mac 原生應用導出。
- 解析度/模糊： 確認導出倍率與設計稿畫布倍率一致（如設計稿是 @2x 畫布，導出選 @2x 即 1:1）；大圖避免用「縮放導出」導致插值模糊。
- 透明區域發灰/發黑： 導出格式選 32-bit RGBA；檢查畫布背景是否為「無」或「透明」。
- 尺寸不對： 檢查畫板邊界是否包含多餘空白、是否勾選「Trim transparent pixels」等，避免導出畫布與預期不符。
總結： 在遠端 Mac上做好 Sketch/Figma 批量導出 PNG的尺寸規範與命名規範校驗，可大幅減少設計與前端的來回修改，提升交付效率。建議將本文的步驟清單與校驗要點納入團隊 SOP，並搭配專用遠端 Mac 節點集中導出與自動化腳本，讓素材流水線更穩定、可重現。