2025 年 Figma 最新功能全解析|AI 設計加速、Dev Mode 2.0、Draw 與 Sites 一次看懂!

2025/05/08|產品動態
2025 年 Figma 最新功能全解析|AI 設計加速、Dev Mode 2.0、Draw 與 Sites 一次看懂!

如果你對 Figma 還停留在只是個「畫 UI 介面」的工具,那你可能錯過了這場設計界的重大變革,Figma 在 2025 年的 Config 發表會上,推出了有史以來最大規模的更新,不只是介面微調,而是整體設計流程邏輯的徹底重構。從你打開畫布那一刻起,直到網站上線、社群素材發布,Figma 全都幫你想好了。

 

這篇文章將帶你一次搞懂所有新功能:Figma AI、Figma Draw、Figma Sites、Figma Buzz、Dev Mode 2.0、Auto Layout 5.0、Grid Auto Layout、Variables、Design Tokens…還有背後真正的企圖 —— 讓 Figma 成為「設計、開發與營運的統一作業系統」。

 

 

一句話講完:Figma AI 現在能幫你把畫面生出來

figma-ai

過去設計師面對空白畫布,靈感來的時候很美妙,但來不及的時候就很煩。而現在,有了 Figma AI,你只需要輸入一句話(比如:「我想設計一個手機 App 的首頁,主打環保議題」),系統就會自動幫你產出幾套完整的 wireframe 或高保真設計畫面。這項功能叫做 First Draft,不但能與你現有的 Design System 搭配運作,還支援變更顏色、語調、排版等等變數設定。

 

而且不只畫面,AI 文字產生器還會根據情境幫你自動填入接近品牌語氣的文案內容,甚至還有一個超貼心的功能:會幫你把所有亂碼圖層名稱(什麼 Rectangle 123、Frame 456)自動改成「Header」、「CTA 按鈕」、「主圖」這種容易理解又有語意的名稱,大幅提升與開發或專案人員協作的效率。

 

 

開發再也不怕對不到設計稿,因為 Dev Mode 2.0 直接幫你寫程式碼

figma-devmode

當設計師把畫面畫好,接下來的挑戰就是交付給工程師。而這一段過去經常是「溝通地獄」。但在這次更新中,Figma 將 Dev Mode 升級成 Dev Mode 2.0,並加入 Code Connect 功能,這代表什麼?設計師不但可以預覽畫面轉換成的各種前端框架程式碼(包含 React、Vue、Flutter、Swift UI),還能設定樣式參數、變數命名邏輯、甚至整合 Git 專案,做到一鍵 PR 推送。這意味著設計稿不只是參考,而是實際可執行的前端程式碼起點。

 

再加上新的 Variables 與 Design Tokens 功能,設計師現在可以事先定義好色彩系統、字體規則、元件間距,並且依照品牌或不同主題(如 Light Mode/Dark Mode)自動切換,這些設定也能匯出成 JSON 檔案,讓工程師能直接套用在前端開發,實現所謂的「設計即程式碼」。

 

 

排版靠感覺?Auto Layout 5.0 + Grid 功能讓版面自己對好對滿

figma-autolayout

Auto Layout 是 Figma 一直以來深受喜愛的功能之一,但這次的更新把它直接升級為 Auto Layout 5.0,並加入了新的 Grid Auto Layout 概念,也就是說,你可以同時在同一個元件中使用 row、column、grid 三種排版邏輯,畫面會依據內容的變動自動調整。圖片變多、字數變長都沒關係,整個版面會自己長大、縮小、流動,完全不用手動微調。

 

更棒的是,它還引入了 Content-Aware Padding,這個功能會自動判斷內文的尺寸,調整元件之間的間距,讓畫面看起來更自然、平衡。簡單來說,就是你只要專注在「想要傳達什麼」,Figma 幫你解決「怎麼排才漂亮」。

 

 

想畫插畫、icon、logo?不用再跳去 Illustrator,Figma Draw 就能搞定

figma-draw

以前只要做一些比較細緻的向量繪圖,設計師常常得打開 Illustrator 來補,然後再貼回 Figma。但現在,Figma Draw 登場,這個新功能等於把向量筆刷、手寫路徑轉向量、壓力感應等功能整合進來,直接讓你在 Figma 裡畫圖、畫 icon、畫插畫。甚至支援輸出為 Lottie Animation 格式,讓你連動態都能設計、預覽、交付,一氣呵成。

 

 

設計完直接上線?Figma Sites 真的辦到了

figma-site

Figma 現在不只是畫畫介面,它還幫你「蓋網站」。透過 Figma Sites,你可以選擇預設的 AI 模板、自己拉設計稿、然後點幾下就完成網站建置,它甚至支援基本的 SEO 設定、GA4 插碼追蹤,還可以部署成靜態網站或 SSR 架構,適合做 Landing Page、品牌網站或產品頁。

 

如果你還需要為網站或品牌同步產出社群素材,也可以直接用 Figma Buzz,這是另一個新功能,它可以幫你快速生成 Instagram 貼文排版、YouTube 縮圖、短影音字幕稿等等,而且會自動套用你在變數中設定的品牌配色與樣式,完全不怕風格跑掉。

 

 

總結:Figma 不只是設計工具,而是「品牌設計營運系統」

從這次 2025 的更新可以看出,Figma 不只是想當「UI 設計工具」,而是野心勃勃地成為一個整合設計、交付、開發、佈署、行銷的全能平台。對於設計師來說,它提供的是更省力、更準確、更有邏輯的設計流程;對團隊來說,它是把設計、前端、品牌、行銷部門全部「拉進同一塊畫布」的利器。

 

現在你不只是畫畫而已,你是在建構一個完整的設計營運流程。只要好好利用這些工具:Figma AI、Figma Draw、Figma Sites、Figma Buzz、Dev Mode 2.0、Auto Layout 5.0、Grid Auto Layout、Variables、Design Tokens,你的團隊就能比別人早一步,把靈感變產品,把想法變實體。

 

 

小編表示:Figma這樣子,不只我要失業...Adobe也在瑟瑟發抖ㄌQQ(抖)

 

 

想要早別人一步建立自己完整的事業體嗎?
趕快來早沄木,帶你用最前瞻的眼光穩步前行!

FB粉絲專頁Instagram粉絲專頁

← 返回最新消息