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

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

更多分析：

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

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

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

點進去看教程源文件，步驟非常詳細。

一、矢量繪畫增強（Figma Draw）

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

矢量功能增強后，它能畫很豐富的品牌圖形，能畫插圖，圖標還有一些紋理效果。

具體來說：

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

2）在對錨點編輯時，現(xiàn)在可以用套索工具來操作，比之前會更效率一些。

3）新的填充和描邊效果

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

新的描邊效果，可以選擇描邊的頻率和波動幅度。

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

5）路徑文字

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

6）多重復(fù)制

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

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

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

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

@thelittlelabs

@taamannae

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

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

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

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

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

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

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

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

這個功能厲害的地方在于幾點：

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

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

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

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

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

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

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

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

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

五、批量出圖（Figma Buzz）

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

它有一個很厲害的能力是上傳 Excel 表格，就能一鍵生成數(shù)百張社交媒體圖、電商海報等。

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

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

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

有排版模板，標題模板，裝飾元素模板。

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

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

Figma 正在不斷進化，越來越全面，而我們是否也正在被要求越來越全能？值得思考。

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