設(shè)計(jì)軟件Figma自動(dòng)布局功能更新全面解讀

Figma的這次更新,重新設(shè)計(jì)了整個(gè)自動(dòng)布局菜單,功能變得更加強(qiáng)大,尤其是當(dāng)你可以將自動(dòng)布局與約束結(jié)合在一起時(shí),可以實(shí)現(xiàn)無(wú)窮無(wú)盡的可能性。

最初的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值


640_結(jié)果.jpg

小技巧:您也可以像在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能盡快加上。

每天更新,
全站高品質(zhì)素材免費(fèi)下載!