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

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

復習：什么是自動布局？

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

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

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

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

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

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

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

002. 對齊與均分

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

對齊（Align）

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

Packed-自定義元素的間距

Space Between-自動均勻分布間距

003. 全新的縮放菜單

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

Fill Container選項

新的縮放功能

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

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

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

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

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

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

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

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

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

保證所有子元素高度一致

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

保證所有子元素高度相同

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

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

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