FIGMA 入門
Figma 初心者攻略 #2：Auto Layout
把 CSS 的 Flexbox 搬進 Figma
系列目錄
1. Figma 初心者攻略 #1：要用 Frame 還是 Group
2.（本篇）Figma 初心者攻略 #2：Auto Layout
一些寫在前面的廢話
哈囉！這個系列的上一篇居然是在 2021 年寫的 lol，開始工作以後寫文章的習慣就斷了 🥲，最近因為要籌備四月底的 Figma 實體教學，突然想起這系列還在爛尾 xD，決定順便把這個系列補完，希望剛好幫助到有需要的人囉！
Auto Layout 是什麼？
Auto Layout 是我覺得 Figma 最強大的功能之一，還為了它從 Sketch 跳槽到 Figma；Auto Layout 是 Frame 的專屬功能，所以要注意不要用 Group 哦。
前面一篇提到 Frame 就像網頁中的 <div>，而 Auto Layout 就像是你幫 <div> 加上 display: flex的屬性，如果對前端不熟也沒關係，Auto Layout 就是我們告訴這個 Frame 該怎麼排列它裡面的內容，可以是垂直、橫向排列內容，並且可以設定每個內容之間的距離，內容四周要留多少 Padding。
以前都是我們手動去精心編排我們的設計稿，慢慢一格一格推像素，現在可以省點事了，把規則講清楚以後就讓 Figma 幫我們排好！
Auto Layout 啟用的方式
這裡用建立一個簡單的 Button 來示範，首先我們建立一個文字圖層。
接著我們有兩種方式幫 Frame 加上 Auto Layout：
第一種：土法煉鋼
先學習怎麼一步一步來建立 Auto Layout 吧，選取我們剛才建立的文字圖層，接著用 Frame 包住它，這裡有兩種方式：
- 還是土法煉鋼：啟用 Frame Tool （熱鍵是 F）並拖曳直到框住文字圖層，文字圖層就會被放進 Frame 裡面了
- 第二種是快捷鍵，首先選擇文字圖層，接著按 Option + Command + G，（如果你是 Windows 使用者就把 Option 替換成 Alt），這樣你的文字圖層就被 Frame 包起來了。
要注意一點，不是按 Command + G 哦，這樣是用 Group 包起來，而不是用 Frame 哦！有觀察到初心者可能因為過去使用其他設計軟體，很習慣用 Command + G，但這樣會變成是用 Group。
OK，現在把文字圖層放進 Frame 裡面了，我們只要選擇 Frame 並按下右邊的 Auto Layout 就大功告成。
第二種：高手都按快捷鍵
選取文字圖層後快捷鍵 Shift + A 給它按下去，這個快捷鍵幫你做了以上所有事情：
- 建立一個 Frame
- 把文字圖層加進去
- 啟用 Auto Layout
如果你真的很喜歡用滑鼠的話，可以在右鍵選單找到它。
一個貼心的細節
進入下一步前，分享一個 Figma 貼心的小細節。
當我們同時選取一個 Rectangle 跟 Text 的時候，按下 Shift + A 會將 Rectangle 轉換成 Frame 並套用 Auto Layout。如果你過去是 Sketch 的使用者，你應該有很多元件是用一個 Rectangle 墊在底下當背景色的，這個細節可以幫你省掉不少手動處理的麻煩 🥺
Auto Layout 設定
OK 我們現在啟用 Auto Layout 了，接下來就是設定啦！
新的圖層寬高設定
首先注意到圖層的寬度跟高度變成寫死的，還多了一個叫「抱抱」的選項。
滑鼠移到「Hug」點下去會出現全部的選項：
- Fixed：用 Fixed 的話我們又可以更改寬、高了，這時 Frame 就會是用我們的尺寸。
- Hug：「抱抱」的意思是 Frame 會根據裡面的圖層來變寬、變高，就像是抱抱一樣，Figma 取這個名字蠻可愛的 xD
- Fill container：功用就是讓 Frame 跟著外面的 Frame 來變寬、變高，例如你用 Frame A 包住 Frame B，兩者都有開啟 Auto Layout，這時你在 Frame B 可以看到 Fill container 的選項，假設我們在 Frame B 的寬度啟用 Fill container，Frame B 的寬度就會根據 Frame A 的寬度來決定。
所以這第三個選項只有你選擇的圖層在外層有 Auto Layout Frame 包住才有哦！畢竟外面沒東西包著，Frame 怎麼知道它要跟著誰變大 xD。
Auto Layout 的距離設定
當你選擇我們啟用 Auto Layout 的 Frame 時，你會發現右手邊的介面多了這些設定：
我們從左邊開始看：
一、排列方向：看你想讓內容垂直排列，還是橫向排列。
二、Spacing：內容之間的間距，例如我們一個 Frame 裡面有 5 個圖層，我們可以設定 Spacing 是 24，這樣 Auto Layout 就會幫我們在每個圖層中間都留 24 的距離。
三、Padding：可以在內容的四周留下空間，例如按鈕四周都會留一定 Padding，讓它有足夠可點擊的空間，例如我左右 Padding 設定 32，這樣無論我寬度怎麼便寬，左右都會保持 32 的距離。
快速修改 Spacing、Padding 的小技巧：電腦截圖拍不到那個介面，只能用影片表示，你會在圖層之間看到有一個拉桿，拉動它們可以調整 Spacing 跟 Padding，配合 Option/Alt 可以一次調整對邊，點擊拉桿則可以直接輸入數值。
四、物件對齊位置：有兩種 Mode 可以選擇，在細節設定中可以切換 Spacing Mode，可以按 X 快速切換模式。
結語
我要大大感謝在 Taiwan UI/UX Designer 社團陪我試跑課程的 Ariel、Grace、Patricia、Ryno、怡佳、瑞玲，因為有你們的幫忙測試，我才更了解初心者在實作時會產生哪些問題，這篇文章我很大一部分的內容是根據你們的回饋去寫的，儘量在步驟的描述上更詳細一些，真的非常感謝 🙇♂️。
希望各位都能更認識 Figma 的操作，為臺灣帶來更多好設計！
下一篇會介紹 Component，下次見。喜歡的話可以幫我拍拍手。
