上周 Figma 開了一場(chǎng)大的發(fā)布會(huì)，一口氣放出了超多功能更新。為了弄清楚這次 Figma 更新的每一個(gè)功能，周末我花了一天時(shí)間把這些更新都親自上手體驗(yàn)了一遍。我感覺，這次更新不是簡(jiǎn)單的功能優(yōu)化，而是將 Figma 從一個(gè) UI 設(shè)計(jì)工具轉(zhuǎn)變?yōu)楦采w產(chǎn)品全生命周期的"一站式創(chuàng)作平臺(tái)"。

今天我就把我周末研究的成果，跟大家做一個(gè)簡(jiǎn)單的分享，看看這次 Figma 放的年度大招到底更新了啥？如果有疑問(wèn)也可以評(píng)論區(qū)跟我交流。

更多分析：

先看下官方出的總更新宣傳視頻，主要內(nèi)容就 5 個(gè)方面：矢量繪畫增強(qiáng)（Figma Draw）、增強(qiáng)網(wǎng)格功能（Auto Grid）、設(shè)計(jì)稿秒變真實(shí)網(wǎng)站（Figma sites）、AI 基于設(shè)計(jì)稿生成原型（Figma Make）、模板批量出圖（Figma Buzz）

Figma 這次更新，資料準(zhǔn)備的其實(shí)非常全面了，不僅在發(fā)布會(huì)現(xiàn)場(chǎng)演示，而且在官網(wǎng)上有現(xiàn)成的教程和源文件，很容易學(xué)習(xí)。現(xiàn)在只要你打開 figma 官網(wǎng)，就能看到大大的一條橫幅：查看 figma 最新的更新。

點(diǎn)進(jìn)去之后，會(huì)有一個(gè)專門的網(wǎng)頁(yè)介紹這次的更新內(nèi)容，并且還貼心的給到了官方示例和教程，基本上跟著走一遍就能學(xué)會(huì)。

點(diǎn)進(jìn)去看教程源文件，步驟非常詳細(xì)。

一、矢量繪畫增強(qiáng)（Figma Draw）

其實(shí)這次更新的矢量功能，咱們多半都在 illustrator 中用過(guò)，它的加入像是要替代 Adobe illustrator 的感覺。Adobe illustrator 這個(gè)軟件我已經(jīng)很多年不用了，它太過(guò)笨重，而現(xiàn)在在 Figma 里就能用上矢量畫圖工具，方便了很多。

矢量功能增強(qiáng)后，它能畫很豐富的品牌圖形，能畫插圖，圖標(biāo)還有一些紋理效果。

具體來(lái)說(shuō)：

1）這次更新后，內(nèi)置了非常多的筆刷，也可以自定義筆刷。跟 AI 和 PS 差不多，熟悉的功能。

2）在對(duì)錨點(diǎn)編輯時(shí)，現(xiàn)在可以用套索工具來(lái)操作，比之前會(huì)更效率一些。

3）新的填充和描邊效果

相比之前的版本，在填充和描邊效果上，給了更多自由度，交互上也更方便了。大家可以按我標(biāo)注的順序體驗(yàn)這個(gè)新功能。

新的描邊效果，可以選擇描邊的頻率和波動(dòng)幅度。

4）新增了新的特效效果，可以添加紋理和噪點(diǎn)。

5）路徑文字

這個(gè)功能，在 figma 里終于有了，可以設(shè)置的細(xì)節(jié)也比較多，感覺比在 Ai 里還要好用，你們也可以去試試看。

6）多重復(fù)制

這個(gè)功能也很實(shí)用，之前我想要畫這種類似的圖形，還得去 sketch 中畫，現(xiàn)在不用導(dǎo)來(lái)導(dǎo)去了。

7）改變中心點(diǎn)旋轉(zhuǎn)

這個(gè)本來(lái)是一個(gè)非常常用的功能，可惜之前的版本一直沒有啊，sketch 到現(xiàn)在都仍然沒有。

現(xiàn)在 Figma 也能解決矢量圖畫畫的問(wèn)題，用這次更新的矢量畫圖工具，可以創(chuàng)作出非常棒的作品。

@thelittlelabs

@taamannae

二、增強(qiáng)網(wǎng)格 （Auto Grid）

首先，想要用上全新的網(wǎng)格系統(tǒng)，需要先把模式切換為設(shè)計(jì)模式，不然你會(huì)找不到網(wǎng)格設(shè)置選項(xiàng)。（我周末研究的時(shí)候就碰到了這個(gè)問(wèn)題）

它現(xiàn)在能實(shí)現(xiàn)自動(dòng)布局功能，快速設(shè)置好網(wǎng)格數(shù)量和間距，就跟 excel 一樣。

然后可以把內(nèi)容直接拖拽到網(wǎng)格中，新的網(wǎng)格系統(tǒng)可以通過(guò)吸附，實(shí)現(xiàn)快速排版。

網(wǎng)格教程內(nèi)容非常多，官方的教程也足夠細(xì)，所以如果想了解更多網(wǎng)格相關(guān)的細(xì)節(jié)，可以看下官方的這份教程，有圖文有視頻，我就不再文章里贅述了。我覺得網(wǎng)格這塊內(nèi)容不難，但最好是跟著教程完整的實(shí)操一遍，應(yīng)該就能懂了。

教程鏈接：https://www.figma.com/design/zs01oHDSnWNNZpnC8YB7qg

三、設(shè)計(jì)稿秒變真實(shí)網(wǎng)站（Figma sites）

最炸裂的更新莫過(guò)于 Figma Sites，現(xiàn)在你可以直接把設(shè)計(jì)稿變成真實(shí)可訪問(wèn)的網(wǎng)站了。但 Figma Sites 目前處于測(cè)試階段，暫時(shí)還體驗(yàn)不到，官方預(yù)計(jì)在未來(lái)幾周內(nèi)推出 AI 代碼生成功能，內(nèi)容管理系統(tǒng)則計(jì)劃在今年晚些時(shí)候上線。

這個(gè)功能厲害的地方在于幾點(diǎn)：

1）不再需要前端工程師手動(dòng)切圖寫代碼，F(xiàn)igma 能自動(dòng)生成響應(yīng)式網(wǎng)頁(yè)，包含動(dòng)畫、跳轉(zhuǎn)等交互效果。

2）通過(guò)簡(jiǎn)單描述如"讓文字像羽毛一樣落下"，AI 就能生成相應(yīng)交互代碼。

3）提供大量預(yù)設(shè)模板和組件，大大加快建站速度。我看官方的模版質(zhì)量很高，基本上就不用咋設(shè)計(jì)了。

4）它生成的不是簡(jiǎn)單的網(wǎng)頁(yè)，而是可以做內(nèi)容更新編輯的，也就是一個(gè)真正的可在線更新的網(wǎng)站，確實(shí)是很期待了。而且官方還說(shuō)內(nèi)容管理系統(tǒng)(CMS)功能將在今年晚些時(shí)候推出，不得了。

有了這個(gè)工具后，咱們只需要在 figma 里設(shè)計(jì)好網(wǎng)頁(yè)，就能全自動(dòng)生成響應(yīng)式網(wǎng)站，應(yīng)用，并且可以一鍵發(fā)布，還能動(dòng)態(tài)修改內(nèi)容，有后臺(tái)管理系統(tǒng)，不僅是預(yù)覽還能通過(guò) AI 生成可交互效果。

只是這個(gè)功能，目前普通用戶還用不了。

四、AI 基于設(shè)計(jì)稿生成原型（Figma Make）

前面一個(gè)功能是基于圖生成網(wǎng)站，這個(gè)功能可以直接通過(guò)文字生成設(shè)計(jì)稿以及可交互原型。可以通過(guò)提示詞生成設(shè)計(jì)稿，之前也有不少 AI 工具能做這事，比如 Midjourney 很早就能，但生成的效果慘不忍睹。Figma 和其他 AI 工具不大一樣的地方在于，它本身就是設(shè)計(jì)軟件，有無(wú)數(shù)優(yōu)質(zhì)設(shè)計(jì)稿數(shù)據(jù)，在生成設(shè)計(jì)這塊估計(jì)會(huì)好很多。

目前還沒有完全開放，需要稍等幾周后，咱們就能體驗(yàn)上了，到時(shí)候期待下效果。

五、批量出圖（Figma Buzz）

Figma Buzz 專為解決"批量出圖"的痛點(diǎn)而生。這個(gè)功能在團(tuán)隊(duì)協(xié)作中非常有用，F(xiàn)igma 對(duì)于團(tuán)隊(duì)協(xié)作的痛點(diǎn)可謂是抓的很準(zhǔn)，一個(gè)設(shè)計(jì)團(tuán)隊(duì)人多了之后，一致性往往很難把控。所以，這個(gè)功能基本上都是基于模版來(lái)做，可調(diào)的地方還不會(huì)很多，能較好確保一致性達(dá)成。

它有一個(gè)很厲害的能力是上傳 Excel 表格，就能一鍵生成數(shù)百?gòu)埳缃幻襟w圖、電商海報(bào)等。

設(shè)計(jì)師創(chuàng)建品牌統(tǒng)一模板，確保所有素材風(fēng)格統(tǒng)一。

它還能自動(dòng)調(diào)整圖層、文字排版，甚至根據(jù)內(nèi)容推薦動(dòng)畫效果。

Figma 提供了大量的模版，文字模版，F(xiàn)igma 不止是做 UI，連運(yùn)營(yíng)圖也能設(shè)計(jì)了。雖然當(dāng)前還是第一個(gè)版本，限制還比較多，但相信在未來(lái)能做的效果肯定會(huì)更多。

有排版模板，標(biāo)題模板，裝飾元素模板。

說(shuō)點(diǎn)我對(duì)這次更新的一些想法：Figma 這次更新不僅僅是功能的增加，更是工作方式的革命。它解決了設(shè)計(jì)師長(zhǎng)期在不同工具間切換的痛點(diǎn)，并且讓大家從想法到上線的周期大幅壓縮，基本上從之前只能做 UI，到現(xiàn)在有想法先通過(guò) AI 生成，然后做出原型，寫出代碼，最后上線，一整套都搞全了。

以前他們瞧不上 Adobe，現(xiàn)在逐漸成為他們，野心膨脹。Figma 創(chuàng)始人 Dylan Field 曾公開表示"目標(biāo)是成為 Figma 而非 Adobe"，但從這次更新中卻感覺它在逐漸成為一個(gè)新的 Adobe。新興工具通過(guò)單點(diǎn)突破顛覆巨頭，最終又因商業(yè)化壓力回歸全平臺(tái)模式。

Figma 正在不斷進(jìn)化，越來(lái)越全面，而我們是否也正在被要求越來(lái)越全能？值得思考。

既然看到這里了，如果覺得有學(xué)到，隨手點(diǎn)個(gè)“贊”、“轉(zhuǎn)發(fā)”和“在看”吧。如果想要第一時(shí)間收到推送，也歡迎給我個(gè)“ 星標(biāo)”！謝謝你的閱讀，我們一起成長(zhǎng)。