哈啰，大家好，我是廖爾摩斯丨設(shè)計大偵探！今天向大家繼續(xù)分享我最新整理的 Figma 知識卡片-技能卡-自動布局，希望對你有所幫助！

第一期：

在進(jìn)入此次的分享之前，我想請大家看一下以下案例，你可以思考一下這些高效的設(shè)計操作是如何實現(xiàn)？

① 按鈕的寬度可以跟隨字符數(shù)自動調(diào)整。

② 卡片的其他元素可以跟隨用戶評論的字符數(shù)自動調(diào)整。

③ 表格的寬高可以跟隨畫框的變動而自動適配。

④頁面的元素可以根據(jù)頁面的寬度自動響應(yīng)適配。

如果這些技巧你都掌握了，好的，你可以忽略這篇文章，但如果你還不會這些技巧，那么這篇文章分享的內(nèi)容就特別適合你，接下來，就讓我慢慢講解實現(xiàn)這些操作的技巧——自動布局（Auto Layout）。

一、什么是自動布局？

我們先來看官方的定義。

自動布局（Auto Layout）是您可以添加到框架和組件的一項屬性。它允許您創(chuàng)建可放大或縮小以填充的設(shè)計，并隨著內(nèi)容的變化重新布局。當(dāng)您需要添加新圖層、容納更長的文本字符串或在設(shè)計演變過程中保持對齊時，此功能非常有用。

不過要徹底弄懂這個概念，還需要我們一步一步來。

1. 理解框架的概念

在講自動布局之前，我們需要了解一下 Figma 中框架（Frame）的概念。

我們先看一下框架的定義。

1. 所謂「框架」，也即是我們過去在 Photoshop、Sketch 等設(shè)計軟件中使用的畫板 Artbord。我們在 Figma 中設(shè)計的元素，無論是文本、圖形、形狀都需要有一個容器來承載，這個容器即是「框架」。
2. 「框架」是 Figma 中的一個多功能容器，不僅可以用來模擬畫板，還可以作為布局的基礎(chǔ)單元，包含了更多的設(shè)計功能和靈活性。

Figma 為什么要引進(jìn)「框架」的概念，而不是像 Sketch 這些軟件使用畫板呢？答案是框架可以為設(shè)計師提供更高的靈活布局、協(xié)作效率以及響應(yīng)支持，不過這里有一個重要的前提，那就是這個框架添加了自動布局的屬性。

二、框架和組又有什么區(qū)別？

我們再來說一下框架（Frame）和組（Group）的區(qū)別，因為這將會關(guān)乎我們在 Figma 的設(shè)計邏輯和工作習(xí)慣。

和 Sketch 中的畫板不同，「框架」可以無限嵌套，也即是在一個主框架的里面，可以無限創(chuàng)建框架，這些框架可以用來組織和管理各種不同的設(shè)計元素。在過去，這個工作主要是由「組」來完成，但看完這篇文章以后，我希望你徹底改掉這個操作習(xí)慣。

1. 框架的功能屬性更豐富

「框架」的屬性非常豐富，比如支持填充、描邊、圓角半徑、裁剪等，但「組」并不支持，它只能作為簡單的容器來組織和管理元素。比如一個按鈕，如果用「組」來設(shè)計，需要形狀+文本兩個元素，但如果用框架來設(shè)計，則只需要文本一個元素，因為框架支持填充，還可以設(shè)置圓角半徑、描邊等。

2. 框架的設(shè)計效率更高效

「框架」在加入自動布局屬性以后，就可以實現(xiàn)適配多端的響應(yīng)式設(shè)計，框架的內(nèi)容元素可以根據(jù)設(shè)計師約束的規(guī)則進(jìn)行靈活布局，這樣的設(shè)計效率是「組」完全不能相比的，這也是 Figma 最大的魅力之一。

簡而言之，「組」只適用于對簡單的圖層整理和管理，它并不支持復(fù)雜的布局功能，屬于舊時代的軟件功能，和「框架」根本無法相比。

三、自動布局的本質(zhì)

講解了以上概念，我們就能理解自動布局的本質(zhì)了——自動布局就是可以靈活高效布局的框架，它屬于一種功能屬性，就像變體之于組件，添加了變體屬性以后，組件才能實現(xiàn)高效的操作。

四、自動布局的創(chuàng)建方式

自動布局的創(chuàng)建方式可以通過以下方式創(chuàng)建：

1. 快捷鍵：選中元素，Shift+A 可直接創(chuàng)建；
2. 鼠標(biāo)右鍵：選中框架，點擊右鍵，在屬性面板中可直接轉(zhuǎn)換成自動布局；
3. 屬性面板：選中框架，在框架屬性-布局，點擊右側(cè)圖標(biāo)，即可創(chuàng)建自動布局。

五、自動布局的功能屬性

在框架添加了自動布局屬性以后，我們就可以對框架添加功能屬性來排版布局。

1. 大小

「大小」是指框架的寬高尺寸，可直接輸入數(shù)值，點擊下拉還有多個選項。

1. 固定尺寸：尺寸的具體數(shù)值，可手動設(shè)置；
2. 適應(yīng)內(nèi)容：框架的尺寸會根據(jù)元素的增加或減少而自動適應(yīng)；
3. 填充容器：觸發(fā)這個功能，需要一定的前置條件，那就是子框架處于父框架之中，而且兩者必須添加了自動布局屬性，當(dāng)兩個框架的尺寸發(fā)生變化時，子框架就能根據(jù)約束的條件進(jìn)行填充。
4. 最小尺寸：設(shè)置最小尺寸以后，框架不會跟隨外界條件而改變；
5. 最大尺寸：設(shè)置最大尺寸以后，框架不會跟隨外界條件而改變。

2. 方向

「方向」是指自動布局的布局形式，分為垂直布局、水平邊距和換行布局。

1. 垂直布局：框架內(nèi)所有元素進(jìn)行垂直布局；
2. 水平布局：框架內(nèi)所有元素進(jìn)行水平布局；
3. 換行布局：框架內(nèi)所有元素將會根據(jù)約束設(shè)置排列成多行和多列；

3. 間距

「間距」是指框架內(nèi)各元素之間的距離。

1. 固定數(shù)值：可手動調(diào)整框架內(nèi)元素的間距；
2. 自動屬性：這個屬性是實現(xiàn)響應(yīng)適配的關(guān)鍵，設(shè)置為自動后，框架內(nèi)所有元素都不會被約束限制，將會跟隨框架的變化而自動調(diào)整。

4. 對齊

「對齊」是指元素在框架內(nèi)的對齊形式，分為上左對齊、上中對齊、上右對齊、左對齊、居中對齊、右對齊、下左對齊、下中對齊和下右對齊。

5. 邊距

「邊距」是指框架內(nèi)元素距離框架的距離，分為水平邊距和垂直邊距。

1. 水平邊距：元素距離框架的水平邊距；
2. 垂直邊距：元素距離框架的垂直邊距；
3. 獨立邊距：點擊獨立邊距后，可單獨設(shè)置上下左右四個邊距大小。

6. 其他

1. 描邊：可設(shè)置描邊樣式是否包含在布局中；
2. 項目堆疊：框架內(nèi)元素的堆疊排序，可設(shè)置前面在上和后面在上；
3. 文本基線對齊：基線對齊是一種對齊方式，專門用于處理包含文本的布局容器，它確保容器內(nèi)的文本元素在垂直方向上按照基線對齊，而不是按照邊框或其他對齊方式，多數(shù)情況我們忽略此屬性，不用設(shè)置。

如何在一個自動布局里面增加個性化的設(shè)計，比如一個圖標(biāo)或者一個元素需要在右上角，它不需要受限于自動布局垂直或水平的布局方式，這個答案就是要給這個元素增加「忽略自動布局」的功能。

如何添加：選中元素后，在右側(cè)屬性面板-位置右側(cè)，點擊「忽略自動布局」，該元素將不會受自動布局的約束限制。

七、自動布局的使用原則及技巧

1. 所有的元素都必須在框架里面，無論是文本、圖片還是形狀；所有的框架都應(yīng)該增加自動布局屬性，元素才能變得靈活高效。
2. 忘記「組」，除非有特殊的效果，不要用組，因為它會影響設(shè)計的靈活性。
3. 使用布局思維去設(shè)計，而非單個元素，這樣才能發(fā)揮 Figma 以及自動布局的高效。
4. 盡量用準(zhǔn)確的數(shù)值去約束框架，比如邊距、間距和最大寬度等，這樣你的設(shè)計才會真正實現(xiàn)規(guī)范和高效。

總結(jié)

Figma 的出現(xiàn)，不僅僅開創(chuàng)了多人實時協(xié)作、文件云端管理等設(shè)計模式，更是對設(shè)計生產(chǎn)效率帶來了突破性的飛躍，而自動布局正是保證高效設(shè)計生產(chǎn)效率的基準(zhǔn)和保證，這也是我從最初的 Photoshop 轉(zhuǎn)到 Sketch，再從 Sketch 轉(zhuǎn)到 Figma 最大感受。

自動布局是 Figma 的靈魂，也是發(fā)揮 Figma 無與倫比的生產(chǎn)效率的基礎(chǔ)，希望大家一定要掌握這個功能，才能讓你的設(shè)計生產(chǎn)效率實現(xiàn)飛躍！

歡迎關(guān)注作者微信公眾號：「設(shè)計大偵探」