最近，F(xiàn)igma UI3 界面的全新改版引起了設(shè)計界的廣泛討論。一些設(shè)計師對這次大幅度的更新表示難以適應(yīng)，而另一些人則對新界面的簡化和沉浸式體驗表示贊賞。本文將為大家深入分析 Figma UI3 界面的具體變化，以及這些變化背后的原因和潛在影響。

最近我相信非常多的設(shè)計師都嘗試到了 Figma 的 UI3 界面，這一次變化幅度之大，以至于很多設(shè)計師在朋友圈里吐槽，感覺自己接受不了。

想到 Figma 目前的處境其實和很多 B 端產(chǎn)品非常類似：經(jīng)過 10 年的發(fā)展，增加了太多新的功能，但整個產(chǎn)品的交互邏輯并沒有發(fā)生太多的改變，導致你會發(fā)現(xiàn)現(xiàn)在的 Figma 編輯器過于臃腫。

那我作為一個深入使用 Figma 多年的用戶，來和大家聊聊 Figma 為什么會做這一次“顛覆性”的更新，以及我對于它更新變化過后的整體思考。

一、Figma UI3 的具體變化

首先我們先給不了解的同學科普一下，UI3 這次頁面主要改變了什么？

全新的 UI3 界面整體的感覺是簡化，減少了無用信息的出現(xiàn)，增加了編輯內(nèi)容的空間，使你更沉浸的工作。視覺風格上利用卡片、純白作為視覺核心，與之前講到的視覺風格趨勢契合，并對系統(tǒng)中的許多圖標進行了重新設(shè)計，使整體頁面看上去更為簡潔。

同時對于 導航面板、工具欄、屬性面板 也做了詳細的調(diào)整，我們具體來看：

1. 導航面板

在導航面板中，F(xiàn)igma 將內(nèi)部信息進行重構(gòu)，使其產(chǎn)品存儲邏輯更為清晰。

因為 Figma 本身分為 團隊/文件/頁面/圖層 四個維度，之前是將 文件目錄放置在頂部居中處，現(xiàn)在是將文件目錄位置與左側(cè)的導航面板合并，這樣整體的路徑會更為清晰。

同時與文件相關(guān)的操作，如發(fā)布、分支、歷史記錄等，都收折到文件路徑處，整體的關(guān)系會更為清晰。

2. 工具欄

在工具欄中，主打的就是提升核心內(nèi)容展示空間。

因為日常使用的工具本身不會太多，將其移動到底部過后，能夠有更多的空間展示你的內(nèi)容區(qū)域。同時在交互的動線當中，向下移動也會比較便利。

不過由于我自己是將 Mac 當中 Dock 欄進行隱藏，因此在移動過程當中容易誤操作，這一點還需要再適應(yīng)適應(yīng)。

3. 屬性面板

對于屬性面板，首先用戶可以拖拽自定義屬性面板的大小，其次它重構(gòu)了屬性內(nèi)容，比如創(chuàng)建 components ，現(xiàn)在是直接聚合到了統(tǒng)一的區(qū)域，可以自定義調(diào)整標簽的展示或隱藏，各個屬性配置重新調(diào)整，設(shè)定更為細致

這里不得不提一下針對小屏幕尺寸進行優(yōu)化，因為絕大多數(shù)的設(shè)計師日常工作是都會使用 MacBook，編輯空間本身不太夠用，現(xiàn)在可以將 導航面板、屬性面板 收起，會在適當?shù)那闆r下呼出，這對于筆記本設(shè)計師可以說是巨大提升。一定要試試！

二、迭代背后的原因

對于一個 B 端產(chǎn)品而言，它的任何變化都是有背后的原因，同樣 Figma 也是如此。

1. 新功能鋪路

你會發(fā)現(xiàn)，前幾年 Figma 的所有更新其實都是基于現(xiàn)有功能再進一步深化，直到最近發(fā)布的 AI 功能。由于這個功能過于的重要，因此回去考慮通過一些變化來引導用戶快速使用 AI。

就有點類似于之前 微信的大版本迭代，往往都會伴隨著一些游戲功能，目的也是能夠讓用戶快速上手、使用新的版本。

2. 交互統(tǒng)一

目前 Figma 整個產(chǎn)品包含 Figma、FigJam、Slide。如果是一個設(shè)計師，也會考慮盡可能將所有交互進行統(tǒng)一，這樣能夠讓用戶使用一致。

就像 Office 的全家桶，你會發(fā)現(xiàn)看到他們的頁面就知道是 Office 的產(chǎn)品一樣，F(xiàn)igma 其實也是這樣想的。

因此在交互上，沿用了 FigJam 整體的布局方式，向上迭代 Figma 編輯器，向下滿足 Slide 的產(chǎn)品需求，同時解決了之前 Figma 的疑難雜癥，能夠讓更多的新用戶使用 Figma 的完整產(chǎn)品，創(chuàng)造出更多的價值。

3. 商業(yè)考量

由于之前 Adobe 收購的失敗，F(xiàn)igma 作為一款設(shè)計軟件，也需要考慮“出圈”和“變現(xiàn)”。變現(xiàn)我們能理解，最近的 code mode 其實就是一個非常典型的變現(xiàn)方式。出圈則是想要將 Figma 的野心由之前的做設(shè)計工具，也在逐步轉(zhuǎn)變?yōu)樽鲛k公工具，為此就要考慮針對很多普通用戶進行的一系列優(yōu)化。而目前交互統(tǒng)一就是它這個優(yōu)化最好的呈現(xiàn)。

三、最后說說這次迭代改版

我認為 Figma 就是為我們提供了一塊白板，用戶能夠在里面自由發(fā)揮，操作各種信息。當我把各個面板隱藏，此時此刻我真的專注進了頁面當中，進行信息編輯。

當然，我相信這套布局后續(xù)一定會成為一個趨勢，很多產(chǎn)品都會相近跟進。

對于這次的迭代我自己認為還是十分滿意，你覺得呢？