Figma 每年的 Config 大會都會發(fā)布大量新功能。2024 年推出了新界面 UI3 和 Figma Slides（在 Figma 里制作 PPT 的功能），2023 年則發(fā)布了開發(fā)者模式（Dev Mode?）和變量（Variables）。今年2025年的5大更新比往年更加重磅。不過一上午過去了，發(fā)現(xiàn)國內(nèi)自媒體都沒什么文章傳播和討論，可能是都在關(guān)注AI熱點(diǎn)，既然沒什么傳播，那我來寫點(diǎn)分享給大家吧！

更多設(shè)計(jì)資訊：

一、Draw Mode——矢量繪圖增強(qiáng)

Figma 一直專注于 UI 設(shè)計(jì)，但 UI 設(shè)計(jì)并不僅限于規(guī)整的組件"豆腐塊"，還包括富有創(chuàng)意的手繪插畫、藝術(shù)字體和精細(xì)圖標(biāo)等。以前這些工作需要依賴插件，甚至要打開 PS 或 Illustrator 來處理。

Draw 模式新增了動(dòng)態(tài)筆觸、文本路徑等工具，支持創(chuàng)建復(fù)雜形狀，讓 Figma 逐步成為全能設(shè)計(jì)工具，大大減少了對外部工具的依賴。

具體來說，工具欄在原有的 Design 和 Dev 模式基礎(chǔ)上，新增了 Draw 模式（雖然切換模式的動(dòng)畫有點(diǎn)慢得讓人著急）。在 Draw 模式下，工具欄增加了三種不同的畫筆，方便進(jìn)行手繪創(chuàng)作。

在 Draw 模式下，圖層面板的顯示方式也有所改變：原本用于表示圖層類型的圖標(biāo)現(xiàn)在變成了縮略圖預(yù)覽，讓用戶能更快地找到所需的手繪元素。

筆刷有大約 60 種不同的筆觸。簡單復(fù)雜的圖形都不在話下。

所有元素的邊框都可以切換為筆刷模式，輕松將整套 UI 轉(zhuǎn)換成手繪風(fēng)格。

之前 UI3 被吐槽的布爾運(yùn)算功能也得到改進(jìn)——原本藏在右上角對齊面板里非常不顯眼且不方便，現(xiàn)在在Draw模式下選中矢量時(shí)，工具欄會自動(dòng)顯示布爾運(yùn)算相關(guān)功能。

鋼筆功能也有增強(qiáng)。比如工具欄上第二個(gè)圖標(biāo)是套索能快速圈中多個(gè)錨點(diǎn)。

第三個(gè)圖標(biāo) Shape builder 能從矢量中快速添加和刪除部分元素。以前得多次布爾運(yùn)算才能解決的，一次就能搞定。

填充規(guī)律元素也變得更簡單了 - 在填充模式中選擇元素來源并設(shè)置排列規(guī)則，就能自動(dòng)將選中的元素按照指定規(guī)律填充到目標(biāo)區(qū)域。

最重要的是文字圍繞路徑功能終于內(nèi)置了，不再需要插件?，F(xiàn)在只要用文本工具選中線條，輸入的文字就會自然地沿著線條排列。

另一個(gè)替代插件功能是對象復(fù)制排列——不僅支持旋轉(zhuǎn)復(fù)制，還能沿直線復(fù)制對象。

復(fù)制排列的參數(shù)是動(dòng)態(tài)的，你可以隨時(shí)調(diào)整排列方式和數(shù)量。

二、Grid——網(wǎng)格自動(dòng)布局

之前 Figma 的自動(dòng)布局類似前端的 Flex 布局，是一維布局模型，一次只能處理一個(gè)維度（行或列）。你可以將元素排成一行或一列，但無法同時(shí)在兩個(gè)維度上精準(zhǔn)控制。這次新增的 Grid 布局則是二維布局模型，能同時(shí)在行和列兩個(gè)維度上對元素進(jìn)行定位和對齊，非常適合創(chuàng)建復(fù)雜的二維網(wǎng)格結(jié)構(gòu)。

Grid 布局可以跨越多個(gè)網(wǎng)格列或行進(jìn)行拉伸，不再局限于單個(gè)單元格。比如最近流行的蘋果 Bento 布局，用 Grid 布局就能輕松實(shí)現(xiàn)。

Grid 布局是和前端打通的，因此在 Dev Mode 前端工程師能直接復(fù)制代碼，節(jié)約了開發(fā)時(shí)間。

三、Buzz——品牌營銷設(shè)計(jì)工具

在 Figma 里新增了一個(gè)文件類型。使得 Figma 不在局限于 UI 設(shè)計(jì)，把品牌營銷設(shè)計(jì)也囊括進(jìn)來了。

Buzz 讓品牌設(shè)計(jì)師能夠創(chuàng)建和共享品牌資產(chǎn)，團(tuán)隊(duì)成員可以隨時(shí)快速調(diào)用。其簡單的設(shè)計(jì)編輯器使?fàn)I銷人員和其他團(tuán)隊(duì)能輕松創(chuàng)建所需素材，包括社交媒體帖子、數(shù)字廣告和活動(dòng)材料等。

可以看到界面布局和 UI 設(shè)計(jì)不一樣，功能都集成在左側(cè)的側(cè)邊欄，底部工具條放置的工具很少。

設(shè)計(jì)的自由度不多，有點(diǎn)像 Canvas、搞定設(shè)計(jì)這種基于海量模板進(jìn)行微調(diào)，當(dāng)然如果你想自由設(shè)計(jì)，可以先用 Figma 的 Design 先設(shè)計(jì)好，然后再復(fù)制過來。

四、Make——AI生成可交互原型

通過文本描述或現(xiàn)有設(shè)計(jì)生成高保真可運(yùn)行原型，讓設(shè)計(jì)師無需編程即可創(chuàng)建交互式原型，向客戶展示交互細(xì)節(jié)，縮短設(shè)計(jì)到開發(fā)周期。支持代碼編輯和即時(shí)預(yù)覽，基于 Anthropic 的 Claude 3.7 模型做的。

除了文本，你可以上傳圖片甚至將設(shè)計(jì)稿中的元素直接復(fù)制粘貼到 AI 聊天里。讓 AI 更好的理解你的意圖。但暫時(shí)還不支持基于指定的設(shè)計(jì)系統(tǒng)生成 UI。

在原型的預(yù)覽界面，可以選擇特定的元素，再用提示詞讓 AI 做針對性修改。

五、Site——設(shè)計(jì)稿轉(zhuǎn)成響應(yīng)式網(wǎng)站

支持將 Figma 設(shè)計(jì)稿一鍵生成帶交互效果的響應(yīng)式網(wǎng)站，這個(gè)功能顯然是針對 Framer。

Framer 作為 UI 高保真原型設(shè)計(jì)工具的先行者，比 Figma 更早就致力于將 UI 設(shè)計(jì)直接轉(zhuǎn)換為代碼。但在 AI 出現(xiàn)之前，要生成代碼就必須讓設(shè)計(jì)稿嚴(yán)格遵循圖層、命名和組件規(guī)范，設(shè)計(jì)師最好還要懂一些編程知識。這對追求創(chuàng)意自由的設(shè)計(jì)師來說實(shí)在太過困難。隨著 Figma、Sketch 等 UI 設(shè)計(jì)工具逐漸主導(dǎo)市場，F(xiàn)ramer 意識到想建站但不懂技術(shù)的企業(yè)用戶比專業(yè) UI 設(shè)計(jì)師更具市場潛力。憑借早期積累的交互設(shè)計(jì)技術(shù)優(yōu)勢（如動(dòng)態(tài)組件、實(shí)時(shí)預(yù)覽），F(xiàn)ramer 巧妙地將動(dòng)畫和狀態(tài)管理等功能與網(wǎng)站構(gòu)建相結(jié)合，打造出獨(dú)特的競爭優(yōu)勢。如今，F(xiàn)ramer 已躋身全球建站工具市場第一梯隊(duì)，去年?duì)I收更是達(dá)到了 1.2 億美元。

Figma Sites 主要特點(diǎn)是能生成針對不同分辨率的響應(yīng)式網(wǎng)站，可以隨時(shí)從 Figma Design 復(fù)制粘貼設(shè)計(jì)元素。并且提供大量模板和組件加快建站效率?，F(xiàn)在還只是生成靜態(tài)網(wǎng)站，未來會提供 CMS 功能，讓網(wǎng)站內(nèi)容能動(dòng)態(tài)更新。

六、其他功能更新

在設(shè)計(jì)畫布和 FigJam 白板中增加了 AI 自動(dòng)建議功能，如文本建議和內(nèi)容填充功能；由 ChatGPT 最新圖像生成模型支持的“制作和編輯圖像”功能；FigJam 中的“語調(diào)調(diào)節(jié)器”和背景移除工具等。

通過新的"模板和工具"選項(xiàng)卡，你可以在文件瀏覽器中快速查找組織內(nèi)部或社區(qū)分享的插件、小部件和模板。

總結(jié)

從這次發(fā)布可以看到，F(xiàn)igma 已不再是單純的 UI 設(shè)計(jì)工具。

從用戶角度來看，F(xiàn)igma 解決了設(shè)計(jì)師長期面臨的工具割裂問題（如 Figma 設(shè)計(jì)→Framer發(fā)布→Canva修圖）。通過整合全鏈路工具減少切換，F(xiàn)igma讓公司內(nèi)所有與設(shè)計(jì)相關(guān)的員工都能在同一平臺上便捷協(xié)作。盡管增加了如此多的新功能，價(jià)格目前仍然保持不變。

從商業(yè)角度來看，這次多個(gè)新功能都在直接對標(biāo)現(xiàn)有產(chǎn)品，直接挑戰(zhàn)多個(gè)競爭對手：Draw 瞄準(zhǔn)了 Illustrator、Site 對標(biāo) Framer、Buzz 直指 Canva。Figma 顯然志在占領(lǐng)整個(gè)設(shè)計(jì)領(lǐng)域的統(tǒng)治地位?；叵肴ツ甑妆O(jiān)管機(jī)構(gòu)否決了 Adobe 以 200 億美元收購 Figma 的交易，如今看到這些更新，不禁讓人感嘆 Figma 正逐漸向另一個(gè) Adobe 轉(zhuǎn)變。

Figma正在重構(gòu)設(shè)計(jì)工具邊界，你會為這些新功能買單嗎？歡迎在評論區(qū)分享你的看法！