Figma Auto Layout 教學（下）
Oct 3, 2022
15分鐘讓你快速學會Figma強大的 Auto Layout 功能！
Press enter or click to view image in full size![]()
在執行UI設計時經常需要控制物件之間的位置、距離、間距等等，若是以手動一個一個調整，除了要花非常多時間外也可能產生誤差，使用Auto Layout讓設計稿具有一致性及提高效率。
我們將用以下經常製作頁面，登入頁及個人Profile 頁演繹Auto Layout 簡單說明及操作，最後並且附上整個設計稿的製作過程，讓你更清楚Auto Layout的使用方式。
Press enter or click to view image in full size![]()
Login 頁面製作：
Press enter or click to view image in full size![]()
- 使用快捷鍵 ⇧＋A / Shift+A 製作Auto Layout
- 調整Input輸入欄位高度 Vertical padding（垂直間距）為 12
- 設定Input輸入欄位Fixed固定寬為 335 以此類推完成其他輸入欄位
Tips :
確認完成 Input 樣式後，一定要做成 Component (⌥ + ⌘ + K)，分別將其他狀態Default、Disable、Valid、Active、Hover、Error 製作完成，方便日後切換樣式。Press enter or click to view image in full size![]()
如果你還不知道怎麼整理設計檔案可以參考以下連結
個人頁面 Following 區域製作
Press enter or click to view image in full size![]()
- 使用Alignment（對齊方式）將文字水平垂直居中
- 設定Fixed固定寬為375符合畫布寬度
- 進階模式將Spacing mode（間距模式）分散填滿容器
Press enter or click to view image in full size![]()
- 設定Fill contents 將物件寬度填滿容器
- 增加左右 Stroke 線條
Friends區域製作
Press enter or click to view image in full size![]()
- 設定 Spacing between items（物件之間的間距）間距為 4
- 透過 Absolute position 功能製作上線綠色點（Absolute position 功能可保留Auto Layout 屬性並可以隨意移動位置）
Press enter or click to view image in full size![]()
- 設定Spacing between items（物件之間的間距）間距為16
- 調整Horizontal padding（垂直間距）為20
- 調整Vertical padding（垂直間距）為10
最後附上完整的製作影片，希望新手們都能盡快學會超級強大的 Figma AutoLayout !
如果你也常在做後台相關的列表欄位設計，那你更應該要學會運用Figma AutoLayout 因為你不會因為客人或老闆說要改個欄位數量，在那邊重複調整間距大小，會讓你省去不少時間！
感謝閱讀到最後的你！
Auto Layout 是非常非常方便的功能，相信你學會後再也回不去其他設計軟體，期望 Adobe 爸爸能帶給 Figma 更多更方便的功能支援，最後你應該趕快去練習！
Just do it ! GL HF！
