開篇一問：什么是自動布局

排版布局可以響應式的隨設計師對內容的增刪改而自動調整，無需手動修改徒增成本，進而大大提升工作效率。

你將收獲

如何創建自動布局

一般方法有3種：

① 直接按快捷鍵shift+A 最快也最為推薦★★★★★

② 右鍵模塊選擇「添加自動布局」

③ 選中2個以上模塊時點擊右側工具欄自動布局新增按鈕

如何取消自動布局：選中自動布局的畫板右鍵取消編組或者使用快捷鍵Ctrl+shift+G

畫板Frame、組Group和自動布局的區別

在Figma中「畫板Frame」、「組Group」和「自動布局Auto Layout」都是對一個或多個模塊進行整體的約束，區別就是組內或畫板內的模塊約束邏輯不同：

  ◎ 最為簡單的就是「組Group」，創建它的快捷鍵是Ctrl+G，組內的模塊不支持設置約束條件，可操作性為0。

  ◎ 再說「畫板Frame」，創建它的快捷鍵是Ctrl+Alt+G，畫板內的模塊支持設置一定的約束條件，比如拉伸畫板時可以設置畫板內的模塊固定在上下左右、水平居中、垂直居中、左右拉伸、縮放等等。約束只作用于畫板內的模塊，模塊間互不相干不存在約束。

  ◎ 而「自動布局Auto Layout」產生的本質上是一種特殊的畫板，創建它的快捷鍵是Shift+A，不僅可以設置內部各個模塊的約束條件，也可以設置模塊間的約束條件，非常靈活！

「自動布局Auto Layout」的邏輯優先級最高，當選中的模塊本身是一個「畫板Frame」或是「組Group」時，給它添加自動布局后，會默認對原有畫板或組內的元素添加自動布局，應用自動布局的約束邏輯，原來的畫板和組也不存在了，取而代之的是一個新的擁有自動布局屬性的畫框，圖層面板的icon也會變成自動布局的icon。

正片開始

玄生萬物，九九歸一！我們就從一個模塊的自動布局說起：

當你給一個模塊創建了自動布局后，就會生成一個帶有自動布局屬性的畫框（父層級）將之前選中的模塊（子層級）包裹進去，父層級生成的內邊距緊貼子層級，默認內邊距上下左右都為10PX。

若要單獨調節內邊距，可以在選中父層級后點擊最右側按鈕「對齊和邊距」展開完整的內邊距數據。若直接拉伸子層級或父層級時，約束的貼合就會被打破，在選擇不同對齊方式后子層級在父層級中的位置也會隨之改變。

來看兩個案例實操一下

① 按鈕：給一行文本添加自動布局后，調整下它的填充顏色和內邊距參數，再加個圓角，就做好了一個按鈕，當我們編輯文字（子層級）時，可以發現父層級是能隨子層級長度的變換而變化的。

② 切換開關：給一個圓形添加自動布局后，調整它的內邊距參數，填充一個顏色或添加一個描邊，然后拉伸下它的寬，按鈕就做好了。還可以調整對齊方式控制開與關。

同樣聊天框、彈幕、標簽等都可以用此法快速制作。

約束條件

之前就提到組、畫板和自動布局的最大區別就是約束條件不同，現在就讓我們看看約束條件究竟是何物！

添加自動布局后之所以父層級能隨子層級的變化而變化，就是因為它約束條件的。寬度和高度（橫向和縱向）都能設置約束條件，最多有3種「填充容器」「適應內容」和「固定寬度」，其中「填充容器」是子層級才有的屬性。

以寬度為例：

  ◎ 「填充容器」子層級的寬會完全貼合它的父層級所設置的內邊距，父層級的寬變化，子層級也會跟著變化。（聽爸爸的話，一般對子層級設置）

  ◎ 「適應內容」父層級的內邊距會完全貼合它的子層級，子層級的寬變化，父層級也會跟著變化。（聽兒子的話，一般對父層級設置）

  ◎ 「固定寬度」顧名思義就是寬度不隨他的父層級和他的子層級的變化而變。（互不相干，手動拉伸子或父就會變成固定寬度）

注意：父層級和子層級不存在同時設置「填充容器」和「適應內容」，兒子聽爸爸的話爸爸聽兒子的話，會相互沖突而無效。

當搞清楚自動布局的約束條件后，自適應按鈕的原理也就明白了，就是子層級適應內容(文本自動寬度)父層級也適應內容。

換個思路如果父固定寬度，子填充容器就能創造一個實用的文本框

所有的自動布局都是兩兩之間的，父與子也是兩兩之間，所以無論多少個自動布局的嵌套都可以拆分為一對一的關系。

如果a創建一個自動布局A，A再和b創建一個自動布局叫AB。對A而言，a就是子層級，A就是父層級；對AB而言，A和b是子層級，AB是父層級，AB與a并沒有直接關系，a的約束條件會作用于A，A的約束條件作用于AB。

下面就讓我們看看多個模塊之間的自動布局吧！

一生二二生三三生萬物，多個模塊的自動布局：

這里有兩個不同顏色的圓，給它們創建自動布局后，可以看到所有的數據按鈕都會生效。從左到右第一個是改變模塊方向，讓它們橫向或縱向排列、第二個是改變各個模塊的間距。

由此可見，模塊間對齊和調間距的繁瑣步驟便可以簡化為2步：創建自動布局后 選擇對齊方式 和 輸入間距大小。而幾乎90%的常見模塊組都可以這樣快速制作，再算上自適應的屬性加持，后續更改也會變得很容易。

請把「念頭通達」打在公屏上！

  

  ◎ Tab標簽

  ◎ 點贊按鈕

  ◎ 面包屑

  ◎ 輸入框

等等，我們好像還漏了一個！

在「對齊和邊距」里一直選擇的是堆疊，那選了等距后會怎樣呢？

設置等距后對象的間距將不再構成約束，而是兩端緊貼父層級的內邊距，內部模塊等距分布，隨父層級變化。比如在展示參與人數的時候就可以用上了。

說到這~~ 下面這些常規操作你必須知道!

① 快速排版：對齊、間距、大小，這些排版中一定會遇到的常規屬性是如何通過自動布局來實現的。

② 移位：不管自動布局的方向是橫向的、還是縱向的，其內部的模塊都可以自由移動，當某個模塊發生了位置變化，甚至是移出自動布局的畫框，其他模塊都會默認已有的模塊間距自動補齊，無需手動調整。

③ 復制：采用堆疊時，畫框內模塊的增加會默認以間距為約束，以固定的間距不斷堆疊。采用等距時，畫框本身的高或寬會構成約束，畫框內模塊的增加不會突破已定的寬和高的約束，間距也會等分。

④ 透明度占位：自動布局畫框里的所有元素都共同構建了約束，增加或減少，畫框都會隨之變化。而如果要用一個自動布局的畫框去構造另一個極為相似的模塊時，可以嘗試把內部某些元素的透明度改為0%，已達到保持其框架不變的條件下，做到“假刪除”。這在我們處理組件集的時候會經常用到，如果有機會下期安排！

⑤ 內邊距妙用：如果有一個多層嵌套的自動布局，內部的某些元素要做一些位置變化，以文本為例，可能某些人的操作是在文本前面敲很多空格，其實咱可以直接調整它某一側的內邊距已達到目的。

⑥ 等距的妙用：視頻中展示的是頂部欄隨著畫板的伸縮而自適應的例子，其實所有的自動布局案例都可以通過類似的處理達到該效果。

⑦ 回車選擇：Figma中回車會選中當前層級的下一個層級的所有內容，以便快速調整；而返回到上一級只需要按住shift+回車即可。

⑧ 文本自動寬度：文本的自動寬度其實也是一種自動布局，像是約定俗成的那種適應寬度，有時遇到文字過長就換行的時候不妨點擊一下自動寬度，說不定就OK了！

相比之前的基礎篇，下面的內容就會稍微有些復雜，僅靠圖片無法展示詳細過程，所以我將通過兩個例子以視頻的形式幫助你理清來龍去脈，邊閱讀邊看視頻一定能達到事半功倍、觸類旁通的效果！

案例1、圖表（以柱形圖為例）

從功能結構的角度，個人將“圖表”的結構拆分為3個部分：縱軸組、橫軸組和標題欄。先分別對這3塊建立自動布局，然后再整合到一起。

結合視頻與文章加深理解

步驟一：縱軸組

① 先將有效柱形和柱形占位創建自動布局（稱為柱1），采用堆疊的縱向布局，間距設為0px，把柱形占位的高度設為填充容器后，再把它的透明度調為0%。這樣拉伸有效柱形高度時“柱1”高度也不變。

② 再讓柱1和標題建立自動布局（稱為縱軸1）。最外層設置底部水平居中，內部的柱1高度設為填充容器。

③ 然后多復制幾個縱軸，添加自動布局。將間距設為0px，再把縱軸組設為等距，內層每個縱軸的高度和寬度都設為填充容器，縱軸組便完成了！

步驟二：橫軸組

① 首先標題和分割線創建橫向的自動布局（稱為橫軸1），最外層設置垂直居中對齊；內層分割線設為填充容器。

② 然后多復制幾個橫軸，創建縱向自動布局，設為等距；內層每個橫軸的寬度設為填充容器，高度設為適應內容。橫軸組完成！

步驟三：橫縱軸組合為坐標軸

把橫軸的底部起始線對準并貼合柱形底部，做適當調整后，選中兩者右鍵添加畫框，然后選中畫框里面的縱軸組和橫軸組（或者直接回車選中）把它們的約束修改為左右拉伸和上下拉伸。坐標軸完成！

步驟四：標題欄

標題和輔助文字建立自動布局，垂直居中對齊并等距排布。構成標題欄。

步驟五：合成自適應圖表

選中標題欄和坐標軸為其添加自動布局生成完整的柱形圖圖表，確定好間距比如20px。給坐標軸和標題欄的寬度填充容器，坐標軸的高度也填充容器。然后再添加一個填充給上20px的內邊距作為它的底。自適應圖表完成！

案例2、表格

從功能結構的角度，個人將“表格”的結構拆分為3個部分：篩選欄、表格骨架和表格數據。先分別對這3塊建立自動布局，然后再整合到一起。

步驟一：篩選欄

建立自動布局的嵌套：

左右兩邊的元素以相同間距選用堆疊模式排列成組（稱為組1、組2），再給組1與組2添加一個自動布局等距排布。篩選欄完成！

步驟二：表格骨架

① 搭建骨架：

表頭只有一行用來承載標題，可以用一個矩形作為底。表體由多行組成用來承載數據，一般用線來分割，所形成的數據條多為偶數。先將多條線段建立自動布局作為表體，再由表體和表頭建立自動布局，組成基礎骨架。

② 設置骨架自適應變化的屬性：

目標：拉伸時表頭的高度不變，表體的高度隨著拉伸自適應變化，表頭和表體的寬度隨著拉伸自適應變化。

操作：表頭高度設為固定高度，寬度設為填充容器。表體內部的線條高度設為固定高度，寬度設為填充容器。表體本身的模式為等距且寬度和高度都設為填充容器。

步驟三：篩選欄與表格骨架的結合

當篩選欄和表格骨架都搭建好了之后，就可以將這二者也進行一次自動布局的構建，采用堆疊，給兩者設置合適間距和內邊距，如20px。篩選欄的高度固定，寬度填充容器；表格骨架的高度和寬度都設為填充容器。如此，一個自適應的表格框架便做好了，接下來便是表格數據的創建與結合了！

步驟四：表格數據

目標：標題位于表頭區域，固定不動；數據項位于表體區域，隨表體的拉伸而拉伸。

① 創建表格數據：

經過以上分析，表格數據的制作和第三步（篩選欄與表格骨架的結合）十分類似。

先把幾個數據項進行豎向的自動布局的創建，選用等距；再把數據組與標題進行自動布局，就做好了一列數據；接著把這列數據多復制幾份，再來一次自動布局，這次用的是等距排布。

② 設置表格數據自適應變化的屬性：

最外層用的是等距。第二層的數據列高度設為填充容器。第三層的數據組高度填充容器，寬度適應內容；標題高度為固定高度，寬度為適應內容。

步驟五：合成自適應表格

把數據部分和表格骨架部分排列在一起，選中它們右鍵添加畫框，點擊畫框回車選中里面的兩部分，把它們的布局約束都調為左右拉伸和上下拉伸。由于數據部分變化較多，故并沒有簡單的將其與骨架進行自動布局的結合而是建立布局約束，方便后續的調整

這樣一個自適應的表格便制作好了，后續不論是增加數據還是增減行數或者是拉伸表格里面的內容都可以自適應的變化，因為數據部分并未與骨架部分緊密結合，可能出現偏移，拉伸后只需略微調整即可。

文章來源：站酷 作者：餅干不是派

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務