【Tbao’s Dressing Room】怎麼用 Figma 做出一個換裝遊戲？

與團隊一起產出 T 寶的無限宇宙

YiRong

Follow

Published in

ActuaViz｜Actualize Your Future

10 min readMar 8, 2023

--

T 寶（Tbao）是 ActuaViz 團隊開發之「尋寶藏．詢保障」專案的吉祥物。從尋寶藏專案創建以來，我作為視覺設計師繪製過許多不同的 T 寶向量圖，覺得可以設法將不同造型的圖案集結起來，方便未來重複使用。

我利用 Figma 的 Component 功能製作讓其他成員能自由切換 T 寶表情服裝的「Tbao’s Dressing Room」檔案分享給大家遊玩，團隊成員也能自行產出需要的 T 寶圖片。

Figma 檔案製作方式

(1) 將散落各處的 T 寶蒐集到 Figma 檔案

首先將分散在各個不同檔案的 T 寶圖片集結到同一個 Figma 檔案，我會把 ai 檔在原繪圖軟體內輸出成 SVG 向量格式再匯入 Figma ，較能避免在不同軟體間直接複製貼上時發生錯誤。

(2) 調整圖形大小、拆分換裝部位

將每個圖片縮放到讓圖中的 T 寶變成相同大小，藉此讓不同圖片的裝飾物統一成合理尺寸。

決定可替換的部位有左眼、右眼、嘴巴、頭頂裝扮、眼部區塊裝扮、口鼻區塊裝扮、服裝（含身體動作）、背景，為這 8 個要換裝的區域框出 8 個 Frame。

複製各物件到對應的 Frame ，複製時先連同身體部位一起複製，方便後續對位。

(3) 製作物件 Components

分別為每個換裝物件 Frame 設定足夠放入物件的範圍，可以先選擇最大的物件去設定範圍，考慮到想繪製的新物件可能會畫更大，多預留一些空間把 Frame 拉大一點。

把剛複製出來的裝扮物件包含對位用身體拉進對應部位 Frame 內，同換裝區域的每個身體都要在 Frame 的同樣的位置，之後換裝位置才不會跑來跑去。

每個區域分別保留一個對位用身體 Frame ，畫新物件時就複製此 Frame 在範圍內繪製。區域第一個物件我會設置一個空的 Frame ，用途是換裝時拿來當作無裝扮的預設選項。

💡 製作物件時記得留意最後會用什麼樣的圖層順序呈現，若有會被上方物件蓋住的裝扮需進行取捨。
或可用差集工具將不需顯示的部分裁切隱藏。

編排好物件順序位置後，做成 Component 並重新命名，我的命名方式是數字加上物件名稱，用方便尋找的方式命名即可。

一次選取多個物件可以點選 ❖ Create multiple components 製作多個 Main component

(4) 製作角色 Main component

複製一個沒有裝扮的 T 寶到旁邊，這個 T 寶是所有裝扮物件的對齊對象。把做好的不同部位區域物件 Component 各一複製到無裝扮 T 寶上方對齊。

對齊好後把物件 Frame 內不需要的 T 寶身體刪除，也要把無裝扮 T 寶跟裝扮物件重複出現的五官身體刪除。

最後整個選取做成 Component （記得注意圖層順序，可拖曳左欄物件上下次序調整）。這個 T 寶 Main component 是調整、復原分身 Component 的準則，只要調整 Main component 就會一次影響到所有分身 Component 。

❓「❖ Main component」和「◇ 分身 component」的差別

Main component 是製作 Component 時產生的主要元件；分身 component 則是複製 
Main component 所得到的元件。一旦改動 Main component，所有的分身都會著變動；
改動分身 component 則不影響 Main component 及其他分身。

(5) 設定 Property 製作換裝面板

為了製作右欄的換裝面板，這邊要設定 T 寶 Main component 的 Properties ，方便切換物件。先選到 T 寶內的其中一個換裝區域 Component，接著點選右欄的 Create instance swap property 圖示。

命名按當前的換裝區域命名，點擊 Create property 按鈕確定創建。將所有的換裝區域 Component 依序創建成 property ，不須替換的身體底圖不用更動。

(6) 製作輸出圖片的區域

拉一個足夠放下 T 寶及其裝扮、背景的 Frame，這個 Frame 會是最後要輸出的圖片大小。把剛做好的 T 寶 Main component 複製到此 Frame 內。

💡 在沒有舊圖片並且要直接創作新角色的情況下，更簡單的方式是先決定整個圖片 Frame 的大小，
把不同換裝部位的 Frame 都設定成一樣大，畫圖的時候不要超出 Frame 的範圍就好。

複製 T 寶後水平翻轉與刪去身體軀幹，並分別框出 Frame ，可更方便地輸出多種不同的圖形來應用，不過由於是直接水平翻轉，左右不對稱的特定符號也會翻轉失去原貌。

前面已設定過 T 寶 Main component 的 Properties ，所以現在選取複製出來的分身 Component ，可以看到右欄出現可切換裝扮的面板，點擊裝扮區域下拉選單就能幫 T 寶換裝了。

換裝 Page 整體樣貌如下圖，左邊是讓大家可以遊玩的 4 個換裝 Frame ，右邊是 T 寶 Main component 及所有裝扮物件。

(7) 將不希望被更動到的物件鎖住

T 寶 Main component 會影響到所有分身 Component ，因為不希望被誤動到，所以在分享檔案前要先把它鎖起來。

基本上除了 4 個用來換裝遊玩的 Frame 以外，所有其他 Frame 都可以鎖起來比較保險。

製作檔案縮略圖 Thumbnail

複製一些 T 寶到 1600*960 px 的 Frame 上換裝編排，設計完成後對 Frame 右鍵選 Set as thumbnail 可設為此檔案的縮略圖。有些人會將縮略圖 Thumbnail 命名為封面 Cover ，基本上同樣是指 Figma 顯示此檔案的預設圖片。

新增使用說明 Page

為了讓平常沒接觸 Figma 編輯功能的團隊成員都能順利使用這個檔案，我新增了一個「❓ How to use」 Page 在最上方，把使用檔案的步驟文字搭配截圖記錄下來，如此在分享檔案後成員們便能自己參照此說明頁操作。

複製檔案並分享給團隊

考慮到 Tbao’s Dressing Room 之後也許還會新增裝扮、修改錯誤，並且希望成員們在不同時間複製的檔案內容是一樣的，所以在確定要分享前先複製一次檔案，兩個檔案的命名用 Original 與 Ver1 作區分，分享連結的時候選擇 Ver1 檔案分享，要調整內容的時候選擇 Original 原始檔案來修改，未來要分享新版本的時候再複製命名為 Ver2，這樣就能確保修改內容的時候不會影響到分享出去的檔案。