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

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

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

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

Figma中令人興奮的新自動布局

Figma的這次更新，重新設(shè)計(jì)了整個(gè)自動布局菜單，功能變得更加強(qiáng)大，尤其是當(dāng)你可以將自動布局與約束（在自動布局框架中稱為調(diào)整大?。┙Y(jié)合在一起時(shí)，可以實(shí)現(xiàn)無窮無盡的可能性。大家可以在此處下載Figma的官方自動布局游樂場文件，里邊提供了非常多的演示：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中一樣鍵入值，并用逗號分隔，例如10、25、15、20 （右上角，左下角填充）或10、20（上/下，左/右）。這樣方便了很多。

002. 對齊與均分

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

對齊（Align）

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

Packed-自定義元素的間距

Space Between-自動均勻分布間距

003. 全新的縮放菜單

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

Fill Container選項(xiàng)

新的縮放功能

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

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

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

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

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

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

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

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

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

保證所有子元素高度一致

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

保證所有子元素高度相同

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

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

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