導(dǎo)語

假期本打算「兩耳不聞窗外事，一心只讀圣賢書」，可惜 Figma 不給我這個機(jī)會，有更新就得跟進(jìn)學(xué)習(xí)，這是設(shè)計師之宿命。

Config 2023 不知道大家看了沒有？都說是設(shè)計師過年，我刷了刷推特，發(fā)現(xiàn)關(guān)注的設(shè)計師幾乎都去了現(xiàn)場，包括 Joey 大神，不少人在忙著跟他「偶遇」并拍照發(fā)推。

大會目前已結(jié)束，我們先來看看這次 Figma 具體更新了什么，真有那么炸裂？

簡略版回顧：

Figma 官方更新視頻

一、Variables 變量

一句話總結(jié)：劃掉 Design Tokens，從此 Figma 只有 Variables。

Config 2023 大會截圖

Config 2023 大會截圖

Figma 意在應(yīng)用變量來支持創(chuàng)建適應(yīng)性、拓展性強的設(shè)計（適合大型項目或設(shè)計系統(tǒng)搭建）。

1. 顏色、數(shù)值、文本和布爾變量：支持顏色文本等具體屬性變量，變量組織形式有 Collection（集合）和 Group（分組）兩種。
2. 模式變量：設(shè)計好亮暗模式 UI，定義好變量值，就可以一鍵切換。
3. 插件和 REST API：變量的創(chuàng)建和管理，包括導(dǎo)入和導(dǎo)出到 Token。普通插件 API 完全開放，但 REST API（包括使用變量進(jìn)行讀取和寫入）僅供企業(yè)版。
4. 個人感受：以上大多是插件早已實現(xiàn)的功能，只不過原生一直沒消息，這次可好，不鳴則已，一鳴就把桌子整個給掀了！

二、Advanced prototyping 高級原型設(shè)計

一句話總結(jié)：高級的都是另外的價錢（免費版本不能體驗）。

Config 2023 大會截圖

官方高級原型設(shè)計練習(xí)文件

這次的高階原型功能主打一個「活好幀少」。

1. 新的原型操作：通過設(shè)置和修改變量來達(dá)到減少關(guān)鍵幀和交互復(fù)雜度，以獲得更好的動態(tài)原型。
2. 解鎖數(shù)學(xué)表達(dá)式：使用加、減、乘、除等運算符生成動態(tài)字符串或數(shù)值。
3. 多重操作和條件邏輯：在觸發(fā)交互前使用 if/else 邏輯判定是否滿足條件，單個觸發(fā)點可以觸達(dá)多種操作，數(shù)量疊加無上限。

個人感受：簡單的輸出背后是復(fù)雜的付出，原型更新是單看描述也覺得復(fù)雜的程度。操作指南更復(fù)雜，尤其是表達(dá)式部分，可以拿 playground 練練手，想要徹底掌握需要投入一定時間來學(xué)習(xí)。

三、Dev Mode 開發(fā)模式

一句話總結(jié)：Figma 貼心支持開發(fā)者模式，設(shè)計師不用上傳標(biāo)注到第三方了！

Config 2023 大會截圖

軟件中預(yù)覽

具體如下：

1. 檢查：hover 或單擊 Figma 設(shè)計文件中的 UI 元素，以查看 UI 標(biāo)注并獲取切圖等資源。
2. 查看代碼：可以選擇查看 CSS、SwiftUI 或 Compose 代碼，可使用插件自定義代碼外觀。
3. 插件：提供豐富代碼輔助插件，集成了 Jira、GitHub、Storybook 等平臺。
4. 設(shè)計系統(tǒng)：可以把開發(fā)資源鏈接添加到設(shè)計組件上，以保持來源同步。
5. 設(shè)計狀態(tài)：通過設(shè)計稿上的標(biāo)簽以及組件描述了解設(shè)計稿的完成狀態(tài)，了解哪些設(shè)計頁面可以開發(fā)，哪些還處于 WIP。
6. 歷史版本查看：可以查看設(shè)計稿歷史記錄，跟蹤設(shè)計更新。

Dev Mode 目前處于公測階段，本年度免費使用，之后屬于專業(yè)版付費功能（團(tuán)隊版按人頭每人每月 25 美刀，企業(yè)版每人每月 35 美刀）。

個人感受：標(biāo)注常規(guī)查看是都 OK 的。至于代碼部分，不是開發(fā)者，不能評估效果如何？不過看有些開發(fā)者說代碼好像也不算很完美。但總歸是有了這一步，以后迭代唄。

另外還發(fā)布了最新版 VS Code 插件：

開發(fā)者可以使用 VS Code 插件來檢查 Figma 設(shè)計文件，選中一個控件元素可直接生成代碼?？梢耘c設(shè)計人員緊密協(xié)作并接收通知，而無需離開代碼編輯器。

VS Code 中 Figma 插件已上線

VS Code 中查看設(shè)計稿

四、其他更新

一些零碎更新，F(xiàn)igma 稱之為「可用性改進(jìn)」。

1. 更新自動布局：自動布局可換行，可設(shè)置最大最小寬度；更新了文本截斷功能，允許根據(jù)最大行數(shù)截斷文本。
2. 更新字體選擇器：增設(shè)字體預(yù)覽，改進(jìn)字體搜索功能。
3. 更新文件概覽：把賬戶、搜索、通知零碎入口都統(tǒng)一集結(jié)在了左側(cè)欄，增設(shè)了共享項目和文件 tab。

個人感受：自動布局的改動讓我想到了 Framer，推特上還真有人問「為什么 Figma 不收購 Framer？」，大部分網(wǎng)友回復(fù)都是：別了吧！

除了常規(guī)更新，大會上還宣布 Figma 收購了 Diagram ——一家專注設(shè)計和 AI 的公司。AI 終于要上車了，F(xiàn)igma 給出的應(yīng)用場景是：幫助總結(jié)想法、提供設(shè)計建議、自動創(chuàng)建變體、生成多倍稿以及幫助生成代碼等。

Diagram 官網(wǎng)

一點小感想

炸裂嗎？挺炸裂。但也不是沒有可吐槽之處。

字體預(yù)覽是早就該有的，Dylan Field（Figma 的 CEO）解釋說「有些事情花費的時間比預(yù)期要長」。所以，一個字體預(yù)覽功能需要開發(fā)好幾年？

Config 2023 大會截圖

看完設(shè)計大會，直觀感受就是：Figma 越來越像個專屬企業(yè)級解決方案了！

有人抱怨 Figma 把 UI 設(shè)計搞得越來越復(fù)雜！但對企業(yè)級專業(yè)團(tuán)隊來說，這次的功能更新就像是量身打造，這錢花得那叫一個值！

這次的更新讓很多設(shè)計師為之興奮，但冷靜想想，F(xiàn)igma 會不會正不自知地和 Adobe 全系產(chǎn)品一樣，走在堆砌功能冗雜不堪的老路上了呢？這也是當(dāng)時收購的新聞出來，大家之所以悲觀看待的原因之一。

另外，雖然 Figma 說推出 Dev Mode 是因為在他們的付費版本中，開發(fā)者的訪問占比要高于設(shè)計師。但這也是一個很明顯的信號——設(shè)計師與開發(fā)者的身份界限將越來越模糊。

是不是設(shè)計師怎么也得學(xué)學(xué)前端，哪怕只是 CSS 入門？而工程師怎么也得學(xué)點 UX/UI，最起碼要審美過過線？還是說 Figma 這類功能是利好獨立開發(fā)者的，畢竟國外獨立開發(fā)者眾多。

目前來看，F(xiàn)igma 正朝著設(shè)計軟件的上限狂卷功能中，UI 設(shè)計的門檻在不斷提高，思維也需要不斷升級，職業(yè)設(shè)計師的關(guān)注點不能還停留在僅僅討論某個視覺效果酷不酷炫上。至少邏輯布局和設(shè)計系統(tǒng)概念是必修課，組件搭建和自動布局也是必修課，在此基礎(chǔ)上再言其他。

最后

就是這些內(nèi)容了，感謝閱讀！

另外 Figma 社區(qū)發(fā)布了 Dev Mode 的學(xué)習(xí)文件，想要深入學(xué)習(xí)的話，更細(xì)節(jié)的內(nèi)容可以去文末資料中拓展閱讀。

國內(nèi)學(xué)習(xí)資料這塊，建議蹲一蹲 UP 主 草帽 sMao 的視頻，個人感覺國內(nèi) Figma 教學(xué)數(shù)他講得最仔細(xì)透徹，看得出是真喜歡 Figma，而非只是恰飯。