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

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

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

一、Figma UI3 的具體變化

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

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

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

1. 導(dǎo)航面板：

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

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

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

2. 工具欄：

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

因?yàn)槿粘Ｊ褂玫墓ぞ弑旧聿粫?huì)太多，將其移動(dòng)到底部過后，能夠有更多的空間展示你的內(nèi)容區(qū)域。同時(shí)在交互的動(dòng)線當(dāng)中，向下移動(dòng)也會(huì)比較便利。

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

3. 屬性面板：

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

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

二、迭代背后的原因

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

1. 新功能鋪路：

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

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

2. 交互統(tǒng)一：

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

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

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

3. 商業(yè)考量：

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

最后說說這次迭代改版，我認(rèn)為 Figma 就是為我們提供了一塊白板，用戶能夠在里面自由發(fā)揮，操作各種信息。當(dāng)我把各個(gè)面板隱藏，此時(shí)此刻我真的專注進(jìn)了頁面當(dāng)中，進(jìn)行信息編輯。

當(dāng)然，我相信這套布局后續(xù)一定會(huì)成為一個(gè)趨勢(shì)，很多產(chǎn)品都會(huì)相近跟進(jìn)。對(duì)于這次的迭代我自己認(rèn)為還是十分滿意，你覺得呢？

作者： CE青年Youthce