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

以下分五個(gè)章節(jié)來(lái)敘述：

• 自動(dòng)布局是什么
• 自動(dòng)布局的應(yīng)用技巧
• 組件實(shí)戰(zhàn)
• 頁(yè)面實(shí)戰(zhàn)
• 開(kāi)發(fā)協(xié)作

自動(dòng)布局是什么

1. 關(guān)于自動(dòng)布局

講解之前我們先回顧下，自動(dòng)布局是一種可以添加到框架和組件的屬性，通過(guò)自動(dòng)布局，你可以創(chuàng)建響應(yīng)其內(nèi)容的動(dòng)態(tài)框架。以前搭建或修改一個(gè)組件需要不斷的調(diào)整尺寸，現(xiàn)在通過(guò)自動(dòng)布局即可完成操作。

2. 創(chuàng)建自動(dòng)布局

我們可以將自動(dòng)版式添加到框架或?qū)ο笾小０ǎ盒驴蚣芑蚩湛蚣?、已有?nèi)容的框架、組件和組件集、圖層/或組

我們拿按鈕舉個(gè)例子。

第一步：創(chuàng)建按鈕框架

創(chuàng)建一個(gè)按鈕框架，在框架中輸入按鈕的內(nèi)容

第二步：創(chuàng)建自動(dòng)布局

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

第三步：調(diào)整按鈕大小

調(diào)整自動(dòng)布局屬性控制按鈕大小

第四步：調(diào)整按鈕樣式

調(diào)整按鈕顏色、描邊、填充等屬性

3. 自動(dòng)布局的屬性

具有自動(dòng)布局的框架具有與常規(guī)框架不同的屬性。應(yīng)用自動(dòng)布局時(shí)，我們可以在右側(cè)欄中看到一些可以更改的屬性，接下來(lái)我們看看這些屬性具體代表什么。

注：可新標(biāo)簽頁(yè)打開(kāi)后查看大圖。

方向

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

順序

選擇框架內(nèi)的對(duì)象，使用鍵盤(pán)上的方向鍵調(diào)整對(duì)象的順序。

間距

調(diào)整項(xiàng)目與項(xiàng)目之間的間距

方式一：拖動(dòng)屬性圖標(biāo)以調(diào)整項(xiàng)目之間的間距。

方式二：在輸入框輸入數(shù)值，使用鍵盤(pán)上下鍵微調(diào)值。

填充

填充控制子對(duì)象與自動(dòng)布局框架的邊界之間的空白。我們可以統(tǒng)一設(shè)置填充，也可以為頂部、右側(cè)、底部和左側(cè)填充設(shè)置不同的值。

方法一：在輸入框中輸入數(shù)值，調(diào)整填充值。

方法二：為每一面單獨(dú)設(shè)置填充，打開(kāi)對(duì)齊和分布設(shè)置，并分別調(diào)整每個(gè)值。

對(duì)齊

選擇如何在“自動(dòng)布局”框架內(nèi)對(duì)齊子對(duì)象。我們不能單獨(dú)控制對(duì)象的對(duì)齊方式。但可以在父“自動(dòng)布局”框架上設(shè)置子對(duì)象的對(duì)齊方式。

使用交互式網(wǎng)格為框架中的子項(xiàng)從九個(gè)布局選項(xiàng)中進(jìn)行選擇。

如果分布設(shè)置為間隔，那么每個(gè)方向都有三個(gè)選項(xiàng)：

• 垂直自動(dòng)布局：左，中，右
• 水平自動(dòng)布局：頂，中，下

如果分布設(shè)置為打包，則每個(gè)方向都有相同的九個(gè)選項(xiàng)：

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

分布

為框架中的子對(duì)象設(shè)置對(duì)齊規(guī)則后，選擇這些對(duì)象在框架中的分布方式。在下圖對(duì)齊面板，單擊底部下拉箭頭進(jìn)行選擇：

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

調(diào)整大小

自動(dòng)布局最強(qiáng)大的功能之一是它能夠控制自動(dòng)布局框架中對(duì)象的尺寸。

設(shè)置父級(jí)自動(dòng)布局框架的調(diào)整大小，以適應(yīng)對(duì)其子級(jí)對(duì)象的更改。使用調(diào)整大小面板，可以將調(diào)整大小設(shè)置分別應(yīng)用于 X 和 Y 軸上的對(duì)象。

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

將“自動(dòng)布局”框架設(shè)置為“固定寬度或高度”時(shí)，框架的大小不響應(yīng)其中對(duì)象的變化，框架尺寸的值將保持不變。

• 擁抱內(nèi)容 （Hug contents）

將“自動(dòng)布局”框架設(shè)置為“擁抱”內(nèi)容，框架根據(jù)其內(nèi)容調(diào)整自身大小。

• 填充容器 （Fill container）

在“自動(dòng)布局”框架設(shè)置為“填充”，框架中的內(nèi)容將拉伸到其父框架的寬度和/或高度。

約束和調(diào)整大小

我們不能將約束應(yīng)用于自動(dòng)布局框架內(nèi)的子對(duì)象，但可以使用 resizing 屬性定義對(duì)象在調(diào)整框架或調(diào)整框架中對(duì)象大小時(shí)的響應(yīng)方式。

將自動(dòng)布局框架嵌套在常規(guī)框架中，仍然可以將其應(yīng)用于約束。

應(yīng)用技巧

1. 添加&刪除

“自動(dòng)布局”支持任何圖層或?qū)ο筇砑拥娇蚣堋?/p>

添加

1. 單擊對(duì)象并將其拖到“自動(dòng)布局”框架上。
2. 使用藍(lán)色指示器選擇放置對(duì)象的位置。

刪除

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

2. 嵌套&重復(fù)

我們可以在另一個(gè)“自動(dòng)布局”框架中嵌套一個(gè)“自動(dòng)布局”框架。當(dāng)嵌套自動(dòng)布局框架時(shí)，嵌套的框架將同時(shí)具有父級(jí)和子級(jí)屬性。

嵌套

在圖例中，有三個(gè)層級(jí)的自動(dòng)布局：

• 每個(gè)小方格都是水平的自動(dòng)布局。當(dāng)我們更改標(biāo)簽文本時(shí)，方格可以增大和縮小。
• 我們將同一個(gè)顏色的小方塊添加到另一個(gè)水平自動(dòng)布局中，當(dāng)對(duì)同一層級(jí)內(nèi)容進(jìn)行任何更改時(shí)，對(duì)象就可以做出響應(yīng)。
• 我們將三個(gè)橫向的自動(dòng)布局創(chuàng)建成垂直自動(dòng)布局。這樣一個(gè)完整的九宮格自動(dòng)布局就制作完成了。

重復(fù)

在圖例中，有三個(gè)層級(jí)的自動(dòng)布局：

您可以復(fù)制現(xiàn)有對(duì)象將其添加到“自動(dòng)布局”。Figma 會(huì)將副本添加到原始對(duì)象的右側(cè)（水平）或下方（垂直）。

1. 在“自動(dòng)布局”框架中選擇一個(gè)子對(duì)象。
2. 使用鍵盤(pán)快捷鍵（Mac：? Command-D、Windows：Ctrl+D）復(fù)制它。（如果圖層是嵌套的，可按住Command或Ctrl進(jìn)行深度框選子對(duì)象）

組件實(shí)戰(zhàn)

1. 表格

第一步：結(jié)構(gòu)分析

根據(jù)右側(cè)表格，我們可以將表格拆分成“頭部單元格”“正文單元格”“狀態(tài)”三個(gè)類(lèi)別，并生成原子級(jí)自動(dòng)布局組件，細(xì)分有利于后期組件分類(lèi)更直觀，同時(shí)每一個(gè)自動(dòng)布局組件可靈活組裝成更復(fù)雜的嵌套組件。

第二步：生成行

使用左側(cè)單元格組件，我們使用橫向的自動(dòng)布局，生成表頭和表內(nèi)容，同時(shí)設(shè)定好單元格自動(dòng)布局的“調(diào)整大小屬性”。

第三步：生成表格

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

2. 列表

第一步：結(jié)構(gòu)分析

根據(jù)列表樣式，可將其看成是由成圖片、文案內(nèi)容、行動(dòng)點(diǎn)構(gòu)成的橫向自動(dòng)布局。

第二步：生成行

框選左側(cè)原子組件，添加一個(gè)橫向的自動(dòng)布局，同時(shí)設(shè)定原子組件自動(dòng)布局的“調(diào)整大小屬性”。

第三步：生成列表

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

3. 導(dǎo)航

第一步：結(jié)構(gòu)分析

導(dǎo)航可以分為左中右，logo、導(dǎo)航文案、右側(cè)圖標(biāo)三部分。logo 和右側(cè)圖標(biāo)部分分別為左對(duì)齊和右對(duì)齊，中間文案部分隨寬度自適應(yīng)。

第二步：設(shè)置導(dǎo)航文案自動(dòng)布局

文案部分屬于典型的 tab 樣式，當(dāng)前選中狀態(tài)會(huì)出現(xiàn)下劃線，這里我們希望下劃線隨文案寬度自適應(yīng)，因此可以分以下幾個(gè)步驟：

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

第三步：設(shè)置導(dǎo)航自動(dòng)布局

選中 logo、導(dǎo)航文案、右側(cè)圖標(biāo)三部分，創(chuàng)建一個(gè)橫向自動(dòng)布局，其中 logo 為“固定的寬度或高度（Fixed）”導(dǎo)航文案為“填充容器（Fill container）”，右側(cè)圖標(biāo)為”擁抱內(nèi)容（Hug contents）”。

4. 卡片一

第一步：結(jié)構(gòu)分析

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

第二步：設(shè)置內(nèi)容部分自動(dòng)布局

內(nèi)容部分屬于左右結(jié)構(gòu)，拆的更細(xì)一點(diǎn)，內(nèi)容部分的文案部分還可以分成標(biāo)題和正文。首先我們將標(biāo)題和正文創(chuàng)建縱向的自動(dòng)布局，然后再將圖片和文案創(chuàng)建一個(gè)橫向的自動(dòng)布局，設(shè)定好自動(dòng)布局的屬性。

第三步：設(shè)置行動(dòng)點(diǎn)的自動(dòng)布局

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

第四步：創(chuàng)建卡片的自動(dòng)布局

選擇內(nèi)容和行動(dòng)點(diǎn)，創(chuàng)建一個(gè)縱向的自動(dòng)布局，兩者屬性都為“填充容器 （Fill container）”，卡片一般為組合形式出現(xiàn)，同樣的方法還可以創(chuàng)建一個(gè)卡片組合的自動(dòng)布局。

5. 卡片二

第一步：結(jié)構(gòu)分析

如右圖所示，卡片二的樣式常用于以圖片為主的展示頁(yè)面中，如”Behance”或”Dribbble”的首頁(yè)作品展示?？傮w結(jié)構(gòu)和卡片類(lèi)似，這里不同點(diǎn)在于圖片大小控制著卡片大小。在全局布局的頁(yè)面中，圖片一般隨窗口的變化而變化，同時(shí)圖片的比例保持不變。

第二步：圖片等比例縮放

當(dāng)卡片的寬度發(fā)生變化時(shí)，使用常規(guī)的垂直自動(dòng)布局無(wú)法保證封面圖長(zhǎng)寬比固定。在 Figma 論壇上，@ Solo Cube 給出了解決方案。

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

6. 步驟條

第一步：結(jié)構(gòu)分析

步驟條可以引導(dǎo)用戶按照流程完成任務(wù)，這里我們?cè)O(shè)計(jì)一個(gè)縱向的步驟條，如右圖，我們希望步驟條不限制寬度，高度隨內(nèi)容變化。整體來(lái)看步驟條其實(shí)是由一個(gè)個(gè)選項(xiàng)單元組合而成，不同的狀態(tài)只是樣式不同而已，所以只需制作一個(gè)步驟單元，步驟條就算完成一大步了。

第二步：創(chuàng)建步驟選項(xiàng)單元

一個(gè)步驟選項(xiàng)單元是由“數(shù)字 icon+連接線+文案部分組成，我們希望文案高度不做限制，連接線隨內(nèi)容高度變化而變化。

• icon+連接線部分

將 icon 和連接線創(chuàng)建一個(gè)縱向的自動(dòng)布局，icon 的“Resizing”為“固定高度（Fixed height）”，連接線的“Resizing”縱向?yàn)椤疤畛淙萜鳎‵ill container）”

• 文案部分

將標(biāo)題和正文創(chuàng)建一個(gè)縱向的自動(dòng)布局，兩者縱向的“Resizing”均為“擁抱內(nèi)容（Hug contents）”。我們希望每個(gè)步驟項(xiàng)之間有一定的間距，這時(shí)我們可以給文案部分設(shè)定一個(gè)下邊距，以保證信息可讀性。

• 整合

將“icon+連接線部分”和“文案部分”創(chuàng)建一個(gè)橫向的自動(dòng)布局，縱向的“Resizing”均為“擁抱內(nèi)容（Hug contents）”。

7. 樹(shù)組件

第一步：結(jié)構(gòu)分析

樹(shù)組件應(yīng)用廣泛，如文件夾、組織架構(gòu)、生物分類(lèi)、國(guó)家地區(qū)等等。使用樹(shù)組件，可以完整展現(xiàn)其中的層級(jí)關(guān)系，并具有展開(kāi)收起選擇等交互功能。組件中的虛線可以很直觀的看到當(dāng)前展開(kāi)項(xiàng)的關(guān)聯(lián)關(guān)系，從結(jié)構(gòu)上看，樹(shù)組件中的內(nèi)容項(xiàng)都是同一種樣式，只是 icon 和文案不同而已。同時(shí)虛線會(huì)根據(jù)內(nèi)容高度自適應(yīng)。

第二步：創(chuàng)建一級(jí)內(nèi)容

通過(guò)拆分結(jié)構(gòu)后，我們得知，一級(jí)內(nèi)容包含 icon+文案+虛線，二級(jí)內(nèi)容將一級(jí)內(nèi)容的結(jié)構(gòu)復(fù)制到一級(jí)內(nèi)容的文案部分即可，于是我們可以將一級(jí)內(nèi)容看作是由「icon+虛線的縱向自動(dòng)布局」和「文案+二級(jí)內(nèi)容的縱向自動(dòng)布局」創(chuàng)建而成的橫向自動(dòng)布局。

第三步：增刪多級(jí)內(nèi)容

創(chuàng)建完成一級(jí)內(nèi)容，我們只需復(fù)制一級(jí)內(nèi)容，嵌入到另一個(gè)一級(jí)內(nèi)容的“文案+二級(jí)內(nèi)容”的縱向自動(dòng)布局中即可，多層級(jí)同理依次類(lèi)推。

8. 圖表

第一步：結(jié)構(gòu)分析

圖表的樣式多種多樣，我們拿曲線圖表舉個(gè)例子，如右圖，曲線圖表可以拆解為標(biāo)題、圖例、圖表三部分。其中圖標(biāo)部分結(jié)構(gòu)相對(duì)比較復(fù)雜，其他使用常見(jiàn)的自動(dòng)布局嵌套即可解決。

第二步：創(chuàng)建圖表

圖表分為“指標(biāo)+參考線”、“日期”、“曲線”。這里如果使用常規(guī)的自動(dòng)布局，將不能滿足曲線置于參考線上。這里我們需要結(jié)合普通的框架來(lái)解決這個(gè)問(wèn)題。

• 創(chuàng)建“指標(biāo)+參考線”自動(dòng)布局，橫向和縱向的“Resizing”均為“填充容器（Fill container）”
• 創(chuàng)建“日期”自動(dòng)布局，“分布”屬性設(shè)置為“等分(Space between）。
• 選擇“指標(biāo)+參考線”+“日期”創(chuàng)建縱向自動(dòng)布局，同時(shí)創(chuàng)建一個(gè) Frame，將繪制好曲線和剛剛創(chuàng)建的自動(dòng)布局放置到此 Frame，調(diào)整約束為上下左右，曲線橫向約束為“左和右”，縱向?yàn)椤盨cale”

第三步：創(chuàng)建自動(dòng)布局圖表

選擇標(biāo)題、圖例、圖表三部分，創(chuàng)建一個(gè)縱向的自動(dòng)布局，三個(gè)部分的“Resizing”橫向?yàn)椤疤畛淙萜鳎‵ill container）”，標(biāo)題和圖例的“Resizing”縱向?yàn)椤肮潭ǜ叨龋‵ixed height）”，圖表的“Resizing”縱向?yàn)椤疤畛淙萜鳎‵ill container）”

頁(yè)面實(shí)戰(zhàn)

登錄

圖片列表

Dash Board

Basic Form

Step Form

Card List

Basic List1

Basic List2

個(gè)人中心

開(kāi)發(fā)協(xié)作

新的 Inspect 面板取代了 Code 面板，并提供了開(kāi)發(fā)人員可以抓取的更多相關(guān)屬性。

最后

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

歡迎關(guān)注作者微信公眾號(hào)：「AsiaInfo Design」