編輯導(dǎo)語(yǔ)：Figme對(duì)于產(chǎn)品設(shè)計(jì)來(lái)說(shuō)是個(gè)必不可少的工具，如今Figme4.0版本也迎來(lái)了更新，本篇文章作者介紹了Figme4.0更新的幾個(gè)設(shè)計(jì)案例，感興趣的一起來(lái)看一下吧。

一年一度的 Figma 用戶(hù)大會(huì)又來(lái)了，毫無(wú)意外，每次大會(huì)的開(kāi)場(chǎng)都是可愛(ài)的 Dylan Field 給我們帶來(lái)一些最近的重磅更新。這一次也一樣，廢話(huà)不多說(shuō)，咱們一起看看吧！

官方更新：Figma官方社區(qū)第一個(gè)就是案例，小伙伴可以去看看。這邊列舉了幾個(gè)。

一、自動(dòng)布局

自動(dòng)布局幫助我們節(jié)省了很多時(shí)間，也讓我們的設(shè)計(jì)從靜態(tài)變?yōu)閯?dòng)態(tài)。時(shí)至今日自動(dòng)布局已經(jīng)迭代了三個(gè)版本，這一次發(fā)布的 AL 4.0 可以說(shuō)十分無(wú)敵（除了還不能實(shí)現(xiàn)多行排布以外）。

1. 頁(yè)面重設(shè)計(jì)

4.0 對(duì)右側(cè)調(diào)節(jié)面板進(jìn)行了重新設(shè)計(jì)，把橫向或縱向的適應(yīng)方式——固定、適應(yīng)內(nèi)容還是充滿(mǎn)剩余空間（Fixed, Hug content, Fill container）——移到了寬高那里，把內(nèi)邊距拆成橫向和縱向分別調(diào)節(jié)。對(duì)比3.0來(lái)說(shuō)更加的直觀和便攜性。

2. 負(fù)間距

這次更新中元素間距現(xiàn)在可以為負(fù)數(shù)了，這樣我們就可以輕松做出頭像堆疊的效果啦。

3. 子元素堆疊順序

之前一直被用戶(hù)吐槽的一個(gè)事情就是，垂直方向自動(dòng)布局內(nèi)的元素順序和左側(cè)圖層順序相反，直覺(jué)上一直難以適應(yīng)?，F(xiàn)在，你可以自己設(shè)置元素排布順序啦，配合負(fù)間距，你可以決定第一個(gè)頭像在上還是最后一個(gè)頭像在上（注意下圖誰(shuí)蓋住誰(shuí)）。

4. 絕對(duì)定位

自動(dòng)布局容器內(nèi)的元素都會(huì)被自動(dòng)布局規(guī)則控制，無(wú)法隨意擺放?，F(xiàn)在，你可以給內(nèi)部的元素添加絕對(duì)定位，這樣它就不受自動(dòng)布局影響了。比如下圖，我們想做一個(gè)帶有加載進(jìn)度的按鈕，就可以給加載進(jìn)度背景設(shè)置為絕對(duì)定位，這樣它就能置于其他元素底層，和其他元素重疊了。你還可以給它設(shè)置約束，這樣就能控制它在容器尺寸改變時(shí)的自適應(yīng)規(guī)則。

5. 基線(xiàn)對(duì)齊

現(xiàn)在除了頂部對(duì)齊、居中對(duì)齊和底部對(duì)齊，我們還可以選擇基線(xiàn)對(duì)齊，這經(jīng)常用于多個(gè)文字圖層的對(duì)齊。

6. 畫(huà)布中快速調(diào)節(jié)

之前調(diào)節(jié)間距或邊距都需要在右側(cè)面板中調(diào)節(jié)，但是現(xiàn)在，我們可以直接在畫(huà)布中調(diào)節(jié)了，非常的便利高效。小伙伴的左圖速度直接起飛。

7. 描邊是否占據(jù)空間

此外，你還可以決定自動(dòng)布局容器內(nèi)元素的描邊是否占據(jù)空間。在做設(shè)計(jì)時(shí)會(huì)遇到邊狂描邊也會(huì)占用像素單位，對(duì)于開(kāi)發(fā)來(lái)說(shuō)會(huì)跟設(shè)計(jì)有沖突，這就很好解決了問(wèn)題。

二、暗色模式

除了自動(dòng)布局這個(gè)重磅更新，F(xiàn)igma 還為我們帶來(lái)了暗色模式。之前的設(shè)計(jì)工具幾乎都是暗色模式，看起來(lái)很專(zhuān)業(yè)，亮色模式讓我們?cè)诿鎸?duì)甲方時(shí)心虛不敢喊價(jià)?，F(xiàn)在，你可以把 Figma 調(diào)成暗色模式，大膽地向甲方報(bào)一個(gè)較高的價(jià)格（小聲說(shuō)，目前這個(gè)暗色模式還有很大的進(jìn)步空間?。?。

1. 單描邊

另一個(gè)重大更新，是大家在社區(qū)喊了很久的單側(cè)描邊。以前要做分隔線(xiàn)，要么用投影，要么畫(huà)一條線(xiàn)，但是這兩種做法都有壞處，用投影交付給開(kāi)發(fā)說(shuō)不清楚，畫(huà)一根線(xiàn)就需要額外多一些圖層?，F(xiàn)在，我們可以給元素添加單側(cè)描邊了，這些問(wèn)題就解決了。

2. 組件屬性

接下來(lái)這個(gè)大更新，可以解決變體數(shù)量龐大的問(wèn)題。在以前我們需要羅列出一個(gè)組件所有屬性組合，這可能會(huì)導(dǎo)致一個(gè)變體組件內(nèi)包含成百上千個(gè)組件。現(xiàn)在，我們只需要給一個(gè)主組件添加屬性，就可以在它的實(shí)例組件中組合這些屬性了。

現(xiàn)在，你不需要一一羅列了，只需要給一個(gè)組件設(shè)置不同的屬性就可以了，不過(guò)目前只支持是否顯示、文字內(nèi)容和組件替換三種屬性控制方式，期待后面可以增加更多種類(lèi)。

3. 彈性動(dòng)效

在原型動(dòng)效這里，除了常見(jiàn)的緩動(dòng)曲線(xiàn)，現(xiàn)在你還可以設(shè)置弾性曲線(xiàn)，這樣我們就能實(shí)現(xiàn)類(lèi)似于彈簧一樣的效果了。

4. 超出現(xiàn)時(shí)省略號(hào)

在3.0時(shí)代，我們?cè)谳斎胛谋緯r(shí)候，超出的部分只能人為的去刪除多余的和添加神略號(hào)，4.0時(shí)代在不需要?jiǎng)h除的狀態(tài)下就能夠自動(dòng)添加省略號(hào)，這大大的提升了輸入效率。

5. 帶密碼分享

以前我們要么郵箱邀請(qǐng)別人查看文件，要么公開(kāi)對(duì)所有人分享，現(xiàn)在你多了一個(gè)選擇就是帶密碼分享（此功能僅對(duì)專(zhuān)業(yè)版、組織版等付費(fèi)版本開(kāi)放）。

6. 收藏文件

點(diǎn)擊文件卡片上的小星星，就可以把文件固定在左側(cè)啦?？梢园炎罱褂玫奈募詹匾幌?，在眾多的項(xiàng)目中也能夠很快的找到你常用的文件。

還有很多的小功能改動(dòng)不是很大，主要展示大的改動(dòng)，具體的教學(xué)視頻后續(xù)可在其他平臺(tái)去學(xué)習(xí)，大家可以在figma 的社區(qū)去找到相關(guān)的文件進(jìn)行學(xué)習(xí)和練習(xí)。

本文由 @斜杠南青年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

圖來(lái)自 Unsplash，基于CC0協(xié)議。