想要讓你的設(shè)計(jì)工作事半功倍嗎？本文將帶你深入了解Figma中的自動(dòng)布局功能，這是提升設(shè)計(jì)效率的利器。

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

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

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

表格的寬高可以跟隨畫框的變動(dòng)而自動(dòng)適配。

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

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

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

我們先來(lái)看官方的定義。

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

不過(guò)要徹底弄懂這個(gè)概念，還需要我們一步一步來(lái)。

二、理解框架的概念

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

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

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

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

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

我們?cè)賮?lái)說(shuō)一下框架（Frame）和組（Group）的區(qū)別，因?yàn)檫@將會(huì)關(guān)乎我們?cè)贔igma的設(shè)計(jì)邏輯和工作習(xí)慣。

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

框架的功能屬性更豐富

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

框架的設(shè)計(jì)效率更高效

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

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

自動(dòng)布局的本質(zhì)

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

三、自動(dòng)布局的創(chuàng)建方式

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

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

四、自動(dòng)布局的功能屬性

在框架添加了自動(dòng)布局屬性以后，我們就可以對(duì)框架添加功能屬性來(lái)排版布局。

大小

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

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

方向

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

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

間距

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

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

對(duì)齊

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

邊距

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

• 水平邊距：元素距離框架的水平邊距；
• 垂直邊距：元素距離框架的垂直邊距；
• 獨(dú)立邊距：點(diǎn)擊獨(dú)立邊距后，可單獨(dú)設(shè)置上下左右四個(gè)邊距大小。

其他

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

忽略自動(dòng)布局

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

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

五、自動(dòng)布局的使用原則及技巧

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

六、總結(jié)

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

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