Figma 全新功能有多炸裂？我總結了這核心3點！

導語

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

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

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

簡略版回顧：

Figma 官方更新視頻

一、Variables 變量

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

Config 2023 大會截圖

Config 2023 大會截圖

Figma 意在應用變量來支持創建適應性、拓展性強的設計（適合大型項目或設計系統搭建）。

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

二、Advanced prototyping 高級原型設計

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

Config 2023 大會截圖

官方高級原型設計練習文件

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

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

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

三、Dev Mode 開發模式

一句話總結：Figma 貼心支持開發者模式，設計師不用上傳標注到第三方了！

Config 2023 大會截圖

軟件中預覽

具體如下：

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

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

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

另外還發布了最新版 VS Code 插件：

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

VS Code 中 Figma 插件已上線

VS Code 中查看設計稿

四、其他更新

一些零碎更新，Figma 稱之為「可用性改進」。

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

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

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

Diagram 官網

一點小感想

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

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

Config 2023 大會截圖

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

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

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

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

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

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

最后

就是這些內容了，感謝閱讀！

另外 Figma 社區發布了 Dev Mode 的學習文件，想要深入學習的話，更細節的內容可以去文末資料中拓展閱讀。

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