自動生成 unity ugui prefab 測試案例

這次測試了三種不同的方式來自動生成 Unity UGUI Prefab，分別是透過 PSD Parser、元件+腳本，以及直接從 Figma 導出。以下記錄各方式的實驗結果。

方法一：PSD Parser + Unity Script

透過解析 PSD 圖層結構，自動對應生成 UGUI 元件。挑選了兩組效果比較好的 PSD 進行測試。

[GUIPackCartoon]



這組資源的 PSD 結構相對乾淨，轉換出來的 Prefab 幾乎不需要手動調整。

[Casual Game GUI Pack Resources]

轉換後的層級結構大致與 PSD 圖層吻合。

方法二：元件 + 腳本方式

GUI PRO Kit - Simple Casual

Claude 的生成方式比較特殊，採用的是 Script 驅動的做法，類似早期 MMO 開發常見的架構——先由腳本描述 UI 結構，再動態建立元件，而不是直接生成靜態的 Prefab 樹狀結構。這種方式靈活性高，但可讀性稍低，後續維護需要多留意。

方法三：Figma 直接導出

這個方式透過 Figma API 取得設計稿資料，再轉換成 Unity 可用的結構。流程如下：

生成 Token — 在 Figma 帳號設定中產生 Personal Access Token
獲取 File Key — 從 Figma 設計檔的網址取得對應的 File Key
設定 Token 與 File Key — 填入工具的設定欄位
執行獲取圖片 — 透過 API 拉取設計稿中的圖層與圖片資源
比對結構 — Figma 原始結構 vs 轉入 Unity 後的層級

生成 token

獲取 filekey

設定token跟filekey

執行獲取圖片

這是 figma 原始結構

這是轉入 unity 的結構

Figma 方式的優點是可以直接對接設計師的工作流程，缺點是圖層命名習慣若不統一，轉換後的結構會比較亂，需要在命名規範上先做好約定。

小結： 三種方式各有適用場景。PSD Parser 適合有現成美術資源的情境；Script 驅動方式彈性大，適合程式主導的專案；Figma 導出則適合設計師與工程師協作流程較完整的團隊。