我在出設計圖時經常會遇到工程師同事問我「這個文字框字數超出的話要怎麼顯示？」或是「這個按鈕或卡片在小螢幕或平板時要怎麼顯示？」為了再出一張示意圖，我必須重新微調文字換行後下方物件的間距，或是按鈕和卡片拉長的畫面，過程煩瑣又耗時。上週同事分享了Figma本月剛推出的新功能Auto Layout，看完教學影片我不經驚嘆Figma好像聽到了我們設計師的日常murmur，打造除了公開透明又去蕪存菁的設計流程！Auto Layout到底哪裡神奇呢？
What is Auto Layout? Why?
Auto Layout (自動佈局)這個詞是開發者定義介面元件間關聯性(像是大小和間距)的佈局系統，原先應用在HTML/CSS和iOS的開發語言SwiftUI。
Figma產品總監Sho Kuwamoto在官方部落格文章“Design more, resize less, with Auto Layout”中提到推出Auto Layout的動機，希望將簡潔效能的開發工具帶入自由開放的設計環境， 自動處理設計軟體尚需人工微調的細節。
Figma的願景是“Designing in Figma is like building with code.” 「Figma讓設計就像寫code一樣」(務實嗎?應該不是輕鬆吧:P)，總之就是拉近設計和開發的距離。
How?
Figma引進CSS的核心概念box模式(特別是flexbox功能)，讓物件可以像HTML的<div>標籤(或是想像一組俄羅斯娃娃)彼此嵌入(nesting)。
Figma的Auto Layout是套用在Frame (外框) 或是Component (組件，可重複使用、統一樣式的物件)上，快捷鍵是Shift(⇧)+A。
每層外框包含一項或多項物件，新增物件只需要拖放(Drag & Drop)進外框就可以了，且外框會隨著物件長度自動調整大小。
屬性面板的Auto Layout區塊可以調整物件的上下和左右間距、設定多項物件的水平或垂直堆疊、編輯外框的樣式(填滿、線條、圓角等)、固定外框寬度或自動增長等。
如果要改變外框內物件的排列順序，做法有很多種：拖放物件、選取物件後在鍵盤按左右箭頭調整，或是點擊屬性面板上的箭頭按鈕。Figma為了一項功能提供多種作法，特別貼心！
Figma還有一套人性有趣的防呆機制，就是如果要把一張大圖片拖放進一張寬度太小的卡片，Figma預設會沒反應 (少了提示置入位置的藍線)，因為這個行為不是理想的排版，系統推測你可能是不經意移動物件。如果要強制執行動作，需要在拖拉時按著Command (⌘)，畫面就會顯示正常的藍線。
Where?
Auto Layout的普遍應用如下： - 按鈕：隨字數增減自動調整長度，多個按鈕的間距也會自動調整 - 列表：隨物件增減或順序自動調整間距，適合複雜的組件，例如包含圖片、文字和按鈕的卡片設定
想了解更多關於Auto Layout的資訊，可以先看教學影片以及上述的部落格文章，或是直接到遊樂場(Playground)動手實作(卡片步驟教學很有趣！)。如果遇到操作問題，也可以到技術文件找答案。
以上就是我對Auto Layout的探索初體驗，接下來就要一步步把工作用的設計圖Auto Layout了！(如果我們的日常瑣事也可以Auto Layout該有多好XD) 期待煥然一新的設計系統和設計腦 🤖 🔜 🤹🏻♀️
댓글