![](https://static.wixstatic.com/media/440722_d61e7addd7c54cba8462f0621b8b9f40~mv2_d_1500_1500_s_2.png/v1/fill/w_980,h_980,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/440722_d61e7addd7c54cba8462f0621b8b9f40~mv2_d_1500_1500_s_2.png)
我在出設計圖時經常會遇到工程師同事問我「這個文字框字數超出的話要怎麼顯示?」或是「這個按鈕或卡片在小螢幕或平板時要怎麼顯示?」為了再出一張示意圖,我必須重新微調文字換行後下方物件的間距,或是按鈕和卡片拉長的畫面,過程煩瑣又耗時。上週同事分享了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 (⌘),畫面就會顯示正常的藍線。
![](https://static.wixstatic.com/media/440722_5a6c130639e140ad8c4249a239e2d08f~mv2_d_2880_1752_s_2.png/v1/fill/w_980,h_596,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/440722_5a6c130639e140ad8c4249a239e2d08f~mv2_d_2880_1752_s_2.png)
Where?
Auto Layout的普遍應用如下: - 按鈕:隨字數增減自動調整長度,多個按鈕的間距也會自動調整 - 列表:隨物件增減或順序自動調整間距,適合複雜的組件,例如包含圖片、文字和按鈕的卡片設定
想了解更多關於Auto Layout的資訊,可以先看教學影片以及上述的部落格文章,或是直接到遊樂場(Playground)動手實作(卡片步驟教學很有趣!)。如果遇到操作問題,也可以到技術文件找答案。
以上就是我對Auto Layout的探索初體驗,接下來就要一步步把工作用的設計圖Auto Layout了!(如果我們的日常瑣事也可以Auto Layout該有多好XD) 期待煥然一新的設計系統和設計腦 🤖 🔜 🤹🏻♀️
댓글