Figma 最近發(fā)布了 2025 年的新版本，提供了五個(gè) “重磅” 更新，包括新的自動(dòng)布局網(wǎng)格 Grid，專屬的 Figma 網(wǎng)站制作工具 Sites，品牌設(shè)計(jì)資產(chǎn)管理工具 Buzz，文生圖和交互的 AI 工具 Make，以及矢量繪圖模式 Draw。

有很多同學(xué)在問(wèn)要會(huì)不會(huì)做對(duì)應(yīng)的軟件教學(xué)更新，因?yàn)楝F(xiàn)在情況比較復(fù)雜，Make 沒(méi)上限，Sites 只能付費(fèi)版本使用，所以會(huì)不會(huì)出視頻教學(xué)還要看情況。

先通過(guò)這篇分享來(lái)具體講解下這幾個(gè)功能的要點(diǎn)，以及分享大家最關(guān)心也最重要的，這些功能和 UI 設(shè)計(jì)師有什么關(guān)系？

更多分析：

一、Figma Gird 自動(dòng)布局網(wǎng)格系統(tǒng)

基本功能介紹：

第一個(gè)更新 Figma Gird，是創(chuàng)建自動(dòng)布局 Auto layout 后更新的一個(gè)下屬功能，需要在自動(dòng)布局排列中選擇 Gird 模式啟用。

Grid 可以創(chuàng)建最大 12*12 的網(wǎng)格系統(tǒng)，啟用后下級(jí)的內(nèi)容就可以根據(jù)網(wǎng)格進(jìn)行排列，當(dāng)自動(dòng)布局編組本身進(jìn)行尺寸的變更時(shí)，網(wǎng)格大小也會(huì)變化，而下級(jí)內(nèi)容也會(huì)跟隨網(wǎng)格縮放。

這個(gè)功能本質(zhì)上就是頁(yè)面柵格的移植版，當(dāng)我們給 Frame 創(chuàng)建柵格 Columns 時(shí)，可以通過(guò)約束設(shè)置，來(lái)讓下級(jí)元素跟隨柵格進(jìn)行適配。Grid 就是自動(dòng)布局內(nèi)的 Columns 快捷應(yīng)用。

主要應(yīng)用場(chǎng)景：

這個(gè)功能主要應(yīng)用于類瓷片區(qū)或并列排版內(nèi)容的組件，即一個(gè)大的矩形卡片里面包含若干下級(jí)矩形的組合（類似 Bento 設(shè)計(jì)）。通過(guò) Grid 的應(yīng)用可以更快速地進(jìn)行內(nèi)容的布局排列、排序、適配。

但它不能取代 Frame 中的 Columns 布局，Columns 用于實(shí)現(xiàn)全局的響應(yīng)式設(shè)置，而 Grid 僅僅作用于單一組件內(nèi)的布局。

功能價(jià)值分析：

Grid 使用場(chǎng)景很有限，只有 Bento 型的組件適用。橫豎最多 12 列的設(shè)置決定了可以排列的組合形式不多，稍微復(fù)雜的組件就不適用這樣的布局，所以需要設(shè)計(jì)師非常熟悉自己正在設(shè)計(jì)的組件。

同時(shí)，應(yīng)用 Grid 就意味著下級(jí)模塊全部都要使用自動(dòng)布局，要完成所有下級(jí)元素自適應(yīng)的設(shè)置。如果沒(méi)有一直調(diào)整組件大小的場(chǎng)景，那就沒(méi)有必要使用它。

雖然這個(gè)功能的添加聊勝于無(wú)，但它基本上是本次更新中對(duì) UI 設(shè)計(jì)師來(lái)說(shuō)最實(shí)用的功能點(diǎn)。

二、Figma Sites 網(wǎng)頁(yè)設(shè)計(jì)模式

基本功能介紹：

Figma Sites 就是一個(gè)專門面向網(wǎng)頁(yè)設(shè)計(jì)并直接上線的新格式，相對(duì)于原有的設(shè)計(jì)模式而言，它增加了“斷點(diǎn)”的設(shè)置，即在不同頁(yè)面寬度區(qū)間應(yīng)用不同布局的響應(yīng)式原則，讓設(shè)計(jì)的網(wǎng)頁(yè)可以更接近真實(shí)上線的效果。

比如你們可以預(yù)覽官方的案例：https://remix-star-expand.figma.site

主要應(yīng)用場(chǎng)景：

用于創(chuàng)建靜態(tài)的企業(yè)站、產(chǎn)品主頁(yè)、活動(dòng)頁(yè)面，可以免除中間的前端開(kāi)發(fā)和部署步驟，能比較靈活的完成頁(yè)面的發(fā)布、編輯、修改。

要進(jìn)一步拓展的話，可以用它來(lái)做設(shè)計(jì)師個(gè)人作品集展示頁(yè)面，肯定遠(yuǎn)比自己買服務(wù)器搭個(gè)網(wǎng)站來(lái)的有效率得多。

功能價(jià)值分析：

Sites 功能就是通過(guò)可視化操作來(lái)完成靜態(tài)頁(yè)面建站，只適用于靜態(tài)頁(yè)面的設(shè)計(jì)和上線，也就是里面內(nèi)容不需要實(shí)時(shí)更新和后臺(tái)替換的。這功能在國(guó)外使用場(chǎng)景多，是因?yàn)閲?guó)外官網(wǎng)的使用頻率依舊非常高，做新品牌還是外貿(mào)都需要搭建相應(yīng)網(wǎng)站和頁(yè)面，而在國(guó)內(nèi)市場(chǎng)則對(duì)官網(wǎng)的依賴則非常低。

另一點(diǎn)比較有局限性的，就是 Sites 發(fā)布也是在國(guó)外的服務(wù)器上，這就意味著不夠穩(wěn)定。你們?nèi)粘Ｊ褂?Figma 出現(xiàn)的斷連，也必然會(huì)出現(xiàn)在發(fā)布的網(wǎng)頁(yè)上，所以面向國(guó)內(nèi)市場(chǎng)比較專業(yè)、嚴(yán)肅的網(wǎng)頁(yè)，是絕對(duì)不建議用它來(lái)發(fā)布的（當(dāng)然你們想給域名做個(gè) CDN 加速和轉(zhuǎn)發(fā)也可以）。

最后一點(diǎn)，也是最嚴(yán)重的問(wèn)題，那就是 Sites 功能是付費(fèi)功能，不是教育版，是必須付費(fèi)開(kāi)通的 Pro 版本才能使用，F(xiàn)igma pro 版本月付的話 20 刀/月，年付的話 16 刀*12 月，所以使用成本大家自己斟酌。

三、Figma Buzz 品牌設(shè)計(jì)資產(chǎn)管理

基本功能介紹：

Figma Buzz 本質(zhì)上就是一個(gè)批量出圖的工具，因?yàn)橐粋€(gè)品牌運(yùn)營(yíng)、宣傳物料中，往往會(huì)使用一個(gè)底板輸出不同的設(shè)計(jì)，如果輸出兩三張還好，輸出數(shù)十上百?gòu)埖脑捑蜁?huì)很麻煩。

所以 Buzz 就是讓設(shè)計(jì)師直接創(chuàng)建模板，然后批量編輯并管理這些素材的工具。

主要應(yīng)用場(chǎng)景：

比較適合應(yīng)用在國(guó)內(nèi)電商市場(chǎng)，大家日常在淘寶、京東等官網(wǎng)看見(jiàn)的商品推薦位，通常都是使用相同的模式產(chǎn)出的。對(duì)于中小品牌來(lái)說(shuō)，在不同渠道應(yīng)用廣告圖就需要自己完成內(nèi)容的設(shè)計(jì)，所以 Buzz 可以在一定程度上滿足這種要求。

還有就是一些品牌線下設(shè)計(jì)的物料，比如展會(huì)參照員工的工牌，上面要放頭像、姓名，或者產(chǎn)品介紹卡片、路牌標(biāo)識(shí)、商品標(biāo)牌等等，都可以用它做管理。

功能價(jià)值分析：

Buzz 的出現(xiàn)乍一看是希望設(shè)計(jì)師把 UI 以外的更多設(shè)計(jì)工作搬進(jìn) Figma 內(nèi)，尤其是這些偏平面的工作。但仔細(xì)研究了下里面的功能，它實(shí)際上更接近可畫 Canvas 這種傻瓜式的出圖工具，可以吸引更多非設(shè)計(jì)從業(yè)者直接使用它和提供的模板輸出廣告圖，再發(fā)布到 Ins、Facebook、X、Linkin 等社交媒體。

所以它可以實(shí)現(xiàn)的功能比 Figma Design 還簡(jiǎn)陋，屬于不使用自帶模板就基本做不下去的地步，稍微復(fù)雜的設(shè)計(jì)，尤其是國(guó)內(nèi)花哨的運(yùn)營(yíng)設(shè)計(jì)，就肯定沒(méi)辦法用它來(lái)完成。

四、Figma Draw 矢量繪圖工具

基本功能介紹：

Figma Draw 是除了 Design、Dev 以外的第三個(gè)編輯模式，在創(chuàng)建 Design 后下方的工具欄內(nèi)可以切換進(jìn)入。

Draw 其實(shí)就是實(shí)現(xiàn)矢量手繪的工具，在原來(lái)只能使用鋼筆鼠繪的基礎(chǔ)上，增加了更豐富的繪圖工具支持，實(shí)現(xiàn)更手繪風(fēng)格的繪圖圖形。

主要應(yīng)用場(chǎng)景：

這個(gè)功能明擺著是面向數(shù)字繪畫準(zhǔn)備的，比如 iPad 平板、數(shù)位板、可觸控筆記本等工具，就可以用 Figma 來(lái)繪圖，而不是只能選擇類似 Procreate 之類的工具。

它目前的功能很少，只適合完成一些基礎(chǔ)的手繪扁平插畫或圖形，用于搭配網(wǎng)站或 APP 進(jìn)行使用。

功能價(jià)值分析：

Draw 能實(shí)現(xiàn)的插畫效果是有先天缺陷的，因?yàn)?Figma 是一個(gè)矢量工具，而不是位圖工具。矢量繪圖注定是有較大限制的，所以可以畫的東西只能是簡(jiǎn)約、流行、扁平的風(fēng)格，這也更貼合歐美互聯(lián)網(wǎng)方向插畫的應(yīng)用方向。

在沒(méi)有進(jìn)一步更新前，在國(guó)內(nèi)設(shè)計(jì)需求中它只能完成一些最簡(jiǎn)單的裝飾圖形，基本沒(méi)有對(duì)現(xiàn)有的工作流產(chǎn)生實(shí)質(zhì)的影響。

五、Figma Make AI 生成工具

Figma Make 是直接使用 Prompt 生成 UI 界面和可交互操作的功能，目前沒(méi)有上線，只能看到官方提供的一些大餅。

這種界面生成的功能，并不新鮮，很多設(shè)計(jì)工具都有做過(guò)。而 Figma 自己做最大的優(yōu)勢(shì)，就在于生成的結(jié)果可以直接進(jìn)行改動(dòng)，而不像 GPT 生成一個(gè)靜態(tài)圖片毫無(wú)用處。從長(zhǎng)遠(yuǎn)上來(lái)說(shuō)，Make 必然會(huì)支持內(nèi)建規(guī)范和組件庫(kù)的應(yīng)用。

但是，不要把 Make 當(dāng)成一個(gè)真正出圖的工具，它只適合生成一些小樣，為后續(xù)設(shè)計(jì)提供一些前置化的測(cè)試和樣例。尤其是在國(guó)內(nèi)的設(shè)計(jì)環(huán)境中，不管是網(wǎng)頁(yè)還是 APP 和國(guó)外那種簡(jiǎn)約（陋）的設(shè)計(jì)完全不是一種東西，是沒(méi)辦法指望靠 Make 生成出最終結(jié)果的。

具體使用效果只能等到上線再試，但大家不要對(duì)這個(gè)功能抱有過(guò)多的期待。

結(jié)尾

Figma 這次的更新，不再只是圍繞界面設(shè)計(jì)的功能做完善，而是進(jìn)行各種跨界的拓展。說(shuō)好聽(tīng)點(diǎn)是功能更豐富更多元，說(shuō)難聽(tīng)點(diǎn)就是為了維持估值要編造新的故事了。

因?yàn)?UI 本身能做的功能就很少，類似動(dòng)效這些經(jīng)過(guò)市場(chǎng)驗(yàn)證毫無(wú)商業(yè)價(jià)值和潛力的模塊，更是不會(huì)被重視，加上疫情過(guò)后遠(yuǎn)程會(huì)議白板 Figjam 需求斷崖下跌，所以 Figma 只能想著跨界去侵占有潛力的市場(chǎng)。比如 Framer 的快速建站，Procreat 的繪圖，Canvas 的輕量設(shè)計(jì)，這和京東搞外賣的思路是一模一樣的。

但上一個(gè)大功能 Slides 上線那么久是個(gè)半成品，現(xiàn)在一口氣來(lái)那么多新功能你們以為能完善到哪里去？

所以作為 UI 設(shè)計(jì)師本身不用糾結(jié)于這次更新帶來(lái)了什么巨大的改變，還是對(duì)我們有什么重大的影響，只是 Figma 基于資本考量做出的一種戰(zhàn)略性的嘗試。

這就是我對(duì)本次 Figma 更新的相關(guān)看法，少關(guān)注點(diǎn)軟件，多關(guān)注點(diǎn)項(xiàng)目和作品集輸出。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」