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

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

官方更新：

Figma官方社群第一個就是案例，小夥伴可以去看看。這邊列舉了幾個。

一、自動佈局

自動佈局幫助我們節省了很多時間，也讓我們的設計從靜態變為動態。時至今日自動佈局已經迭代了三個版本，這一次釋出的 AL 4。0 可以說十分無敵（除了還不能實現多行排布以外）。

1。 頁面重設計

4。0 對右側調節面板進行了重新設計，把橫向或縱向的適應方式——固定、適應內容還是充滿剩餘空間（Fixed， Hug content， Fill container）——移到了寬高那裡，把內邊距拆成橫向和縱向分別調節。對比3。0來說更加的直觀和便攜性。

2。 負間距

這次更新中元素間距現在可以為負數了，這樣我們就可以輕鬆做出頭像堆疊的效果啦。

3。 子元素堆疊順序

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

4。 絕對定位

自動佈局容器內的元素都會被自動佈局規則控制，無法隨意擺放。現在，你可以給內部的元素新增絕對定位，這樣它就不受自動佈局影響了。比如下圖，我們想做一個帶有載入進度的按鈕，就可以給載入進度背景設定為絕對定位，這樣它就能置於其他元素底層，和其他元素重疊了。你還可以給它設定約束，這樣就能控制它在容器尺寸改變時的自適應規則。

5。 基線對齊

現在除了頂部對齊、居中對齊和底部對齊，我們還可以選擇基線對齊，這經常用於多個文字圖層的對齊。

6。 畫布中快速調節

之前調節間距或邊距都需要在右側面板中調節，但是現在，我們可以直接在畫布中調節了，非常的便利高效。小夥伴的左圖速度直接起飛。

7。 描邊是否佔據空間

此外，你還可以決定自動佈局容器內元素的描邊是否佔據空間。在做設計時會遇到邊狂描邊也會佔用畫素單位，對於開發來說會跟設計有衝突，這就很好解決了問題。

二、暗色模式

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

1。 單描邊

另一個重大更新，是大家在社群喊了很久的單側描邊。以前要做分隔線，要麼用投影，要麼畫一條線，但是這兩種做法都有壞處，用投影交付給開發說不清楚，畫一根線就需要額外多一些圖層。現在，我們可以給元素新增單側描邊了，這些問題就解決了。

2。 元件屬性

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

現在，你不需要一一羅列了，只需要給一個元件設定不同的屬性就可以了，不過目前只支援是否顯示、文字內容和元件替換三種屬性控制方式，期待後面可以增加更多種類。

3。 彈性動效

在原型動效這裡，除了常見的緩動曲線，現在你還可以設定弾性曲線，這樣我們就能實現類似於彈簧一樣的效果了。

4。 超出現時省略號

在3。0時代，我們在輸入文字時候，超出的部分只能人為的去刪除多餘的和新增神略號，4。0時代在不需要刪除的狀態下就能夠自動新增省略號，這大大的提升了輸入效率。

5。 帶密碼分享

以前我們要麼郵箱邀請別人檢視檔案，要麼公開對所有人分享，現在你多了一個選擇就是帶密碼分享（此功能僅對專業版、組織版等付費版本開放）。

6。 收藏檔案

點選檔案卡片上的小星星，就可以把檔案固定在左側啦。可以把最近使用的檔案收藏一下，在眾多的專案中也能夠很快的找到你常用的檔案。

還有很多的小功能改動不是很大，主要展示大的改動，具體的教學影片後續可在其他平臺去學習，大家可以在figma 的社群去找到相關的檔案進行學習和練習。

本文由 @斜槓南青年 原創釋出於人人都是產品經理，未經許可，禁止轉載。

圖來自 Unsplash，基於CC0協議。