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

一年一度的 Figma 用戶大會又來了，毫無意外，每次大會的開場都是可愛的 Dylan Field 給我們帶來一些最近的重磅更新。這一次也一樣，廢話不多說，咱們一起看看吧！

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

一、自動布局

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

1. 頁面重設(shè)計

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

2. 負間距

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

3. 子元素堆疊順序

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

4. 絕對定位

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

5. 基線對齊

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

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

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

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

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

二、暗色模式

除了自動布局這個重磅更新，F(xiàn)igma 還為我們帶來了暗色模式。之前的設(shè)計工具幾乎都是暗色模式，看起來很專業(yè)，亮色模式讓我們在面對甲方時心虛不敢喊價?，F(xiàn)在，你可以把 Figma 調(diào)成暗色模式，大膽地向甲方報一個較高的價格（小聲說，目前這個暗色模式還有很大的進步空間啊）。

1. 單描邊

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

2. 組件屬性

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

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

3. 彈性動效

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

4. 超出現(xiàn)時省略號

在3.0時代，我們在輸入文本時候，超出的部分只能人為的去刪除多余的和添加神略號，4.0時代在不需要刪除的狀態(tài)下就能夠自動添加省略號，這大大的提升了輸入效率。

5. 帶密碼分享

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

6. 收藏文件

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

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

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

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