2020 年 11 月份，Figma 發布了全新的自動布局功能，這個超級棒的功能大大提升了設計效率，特別是對于一些重復性的組件，尤其有用。團隊最近正好在著手 AI Design 的更新，本文主要分享我們平時在項目中使用自動布局的一些經驗和方法，從 0-1 結合案例，詳細講解我們是如何使用 Figma 自動布局搭建自適應組件，希望這篇文章能夠在實際工作中幫助到大家。

以下分五個章節來敘述：

• 自動布局是什么
• 自動布局的應用技巧
• 組件實戰
• 頁面實戰
• 開發協作

自動布局是什么

1. 關于自動布局

講解之前我們先回顧下，自動布局是一種可以添加到框架和組件的屬性，通過自動布局，你可以創建響應其內容的動態框架。以前搭建或修改一個組件需要不斷的調整尺寸，現在通過自動布局即可完成操作。

2. 創建自動布局

我們可以將自動版式添加到框架或對象中。包括：新框架或空框架、已有內容的框架、組件和組件集、圖層/或組

我們拿按鈕舉個例子。

第一步：創建按鈕框架

創建一個按鈕框架，在框架中輸入按鈕的內容

第二步：創建自動布局

選擇按鈕框架，單擊屬性面板的“自動布局”部分中的“+”。或者使用鍵盤快捷鍵“SHIFT+A”

第三步：調整按鈕大小

調整自動布局屬性控制按鈕大小

第四步：調整按鈕樣式

調整按鈕顏色、描邊、填充等屬性

3. 自動布局的屬性

具有自動布局的框架具有與常規框架不同的屬性。應用自動布局時，我們可以在右側欄中看到一些可以更改的屬性，接下來我們看看這些屬性具體代表什么。

注：可新標簽頁打開后查看大圖。

方向

方向描述了自動布局框架的流動方式，選擇向下箭頭，表示垂直沿 y 軸添加，移除和重新排列對象。選擇向右箭頭，表示水平沿 x 軸添加，刪除和重新排列對象。

順序

選擇框架內的對象，使用鍵盤上的方向鍵調整對象的順序。

間距

調整項目與項目之間的間距

方式一：拖動屬性圖標以調整項目之間的間距。

方式二：在輸入框輸入數值，使用鍵盤上下鍵微調值。

填充

填充控制子對象與自動布局框架的邊界之間的空白。我們可以統一設置填充，也可以為頂部、右側、底部和左側填充設置不同的值。

方法一：在輸入框中輸入數值，調整填充值。

方法二：為每一面單獨設置填充，打開對齊和分布設置，并分別調整每個值。

對齊

選擇如何在“自動布局”框架內對齊子對象。我們不能單獨控制對象的對齊方式。但可以在父“自動布局”框架上設置子對象的對齊方式。

使用交互式網格為框架中的子項從九個布局選項中進行選擇。

如果分布設置為間隔，那么每個方向都有三個選項：

• 垂直自動布局：左，中，右
• 水平自動布局：頂，中，下

如果分布設置為打包，則每個方向都有相同的九個選項：

• 左上
• 中上
• 右上
• 左中
• 中央
• 右中
• 左下
• 中下
• 右下

分布

為框架中的子對象設置對齊規則后，選擇這些對象在框架中的分布方式。在下圖對齊面板，單擊底部下拉箭頭進行選擇：

• 打包：框架中的對象將被分組在一起。使用此選項可以使框架中的對象盡可能靠近并對齊。
• 等分：框架中的對象之間的空間沿框架的方向和對齊方式均勻分布。使用此選項可將對象拉伸到整個框架。

調整大小

自動布局最強大的功能之一是它能夠控制自動布局框架中對象的尺寸。

設置父級自動布局框架的調整大小，以適應對其子級對象的更改。使用調整大小面板，可以將調整大小設置分別應用于 X 和 Y 軸上的對象。

• 固定的寬度或高度 （Fixed）

將“自動布局”框架設置為“固定寬度或高度”時，框架的大小不響應其中對象的變化，框架尺寸的值將保持不變。

• 擁抱內容 （Hug contents）

將“自動布局”框架設置為“擁抱”內容，框架根據其內容調整自身大小。

• 填充容器 （Fill container）

在“自動布局”框架設置為“填充”，框架中的內容將拉伸到其父框架的寬度和/或高度。

約束和調整大小

我們不能將約束應用于自動布局框架內的子對象，但可以使用 resizing 屬性定義對象在調整框架或調整框架中對象大小時的響應方式。

將自動布局框架嵌套在常規框架中，仍然可以將其應用于約束。

應用技巧

1. 添加&刪除

“自動布局”支持任何圖層或對象添加到框架。

添加

1. 單擊對象并將其拖到“自動布局”框架上。
2. 使用藍色指示器選擇放置對象的位置。

刪除

要從主要組件或“自動布局”框架中刪除對象，只需將對象拖到“自動布局”框架之外或隱藏圖層或刪除對象即可。

2. 嵌套&重復

我們可以在另一個“自動布局”框架中嵌套一個“自動布局”框架。當嵌套自動布局框架時，嵌套的框架將同時具有父級和子級屬性。

嵌套

在圖例中，有三個層級的自動布局：

• 每個小方格都是水平的自動布局。當我們更改標簽文本時，方格可以增大和縮小。
• 我們將同一個顏色的小方塊添加到另一個水平自動布局中，當對同一層級內容進行任何更改時，對象就可以做出響應。
• 我們將三個橫向的自動布局創建成垂直自動布局。這樣一個完整的九宮格自動布局就制作完成了。

重復

在圖例中，有三個層級的自動布局：

您可以復制現有對象將其添加到“自動布局”。Figma 會將副本添加到原始對象的右側（水平）或下方（垂直）。

1. 在“自動布局”框架中選擇一個子對象。
2. 使用鍵盤快捷鍵（Mac：? Command-D、Windows：Ctrl+D）復制它。（如果圖層是嵌套的，可按住Command或Ctrl進行深度框選子對象）

組件實戰

1. 表格

第一步：結構分析

根據右側表格，我們可以將表格拆分成“頭部單元格”“正文單元格”“狀態”三個類別，并生成原子級自動布局組件，細分有利于后期組件分類更直觀，同時每一個自動布局組件可靈活組裝成更復雜的嵌套組件。

第二步：生成行

使用左側單元格組件，我們使用橫向的自動布局，生成表頭和表內容，同時設定好單元格自動布局的“調整大小屬性”。

第三步：生成表格

框選所有行，添加縱向的自動布局，同時修改每行的“調整大小屬性”（按單元格變量定義固定寬度或者適應容器寬度）。

2. 列表

第一步：結構分析

根據列表樣式，可將其看成是由成圖片、文案內容、行動點構成的橫向自動布局。

第二步：生成行

框選左側原子組件，添加一個橫向的自動布局，同時設定原子組件自動布局的“調整大小屬性”。

第三步：生成列表

框選所有行，添加縱向的自動布局，同時修改每行的“調整大小屬性”（按單元格變量定義固定寬度或者適應容器寬度）。

3. 導航

第一步：結構分析

導航可以分為左中右，logo、導航文案、右側圖標三部分。logo 和右側圖標部分分別為左對齊和右對齊，中間文案部分隨寬度自適應。

第二步：設置導航文案自動布局

文案部分屬于典型的 tab 樣式，當前選中狀態會出現下劃線，這里我們希望下劃線隨文案寬度自適應，因此可以分以下幾個步驟：

• 創建文案和下劃線兩個框架，其中下劃線的框架高度為 0（可使用鋼筆工具繪制 0 像素的線，然后選擇從對象創建框架，由此可創建 0 像素的框架）
• 文案框架創建成自動布局，下劃線只需普通的框架即可，在下劃線框架中繪制一根下劃線。
• 選擇文案和下劃線框框架創建一個縱向自動布局，文案框架的“Resizing”為”擁抱內容（Hug contents）”下劃線為“填充容器（Fill container）”，同時調整好下劃線到合適位置。

第三步：設置導航自動布局

選中 logo、導航文案、右側圖標三部分，創建一個橫向自動布局，其中 logo 為“固定的寬度或高度（Fixed）”導航文案為“填充容器（Fill container）”，右側圖標為”擁抱內容（Hug contents）”。

4. 卡片一

第一步：結構分析

制作一個如下圖的卡片，從卡片排版上看，我們可以將一張卡片看做是一個由內容部分和行動點組成的縱向的自動布局。我們希望卡片高度隨文案高度變化而變化，內容隨橫向卡片寬度自適應。

第二步：設置內容部分自動布局

內容部分屬于左右結構，拆的更細一點，內容部分的文案部分還可以分成標題和正文。首先我們將標題和正文創建縱向的自動布局，然后再將圖片和文案創建一個橫向的自動布局，設定好自動布局的屬性。

第三步：設置行動點的自動布局

行動點是由三個均分的 icon 組成，這里有兩種辦法實現均分，第一種方式是直接將三個 icon 創建成橫向的自動布局。然后將“分布”屬性設置為“等分(Space between），第二種方式是將三個 icon 分別創建自動布局框架，再創建一個總的橫向自動布局，將子內容設置成“填充容器 （Fill container）”

第四步：創建卡片的自動布局

選擇內容和行動點，創建一個縱向的自動布局，兩者屬性都為“填充容器 （Fill container）”，卡片一般為組合形式出現，同樣的方法還可以創建一個卡片組合的自動布局。

5. 卡片二

第一步：結構分析

如右圖所示，卡片二的樣式常用于以圖片為主的展示頁面中，如”Behance”或”Dribbble”的首頁作品展示。總體結構和卡片類似，這里不同點在于圖片大小控制著卡片大小。在全局布局的頁面中，圖片一般隨窗口的變化而變化，同時圖片的比例保持不變。

第二步：圖片等比例縮放

當卡片的寬度發生變化時，使用常規的垂直自動布局無法保證封面圖長寬比固定。在 Figma 論壇上，@ Solo Cube 給出了解決方案。

https://medium.com/@solo_cube/figma-components-with-a-fixed-aspect-ratio-elements-c7272e2ada9

6. 步驟條

第一步：結構分析

步驟條可以引導用戶按照流程完成任務，這里我們設計一個縱向的步驟條，如右圖，我們希望步驟條不限制寬度，高度隨內容變化。整體來看步驟條其實是由一個個選項單元組合而成，不同的狀態只是樣式不同而已，所以只需制作一個步驟單元，步驟條就算完成一大步了。

第二步：創建步驟選項單元

一個步驟選項單元是由“數字 icon+連接線+文案部分組成，我們希望文案高度不做限制，連接線隨內容高度變化而變化。

• icon+連接線部分

將 icon 和連接線創建一個縱向的自動布局，icon 的“Resizing”為“固定高度（Fixed height）”，連接線的“Resizing”縱向為“填充容器（Fill container）”

• 文案部分

將標題和正文創建一個縱向的自動布局，兩者縱向的“Resizing”均為“擁抱內容（Hug contents）”。我們希望每個步驟項之間有一定的間距，這時我們可以給文案部分設定一個下邊距，以保證信息可讀性。

• 整合

將“icon+連接線部分”和“文案部分”創建一個橫向的自動布局，縱向的“Resizing”均為“擁抱內容（Hug contents）”。

7. 樹組件

第一步：結構分析

樹組件應用廣泛，如文件夾、組織架構、生物分類、國家地區等等。使用樹組件，可以完整展現其中的層級關系，并具有展開收起選擇等交互功能。組件中的虛線可以很直觀的看到當前展開項的關聯關系，從結構上看，樹組件中的內容項都是同一種樣式，只是 icon 和文案不同而已。同時虛線會根據內容高度自適應。

第二步：創建一級內容

通過拆分結構后，我們得知，一級內容包含 icon+文案+虛線，二級內容將一級內容的結構復制到一級內容的文案部分即可，于是我們可以將一級內容看作是由「icon+虛線的縱向自動布局」和「文案+二級內容的縱向自動布局」創建而成的橫向自動布局。

第三步：增刪多級內容

創建完成一級內容，我們只需復制一級內容，嵌入到另一個一級內容的“文案+二級內容”的縱向自動布局中即可，多層級同理依次類推。

8. 圖表

第一步：結構分析

圖表的樣式多種多樣，我們拿曲線圖表舉個例子，如右圖，曲線圖表可以拆解為標題、圖例、圖表三部分。其中圖標部分結構相對比較復雜，其他使用常見的自動布局嵌套即可解決。

第二步：創建圖表

圖表分為“指標+參考線”、“日期”、“曲線”。這里如果使用常規的自動布局，將不能滿足曲線置于參考線上。這里我們需要結合普通的框架來解決這個問題。

• 創建“指標+參考線”自動布局，橫向和縱向的“Resizing”均為“填充容器（Fill container）”
• 創建“日期”自動布局，“分布”屬性設置為“等分(Space between）。
• 選擇“指標+參考線”+“日期”創建縱向自動布局，同時創建一個 Frame，將繪制好曲線和剛剛創建的自動布局放置到此 Frame，調整約束為上下左右，曲線橫向約束為“左和右”，縱向為”Scale”

第三步：創建自動布局圖表

選擇標題、圖例、圖表三部分，創建一個縱向的自動布局，三個部分的“Resizing”橫向為“填充容器（Fill container）”，標題和圖例的“Resizing”縱向為“固定高度（Fixed height）”，圖表的“Resizing”縱向為“填充容器（Fill container）”

頁面實戰

登錄

圖片列表

Dash Board

Basic Form

Step Form

Card List

Basic List1

Basic List2

個人中心

開發協作

新的 Inspect 面板取代了 Code 面板，并提供了開發人員可以抓取的更多相關屬性。

最后

附上演示的 Figma 文件鏈接（https://www.figma.com/file/QMX8IrYdFDU8wjpxPrm6e2/Figma），歡迎大家一起探討，AI Design 在 Figma 更新自動布局功能第一時間進行了更新，Figma 更新自動布局功能對組件庫資產的易用性和兼容性有了巨大的改善，同時能夠有效提升界面搭建速度，對于響應式組件的落地溝通更為順暢。整篇文章從組件到頁面，詳細講解了自動布局在實際案例中的應用。自動布局組件能夠從一定程度提高組件的靈活度，也能解決實際應用的效率問題。

歡迎關注作者微信公眾號：「AsiaInfo Design」