2024 Figma 改版與功能更新

快速摘要 Config 2024 年度大會新功能發布內容

Simon Lin
AAPD — As A Product Designer
9 min readJun 27, 2024

--

AI 功能模組、產品體驗優化、Dev Mode 改版、Figma Slide 簡報

每年的 6 月,都是許多設計師要熬夜看 Figma 年度發表會的日子,而這次的 Config 發表會釋出了許多令人期待新功能,只能說 Figma 又上升到另一個等級。

這次許多功能和體驗上的更新,完全都是打在設計師的工作流程和與工程協作的痛點上,相信會是對於設計師們往後的工作方式有很大的幫助跟改變(絕對是好的方向)。

以下就來分享這次改版的內容與方向(特別感謝 Anniie Lee ✨ 美國現場連線報導!)

快速了解 Figma 今年更新的所有功能

1. 全新的 Figma 介面 UI3 — 讓設計時可以更專注在畫板內容

這是 Figma 第三次重新設計軟體介面,目的是在整合近十年推出的功能、拉近新手與專業設計師的使用者體驗,並移除在設計操作時的雜訊,讓設計師和合作對象可以更專注在畫布上的內容。

其中包含以以下主要改動:

  • 介面翻新:進行整體介面視覺和版面的調整,讓介面更加的現代與簡潔。
  • 工作畫面調整:工具欄從上方移動到底部、隱藏側邊欄並且可以調整側邊面板寬度,讓整體工作畫面更加寬廣與彈性。
  • 圖標 (icon) 風格調整:Figma 銳利的風格轉向圓角,由設計師重新繪製 200 多個功能 Icon,並可自由開啟工具 Icon 的說明文字。
  • 符合脈絡的功能編排:在不同情況下(如選擇不同物件),面板上功能的順序會依照當下情境與脈絡做最合適的編排呈現。
全新的介面更簡潔、更現代了,應該可以大幅提高生產力
統一介面風格後,在不同產品線之間轉換的體驗會更流暢無縫
主要面板和圖標都有進行重新設計

2. 更聰明的 Auto Layout、內建設計模組 UI Kit 、響應式原型檢視

Figma 的 Auto Layout 功能雖然強大,但往往是需要花許多心力學習和了解如何架構版面以達到最好的效果,但現在 Figma 推出了 Suggest Auto Layout 功能,將直接偵測你的設計稿,幫你加上適合的框架以及套用 Auto Layout 效果,基本上可以做到一鍵整理設計稿!

另外 Figma 也推出了原生的 UI Kit 功能(目前支援 iOS18、Material 3、Simple Design System 等),只要到 Asset 面板就可以找到相關的 UI Kit 直接調用裡面的元件和模組快速搭建想要的 UI,這對於想要快速溝通概念會有很大的幫助。

預設的元件庫讓你可以快速打造設計驗證概念

另外一個實用功能是響應式原型檢視器(Responsive Prototype Viewer),當設計都有完整套用 Auto Layout ,在 Prototype 檢視時可以設定響應式模式,所以設計就可以適應不同的裝置了!(在進行使用者測試時非常有幫助!)

現在做原型可以直接用 RWD 方式檢視

3. 讓工作效率提升、想像創意無邊界 — Figma AI 系列功能

這次 Config 的重點之一,就是透過 AI 來提升設計師的工作效率,幫助設計師可以更好的開始設計旅程、保持專注在設計流程當中,以及幫助使用者更快速找到需要的內容。

直接看 Demo 感受 AI 的神奇

以下是一些重點更新說明:

  • 自動生成設計和 Prototype 連結:你再也不用害怕面對空白的畫布,只要輸入一段描述,Figma 就可以自動生成介面與內容,並且也可以自動連結頁面變成 Prototype。
  • 改善搜尋體驗:重新梳理設計師製作設計稿的過程,不僅是從 0 到 1 而是會在設計探索的任何階段,因此推出以下功能:
  • 視覺搜尋 (Visualize search):利用靜態截圖就能找出內部設計資料庫和外部社群中相似設計畫面(並且可編輯)。
  • 資源搜索 (Asset search):利用上下文來進行模糊(聰明)搜尋,例如:當你想要搜尋主要按鈕 (primary button) 時,不需要完全正確的關鍵字,輸入 btn_large 也可以輕鬆找到相關素材。
  • 自動圖層命名:設計師以後可以不需要再爭論圖層需不需要命名了,因為 Figma AI 可以幫你針對內容來做到自動圖層命名,乾淨又清楚。
  • 文案修飾及多語系支援:可以利用 AI 來協助修飾文案、調整語氣等,甚至可以為介面進行翻譯,找到各種語言最適合的句子長度和調整介面。
  • 擬真內容生成:Figma AI 可以幫你產生更貼近產品的文字 & 圖片內容,甚至也可以為圖片快速去背,你的介面可以更快達到接近「真實」的產品體驗。

4. 讓呈現設計成果更輕鬆無縫、溝通更順暢 — Figma Slide 簡報

由於在過去幾年,實在有太多使用者直接用 Figma 做簡報,所以 Figma 直接推出了 Figma Slide 功能讓你可以更好的呈現和溝通你的設計概念和成果,當然也包含了非常多大家熟悉且實用的簡報功能,讓你更好準備簡報、管理簡報、與和聽眾互動。以下是重點功能介紹:

  • 無縫接軌:Figma Slide 操作方式與體驗和 Figma 大致相同,上手起來非常容易,也直接使用既有設計資料庫 (Design Library)。
  • 模式切換:分為 Slide Mode 跟 Design Mode ,讓你不論是想專注去調整每頁簡報細節,或是看整體簡報的架構和進行簡易的修改都非常方便。
  • 網格視圖 (Grid view):除了傳統的由上至下的簡報檢視模式外,Figma Slide 也提供了更輕易管理投影片的順序和區塊的 Grid View,讓整理簡報非常輕鬆。
  • 雙向互動:Figma Slide 提供與讓聽眾參與的功能,像是投票調查 (Polls)、兩極量表 (Alignment),等等,讓你進行簡報時不再像對牛彈琴,能夠讓觀眾參與度更高。
  • 原型展示:可以直接複製貼上 Figma 的互動原型並直接在 Slide 中進行操作,如果有設計修改也會即時更新,不用再一直來回複製貼上了!

我的心得與總結

看完這麼多內容更新,不知道大家的心得和感想是什麼呢?是興奮還是緊張呢?我自己是期待與興奮大於焦慮,這邊也可以跟大家分享看完 Figma 發表會後我的三個主要想法:

  1. 在未來,設計師可以花更少的時間處理一些繁瑣的工作(如圖層結構、命名、交付檔案等),有更多時間去探索設計方案來解決更複雜、更重要的產品問題。
  2. 設計師在 AI 時代 ,基本上就等於擁有了超能力,可以快速把想法從 0–1 實現,甚至透過 AI 的輔助可以讓你很快速的迭代與完善設計。
  3. 「軟實力」和「思考能力」將會是未來設計師重要的關鍵能力,因為基礎核心技術的門檻越來越低,真的要能做出好的設計,往往需要更多維度的思考以及對事物本質的理解,也會需要各種軟實力如溝通協調、領導管理、策略提案等才能把設計的高度提升。

其他相關資源分享

如果看完以上內容,想要更詳細了解所有更新,可以看 Config 的回放影片,或是官方的的文章整理,相信你會對於了解之後的發展方向有更清楚的想法:

感謝你/妳花時間讀這篇文章,如果你覺得這篇文章寫得不錯、有幫助到你,希望你能給我一點「拍手鼓勵」,也歡迎在下方留言讓我知道你的想法,我會多加點油寫出更多內容的!

1. 拍「10下」:表示你喜歡這篇文章,謝謝你!
2. 拍「20下」:表示你覺得這篇文章很棒、願意分享給朋友!
3. 拍「30–40下」:希望未來我能寫更多這類主題的文章!
4. 拍好拍滿「50下」:給我最大的鼓勵,這將會支持我繼續寫作,並持續分享我的經驗!

拍手小秘訣: 只要將滑鼠(或手指)持續按著不放手掌的 icon,就能夠連續拍手囉,試試看吧!

我是Simon,是一名在澳洲雪梨工作的設計師。我喜歡與人分享我的觀點,從不同角度傳遞設計的價值,如果有合作機會或任何想聊的事情,都不用客氣透過我的 E-mailLinkedIn 聯絡我,期待與你的相遇 :D

最後,如果你正開始你的設計職涯或思考下一步該往哪裡走,我目前有提供付費的職涯諮詢和 Mentorship ,歡迎預約時間跟我聊聊!我經營的 AAPD 設計內容平台和 產品設計(UI/UX)實戰 Figma 線上課程 (超過 8,000 人參與)也有豐富的資源可以學習,歡迎前往參觀!

https://portaly.cc/aapdgo

--

--