2019年figma發(fā)布自動(dòng)布局(auto layout)的第一版的時(shí)候，就已經(jīng)是個(gè)還不錯(cuò)的功能了。不過(guò)說(shuō)實(shí)話，除開個(gè)別菜單項(xiàng)和按鈕外，日常工作中我并沒(méi)有怎么用到這個(gè)功能。主要原因是我畫圖習(xí)慣用對(duì)單個(gè)元素的約束（responsive constraints）功能，那時(shí)候它與自動(dòng)布局的適配做得不是很完善，不過(guò)在2020年11月的更新中這個(gè)狀況好了很多。

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

開始講解之前先回顧一下，總體來(lái)講，自動(dòng)布局這個(gè)功能就是讓內(nèi)容根據(jù)frame的大小自動(dòng)調(diào)整。你肯定已經(jīng)看過(guò)這個(gè)例子了：新建一個(gè)畫板（frame），在其中創(chuàng)建一些內(nèi)容然后將整個(gè)畫板轉(zhuǎn)換成一個(gè)自動(dòng)布局畫板（要么用右鍵菜單或者快捷鍵 shift+a），創(chuàng)建成功之后，自動(dòng)布局對(duì)于水平方向和垂直方向均會(huì)產(chǎn)生效果，應(yīng)用得當(dāng)?shù)那疤嵯拢瑢?duì)于繪制組件和頁(yè)面都能帶來(lái)事半功倍的效果。

那么，更新了些什么呢？

整個(gè)自動(dòng)布局的菜單完全煥然一新，功能也變得非常的強(qiáng)大。更新之后的自動(dòng)布局與約束在一起，你可以在無(wú)數(shù)中組合的可能性中充分發(fā)揮你的創(chuàng)意（約束在自動(dòng)布局的Frame下也稱作Resizing） ，接下來(lái)我會(huì)為你仔細(xì)講解。如果你可以下載figma的官方自動(dòng)布局體驗(yàn)文件的話， 建議你試試看。

1. 自定義內(nèi)邊距（padding)

你現(xiàn)在可以對(duì)一個(gè)組件的4個(gè)方向設(shè)置統(tǒng)一的Padding值，或者單獨(dú)設(shè)置不一樣的值，對(duì)于習(xí)慣CSS樣式的設(shè)計(jì)師，這是個(gè)非常棒的設(shè)計(jì)。

獨(dú)立填充

*一個(gè)小技巧：在figma中， 你還可以像在CSS中寫入值一樣鍵入，并用逗號(hào)分隔，例如 10, 25, 15, 20（右上角，左下角填充）或10, 20（上/頂角，左/右）。?

2. 對(duì)齊與分布

新版本與先前版本一樣，組件可以被水平或垂直對(duì)齊。不過(guò)一個(gè)非常不錯(cuò)的附加功能是, 使用新的對(duì)齊工具將自動(dòng)對(duì)齊畫板中的子項(xiàng)對(duì)齊。這個(gè)功能還讓他們一直保持預(yù)設(shè)的padding。我認(rèn)為這樣的對(duì)齊方式會(huì)慢慢取代掉現(xiàn)在的工具（雖然目前的工具依然在右側(cè)屬性面板的頂部）。

分布工具隱藏在“padding”下方。這個(gè)功能理解起來(lái)有一些難度，因?yàn)樵谶@里你可以自定義混合搭配許多不同的元素和對(duì)齊條件?？傮w來(lái)說(shuō)，分布工具讓你可以自由選擇各個(gè)自動(dòng)布局畫板中子對(duì)象的具體對(duì)齊方式。

Packed?→ 自定義間距

Space between?→ 保持等距

3. 新resize菜單 -- 見(jiàn)證奇跡的地方

resize功能主要是設(shè)定父框架或內(nèi)容改變尺寸時(shí)，子對(duì)象的表現(xiàn)或行為。如果你已經(jīng)習(xí)慣使“約束”(constraints)的話，那么你對(duì)這個(gè)功能不會(huì)太陌生。但是現(xiàn)在自動(dòng)布局和約束（稱為在自動(dòng)布局畫板中resize）齊頭并進(jìn)，同時(shí)發(fā)力，這個(gè)功能才是真正的游戲規(guī)則改變者。?

這個(gè)功能總共提供三個(gè)選項(xiàng)，可以將高度和寬度的設(shè)置混搭

1.擁抱內(nèi)容→除了這是我見(jiàn)過(guò)的最可愛(ài)的UI功能名（尤其在疫情期間）之外，它的整體表現(xiàn)就是我們所熟知的自動(dòng)布局：它會(huì)根據(jù)已定義好的高度和寬度調(diào)整內(nèi)容寬高

2. 固定→?調(diào)整父級(jí)大小時(shí)，保持固定的寬度和/或高度。

3.填充容器→?你猜對(duì)了，它會(huì)以填充父容器的高度或?qū)挾葋?lái)拉伸，這是個(gè)非常重要的響應(yīng)式布局功能。不過(guò)只對(duì)于自動(dòng)布局畫板的對(duì)象生效。

4. 千呼萬(wàn)喚始出來(lái)?-- 我最喜歡的高效工具：響應(yīng)式布局 + 內(nèi)容自適應(yīng)

這個(gè)功能最大的優(yōu)點(diǎn)是你基本上可以混合搭配各種各樣的對(duì)象來(lái)創(chuàng)建成一個(gè)響應(yīng)元素。如前所述，老版本的的自動(dòng)布局和約束并沒(méi)有真正結(jié)合發(fā)力?，F(xiàn)在，你可以在更改內(nèi)容的同時(shí)保留所有自動(dòng)響應(yīng)間距設(shè)置。這個(gè)功能是對(duì)我工作流程中最有幫助的一個(gè)！

響應(yīng)式布局 + 內(nèi)容自適應(yīng)

固定預(yù)設(shè)元素和普通元素設(shè)置混合?

其實(shí)這個(gè)功能之前是可以實(shí)現(xiàn)的，但是麻煩一些?，F(xiàn)在只需點(diǎn)擊幾下，這樣的流程就很干凈了。在自動(dòng)布局畫板中，你可以在把一些元素設(shè)置為固定元素，再添加一些普通元素，并合并成同一個(gè)元素。

所有子元素都一樣高！

如果你希望一個(gè)容器中有多個(gè)子元素并且都保持同樣的高度，只需要將所有子元素的高度設(shè)置為“填充該容器”，然后將在父級(jí)自動(dòng)布局frame上選擇“擁抱高度（hug in height)“就完成了。有趣的是，這樣一來(lái)，實(shí)現(xiàn)起來(lái)，figma比在CSS中更輕松。

實(shí)現(xiàn)原理基本如下：如果一個(gè)容器中有更多內(nèi)容，單個(gè)元素會(huì)增加父容器的高度，而其他所有元素的高度都會(huì)隨之增加。就像你手動(dòng)調(diào)整容器大小一樣：

5.代碼模式（inspect mode)更新?

新功能在“inspect”面板中也有反應(yīng)，它將這些布局轉(zhuǎn)換為flexbox并顯示出了一些常規(guī)行為。

6. 不過(guò)，少了一件事：鎖定圖像的寬高比！?

我90％的項(xiàng)目都非常需要這個(gè)功能?，F(xiàn)在雖然有了這些非常出色的響應(yīng)式布局和工具，但是每次調(diào)整大小時(shí)，圖像比例都會(huì)崩潰，這真是太可惜了。但是官方說(shuō)鎖定功能正在制作中，因此我也只有耐心等待，并且依然保持手動(dòng)調(diào)整大小。

順便說(shuō)一句，如果你想繼續(xù)使用約束網(wǎng)格的話..?

我所有的文件都設(shè)置了響應(yīng)網(wǎng)格，所以我還是需要找個(gè)辦法來(lái)延續(xù)。目前看來(lái)，只需將畫板保持原樣（不要在放置網(wǎng)格的父畫板上添加自動(dòng)布局?。?。然后在這個(gè)父畫板內(nèi)，再向所有元素添加自動(dòng)布局。這樣一來(lái)，你就能將“左右”設(shè)置保持在約束中，也就實(shí)現(xiàn)了把自動(dòng)布局對(duì)象鎖定到的網(wǎng)格上的列，并且它還是保持著對(duì)布局的響應(yīng)能力。?

原文鏈接：https://uxplanet.org/figmas-brand-new-auto-layout-feature-nov-2020-a-responsive-design-heaven-d1ebc9b597f5

【文末推薦：設(shè)計(jì)師必備Figma插件】

摹客Figma插件，支持figma設(shè)計(jì)稿一鍵上傳，輕松分享演示，完美呈現(xiàn)交互，智能標(biāo)注，自動(dòng)切圖，支持百人團(tuán)隊(duì)免費(fèi)協(xié)作，在線設(shè)計(jì)、設(shè)計(jì)交付、規(guī)范管理一站解決。

摹客全面支持Figma設(shè)計(jì)稿，搶鮮體驗(yàn)送紅包：

https://www.mockplus.cn/specs/figma/promote/?hmsr=w12