Figma 編輯 Gather Map 101

• Figma 編輯 Gather Map 101
  • 基本
  • 基礎 - 擺放物件
    • Maps page 解說
    • 擺放物件
  • 進階 - 製作物件
    • A. 直接把 Gather 上現有的東西拿來用
    • B. 自己做！

基本

Figma 檔案中有兩個 Page：Maps 與 Objects。

• Maps: 擺放場景的地圖，其中每個 Frame 會是一個 Gather 上的 Room。
• Objects: 擺放共用的物件，這些物件是 Figma Component，只要修改 Component 本身，檔案中的所有 Component 實體都會跟著改變。

---

基礎 - 擺放物件

Maps page 解說

Maps 中每個 Frame 底下都會有兩個 Group，Foreground 以及 Background。

• Background 是會被人物踩在腳下的東西，例如地板、牆面和普通的不可跨越物件。
• Foreground 則是會蓋在人物頭上的東西，例如樹，或是也可以利用半透明做出一些效果，例如水中。

Background 與 Foreground 這兩個 Group 可以 export 成 PNG 後直接到 Gather Mapmaker 上傳為 Background 與 Foreground：

Foreground 裡面有個 "Shared Foreground" 的 component 而 Background 裡有個 "Shared Foreground" instance 是因為我們希望有些東西同時存在於 Background 與 Foreground 內。
不要去編輯 Background Group 裡的 Shared Foreground。

原因之一是因為 Gather 上的 Mini Map 只會顯示 Background 而不會顯示 Foreground。讓 export 出來的 background 裡包含一些主要的 foreground 物件可以讓 Mini Map 看起來比較合理，不會像破圖。

擺放物件

點選左邊的 "Assets" → "Local components" → "Objects"，然後直接將物件拖拉到場景中。

可以回到 "Layers" 看看物件是否有被放到正確的圖層。若無，就在左手邊的圖層列表中拖拉改一下。

若要新增第二個以上同樣的物件，可以直接對物件按 Command + D，比重新拖拉一個新的還快（通常也不用再處理圖層，因為複製出來的物件會複製在同一個圖層裡）。

通常物件會被設計成要擺放在紅色的網格內。如果歪掉可以對齊一下。

TIP: 可以把暫時不會去動的 Group 鎖起來。

---

進階 - 製作物件

A. 直接把 Gather 上現有的東西拿來用

1. 到 Gather 的 Object Picker 選物件，切到想要的顏色和旋轉到想要的方向之後對圖片按右鍵選「另存圖片」。
   

2. 幫存下來的東東加上 .png 副檔名。
   

3. 打開 Figma 的 Objects page。
   

4. 把第二部準備好的檔案拖進去放好。

5. 放好後對他按右鍵，選 "Frame Selection"。
   

6. 在左手邊幫新的 Frame 取個好名字。
   

7. 取完名後對他按右鍵，選擇 "Create Component"
   

B. 自己做！

TODO

• 物件需要遵照 32x32 網格

Showoff 一個 RWD 物件：