Figma / PSD 交程式前自查：遊戲 UI 設計稿怎樣才不容易返工

程式返工 UI，一半不是審美問題，而是交接物不滿足引擎。你在 Figma / Photoshop 裡改一版，程式就要重切、重搭 Canvas、重對 Anchor——週期被拉長，和 AI 生圖工具無關。

下面是一份交程式前的自查清單，涵蓋高頻搜尋場景：Figma 匯出 Unity、PSD 匯入 Unity UI、遊戲 UI 切圖、活動換皮與多語言 UI。文末說明「只交 PNG」和「結構化匯出」差在哪裡；工具僅作選型參考，不限定單一產品。

---

程式真正需要什麼

他們要的	不是這些
可命名的層級（按鈕、面板、列表項）	只有一張整屏 JPG
按鈕 normal / pressed / disabled	單張「看起來能點」的圖
可替換的文案層	全部 raster 成美術字
相對位置與錨點語意	僅 layout 參考圖 + 20 張散 PNG
可重用的預製體結構	每次活動從零手搭

驗收標準一句話：進 Unity UGUI / Godot Control / Cocos UI 後，改文案或換皮不必重建整棵樹。

---

交稿前 12 項自查

結構與命名

#	檢查	說明
1	Frame / 組命名語意化	Panel_Shop、Btn_Buy，避免 Group 12
2	可點擊與裝飾分層	背景、邊框、圖示、文字分開
3	列表項單獨成組	List_Item 可重用
4	隱藏草稿與廢棄 Frame	減少匯出噪音

狀態與規格

#	檢查	說明
5	按鈕多狀態齊全	normal / pressed / disabled（或程式約定命名）
6	九宮格 / 可拉伸區域標清	面板、輸入框勿硬縮放
7	目標解析度與安全區	豎屏手遊留 notch / 底部條
8	字體策略	要在地化的用文字層；藝術字單獨標註

出海與活動

#	檢查	說明
9	文案長度預留	德 / 西語常比中文長 30%+
10	換皮是否只換視覺	活動皮：佈局不變，只換圖與色
11	多語言是改字還是改佈局	理想：同結構多語言稿
12	匯出格式說明	layered PSD / Figma 連結，或約定切圖命名

Figma 側整理要點：Figma → Unity 流程。PSD 側：5 分鐘匯入 Unity UI。

---

三條交接路徑（客觀對比）

路徑	做法	適合	痛點
A. 手工切圖	Export PNG + layout 截圖，程式手搭	極簡 UI、一次性 Demo	改一版重切重搭
B. 引擎外掛	Figma Converter、Psd-Exporter 等	團隊已有固定規範	多引擎常要重做；外掛品質參差
C. 結構化畫布	分層稿進遊戲畫布 → 原位拆分 → 匯出 Prefab	多屏 UI、頻繁換皮 / 出海	需接受遊戲向匯出流程

路徑 C 在 VberAI Studio 等產品裡常見：解析 PSD / Figma → 保留佈局的 UI 拆分 → 匯出 Unity / Godot / Cocos（見 遊戲 UI 拆分進引擎）。設計師仍可在 Figma 主稿；定稿後走結構化匯出，而不是每版手工 Export 20 張 PNG。

---

設計師高頻場景

遊戲 UI 切圖 / 原位切圖

整屏概念圖若只有 PNG，程式要猜按鈕邊界。更穩的做法：整屏落畫布 → 按原位置拆控件（原位切圖說明），位置資訊隨拆分走，避免「切出來了但進引擎全偏移」。

Figma 匯出 Unity / Godot

外掛若只出扁平 Sprite 包，程式仍要重建 RectTransform / Control 樹。選型時問一句：匯出物是 Prefab / 層級，還是 zip 散圖？Godot 對比：Figma → Godot 手動 vs AI 流程。

遊戲 UI 換皮（節日 / 活動）

萬聖節、聖誕等活動：同一套佈局，換主題素材。若每次換皮都重切重搭，營運節奏會被拖慢。換皮工具應保證節點結構不變（UI 換皮與主題變體）。

遊戲 UI 翻譯 / Figma 多語言

出海常見坑：翻譯後文案變長，佈局擠爆。理想流程是 只換字串，不重排 Frame（UI 一鍵翻譯）。交稿時在 Figma 用 Auto Layout + min/max 寬度預留。

圖示與半透明素材

技能 icon、光效 UI 在入庫前常需去背（髮絲、半透、光暈）。通用去背易糊邊；遊戲向工具會強調 Alpha 通道（光效 / 特效摳圖），再回畫布或引擎。

---

與 AI 生圖工具的關係

Midjourney、即夢、GPT Image 2 等適合出視覺方向；若終點是引擎，仍要解決拆分與層級。常見組合：

AI 出整屏 UI 概念 → 設計師在 Figma 整理分層 → 結構化匯出進引擎

不要把「海報級單圖」直接當最終交接物。工具對比見 AI 生成遊戲設計圖選型、7 條 UI 工作流。

---

常見問題

只交 PNG 可以嗎？
Demo 可以；量產 UI 會反覆返工。至少附 layout 標註 + 命名規範。

Figma 裡 Auto Layout 必須完美嗎？
不必網頁級完美，但分組與命名比像素摳細節更重要。

程式總說「切圖切不對」指什麼？
常指：缺狀態圖、九宮格錯、可點區域與視覺不一致、或散圖丟了相對位置。

換皮和重做 UI 有什麼區別？
換皮：結構不變，換視覺；重做：連 Hierarchy 都變。活動營運應走換皮路徑。

設計師要學 Unity 嗎？
不必寫腳本；理解 Canvas / Anchor / Prefab 概念即可顯著減少溝通成本。

VberAI Studio 和 Google AI Studio 是一回事嗎？
不是。前者是遊戲畫布與引擎匯出；後者是 Google 通用 AI 開發環境。見 對比文。