最初的Figma自動(dòng)布局（Auto layout）發(fā)布于2019年。雖然已經(jīng)是一個(gè)不錯(cuò)的功能，但老實(shí)說(shuō)，除了顯而易見的按鈕或主菜單外，我在日常工作中并未過(guò)多使用它。主要原因是缺少響應(yīng)式約束?，F(xiàn)在，隨著Figma 2020年11月的最新版本的發(fā)布，這一情況已經(jīng)發(fā)生天翻地覆的變化?，F(xiàn)在真的好用太多了！

到現(xiàn)在為止Sketch的自動(dòng)布局功能依然要借助插件完成（而插件會(huì)造成Sketch異?？D），真的不太好用，這點(diǎn)上，Sketch已經(jīng)掉隊(duì)了。

復(fù)習(xí)：什么是自動(dòng)布局？

簡(jiǎn)單的說(shuō)，自動(dòng)布局可以讓你可以創(chuàng)建動(dòng)態(tài)框架，這些框架根據(jù)其內(nèi)容做出反應(yīng)并調(diào)整大小。相信你已經(jīng)看過(guò)經(jīng)典的按鈕示例。創(chuàng)建框架，添加內(nèi)容并將框架轉(zhuǎn)換為自動(dòng)布局（通過(guò)右側(cè)的屬性面板或按Shift+ A）?，F(xiàn)在，自動(dòng)布局框架將適應(yīng)不斷變化的內(nèi)容。自動(dòng)布局可以垂直和水平嵌套，以創(chuàng)建精致的組件甚至整個(gè)頁(yè)面。

Figma中令人興奮的新自動(dòng)布局

Figma的這次更新，重新設(shè)計(jì)了整個(gè)自動(dòng)布局菜單，功能變得更加強(qiáng)大，尤其是當(dāng)你可以將自動(dòng)布局與約束（在自動(dòng)布局框架中稱為調(diào)整大?。┙Y(jié)合在一起時(shí)，可以實(shí)現(xiàn)無(wú)窮無(wú)盡的可能性。大家可以在此處下載Figma的官方自動(dòng)布局游樂(lè)場(chǎng)文件，里邊提供了非常多的演示：https://www.figma.com/community/file/784448220678228461

001.更個(gè)性化的Padding調(diào)節(jié)

現(xiàn)在，您可以全部或全部調(diào)整Padding值，也可以分別調(diào)整左，右，頂部和底部的Padding間距。真的很方便。

獨(dú)立調(diào)節(jié)Padding值

小技巧：您也可以像在CSS中一樣鍵入值，并用逗號(hào)分隔，例如10、25、15、20 （右上角，左下角填充）或10、20（上/下，左/右）。這樣方便了很多。

002. 對(duì)齊與均分

與先前版本一樣，對(duì)象可以水平或垂直對(duì)齊。但是，F(xiàn)igma推出了一個(gè)非常不錯(cuò)的附加功能，您現(xiàn)在還可以使用新的對(duì)齊工具在框架內(nèi)對(duì)齊自動(dòng)布局框架的子項(xiàng)。

對(duì)齊（Align）

在單獨(dú)設(shè)置Padding選項(xiàng)的下方，您可以找到分布（Distribution）選項(xiàng)。這很方便，而且通過(guò)這種形式，你可以設(shè)置很多復(fù)雜的參數(shù)?；旧?，分布使您可以選擇如何在自動(dòng)布局框架內(nèi)對(duì)齊子對(duì)象。

Packed-自定義元素的間距

Space Between-自動(dòng)均勻分布間距

003. 全新的縮放菜單

當(dāng)父框架或內(nèi)容更改大小時(shí)，調(diào)整內(nèi)部對(duì)象。通過(guò)下面3個(gè)選項(xiàng)，您可以將它們的高度和寬度相互混合和匹配！

Fill Container選項(xiàng)

新的縮放功能

擁抱內(nèi)容（Hug contents）→這是我遇到過(guò)的最可愛(ài)的UI功能名稱（尤其是在疫情流行期間）。其實(shí)這就是Figma的之前的舊自動(dòng)布局設(shè)置：它始終適合高度和/或定義的內(nèi)容或?qū)挾取?/p>

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

填充容器（Fill container）→你猜對(duì)了，它會(huì)拉伸以填充父容器的高度或?qū)挾?，這對(duì)于響應(yīng)行為非常重要。這僅適用于自動(dòng)布局框架內(nèi)的對(duì)象。

新的嵌套調(diào)整選項(xiàng)

自適應(yīng)和內(nèi)容自適應(yīng)。它的優(yōu)點(diǎn)是，您可以匹配所有內(nèi)容以創(chuàng)建強(qiáng)大的響應(yīng)元素。如前所述，自動(dòng)布局和約束并沒(méi)有真正發(fā)揮作用?，F(xiàn)在，您可以應(yīng)用響應(yīng)行為，并在更改內(nèi)容時(shí)保留所有間距設(shè)置。這是對(duì)個(gè)人工作流程的最大幫助。

響應(yīng)式與內(nèi)容自適應(yīng)

固定設(shè)置和自適應(yīng)設(shè)置

這個(gè)功能之前很難辦到，但現(xiàn)在只需單擊幾下，就可以實(shí)現(xiàn)。在自動(dòng)布局框架中，您可以將一些元素設(shè)置為固定，將一些元素設(shè)置為填充容器并與固定和自適應(yīng)形式相結(jié)合使用。

固定元素與文字自適應(yīng)相結(jié)合

保證所有子元素高度一致

如果您在一個(gè)容器中有更多內(nèi)容，但又希望所有容器都具有相同的高度，則只需將所有子容器設(shè)置為以高度填充容器，并將父自動(dòng)布局框架設(shè)置為高度擁抱（Hug hight）。非常方便！這在CSS中很難做到，但是在Figma中卻異常輕松！

保證所有子元素高度相同

這基本上就是它的工作方式：如果一個(gè)容器中有更多內(nèi)容，它將增加父容器的高度，而其他所有容器都會(huì)隨之增加。在之前，我們需要手動(dòng)調(diào)整容器大?。?/p>

你可以在Figma官方的自動(dòng)布局游樂(lè)場(chǎng)中體驗(yàn)這種案例，訪問(wèn)這個(gè)地址體驗(yàn)吧：https://www.figma.com/community/file/784448220678228461

不過(guò)目前仍有一個(gè)功能欠缺，那就是鎖定圖像的縱橫比，這簡(jiǎn)直是我們?cè)O(shè)計(jì)師最需要的一個(gè)功能了，希望Figma能盡快加上。