Figma:年度最火 IPO,設(shè)計(jì)與代碼生成一體化的最佳選手

0 評(píng)論 539 瀏覽 0 收藏 23 分鐘

Figma 今晚掛牌:40 倍超額認(rèn)購(gòu)、55 M 比特幣家底、15-16× EV/Sales,數(shù)字只是開(kāi)場(chǎng)。真正的故事是 Figma Make——把 UI 稿一鍵變成可上線代碼,設(shè)計(jì)師和前端工程師的邊界被 AI 瞬間抹平。從 DevMode 到 Variables 再到 Grid-CSS,F(xiàn)igma 用十年把“設(shè)計(jì)軟件”升級(jí)成前端協(xié)作操作系統(tǒng),現(xiàn)在它要在二級(jí)市場(chǎng)講“設(shè)計(jì)與代碼一體化”的新敘事。

Figma ($FIG)將于美東時(shí)間 7 月 31 日登陸紐交所,接近 40 倍的超額認(rèn)購(gòu)讓它有機(jī)會(huì)成為今年最受歡迎 IPO。

作為當(dāng)下 UI/UX 設(shè)計(jì)領(lǐng)域具有絕對(duì)影響力的設(shè)計(jì)工具,2020 年后,F(xiàn)igma 基本已經(jīng)超越 Sketch 和 InVison 等“前輩”,成為 UI/UX 專業(yè)設(shè)計(jì)師的默認(rèn)工作平臺(tái)。Cloud-based 的協(xié)作和 PLG 的 GTM 策略是 Figma 早期的增長(zhǎng)飛輪,依托 UI/UX 的強(qiáng)產(chǎn)品力在整個(gè)前端工作流上圍繞不同職能人群做功能延展,構(gòu)成了 Figma 的產(chǎn)品和增長(zhǎng)邏輯。

  • Figma財(cái)務(wù)數(shù)字與同規(guī)模優(yōu)秀上市公司相比均較為領(lǐng)先:2024財(cái)年?duì)I收同比增長(zhǎng)48%,1Q25營(yíng)收增長(zhǎng)46%,頭部客戶NDR為132%,自由現(xiàn)金流利潤(rùn)率為24%;
  • 按$32發(fā)行價(jià)對(duì)應(yīng)為今年15-16xEV/Sales估值,F(xiàn)igmaMake帶來(lái)的“AIwinner”敘事有機(jī)會(huì)帶動(dòng)更高的Upside;
  • FigmaMake是公司2025年推出的前端代碼生成產(chǎn)品,我們認(rèn)為是全球二級(jí)市場(chǎng)軟件公司中最A(yù)I-native的產(chǎn)品之一。它不只是Figma給到市場(chǎng)“如何應(yīng)對(duì)AI顛覆”的倉(cāng)促答案,本質(zhì)上是Figma過(guò)去幾年彌合設(shè)計(jì)和代碼開(kāi)發(fā)投入上的積累,F(xiàn)igmaMake有望成為Figma生態(tài)系統(tǒng)中最核心的底層能力;
  • 因此,我們認(rèn)為Figma不僅僅是一款設(shè)計(jì)軟件,它首先已經(jīng)具備一個(gè)前端協(xié)作開(kāi)發(fā)操作系統(tǒng)的雛形,并且是最有潛力推動(dòng)AI時(shí)代“設(shè)計(jì)與代碼一體化”的平臺(tái)玩家。從DevMode、MCP、FigmaMake及FigmaSite等核心產(chǎn)品的迭代上,我們已經(jīng)看到這一趨勢(shì);
  • Interestingfact:Figma是二級(jí)軟件公司中為數(shù)不多持有大量比特幣的公司:根據(jù)S1文件披露,公司賬面目前有$55m比特幣,還有$30m的董事會(huì)批準(zhǔn)。

友情提示:本文僅作為研究分析,不構(gòu)成任何投資建議或產(chǎn)品推薦

01. Figma 的護(hù)城河和增長(zhǎng)邏輯

Figma 目前在 UI/UX 設(shè)計(jì)領(lǐng)域的影響力毫無(wú)懸念,從 2020 年后,F(xiàn)igma 基本已經(jīng)超越 Sketch 和 InVison 等“前輩”,成為 UI/UX 專業(yè)設(shè)計(jì)師的默認(rèn)工作平臺(tái),在這一階段, Cloud-based 的協(xié)作和 PLG 的 GTM 測(cè)試為 Figma 帶來(lái)了增長(zhǎng)飛輪。

Cloud-based + PLG 策略帶動(dòng) Figma 成長(zhǎng)為下一代UI/UX產(chǎn)品代表

UI/UX 設(shè)計(jì)位于前端開(kāi)發(fā)工作流的上游,借助在 UI/UX 設(shè)計(jì)師社群中的滲透,F(xiàn)igma 沿著前端工作流上圍繞不同職能人群做功能延展,這一點(diǎn)構(gòu)成了 Figma 長(zhǎng)期的產(chǎn)品壁壘和增長(zhǎng)邏輯。

根據(jù) Figma S1 文件,目前 Figma 有 1300 萬(wàn)月活,其中只有 1/3 是設(shè)計(jì)師用戶,剩余 1/3 是前端工程師 ,另有 1/3 是產(chǎn)品經(jīng)理、市場(chǎng)營(yíng)銷人員等其他職能。Figma 已經(jīng)成功實(shí)現(xiàn)用戶破圈,在前端工作流上進(jìn)行滲透。值得一提的是,設(shè)計(jì)云協(xié)作的產(chǎn)品和技術(shù)壁壘本身就極高,Adobe 有動(dòng)力在 2022 年出價(jià) 200 億美元收購(gòu) Figma 也有此類因素的考慮。

Figma在UI設(shè)計(jì)/原型/白板等工具上已經(jīng)實(shí)現(xiàn)很高的占有率(Source:UX Tools)

以下為 Figma 的產(chǎn)品矩陣,可以看到 Figma 已經(jīng)基本覆蓋了前端工作的全流程,且這些模塊并不是被簡(jiǎn)單拼接,而是沿著協(xié)作工作流,實(shí)現(xiàn)互相打通:

針對(duì)前端開(kāi)發(fā)者與設(shè)計(jì)師協(xié)作的產(chǎn)品 DevMode 是此前最重要的產(chǎn)品進(jìn)展。作為 2023 年推出的面向前端開(kāi)發(fā)者群體的重要模塊,在經(jīng)歷了一系列產(chǎn)品迭代、 GTM 策略和定價(jià)調(diào)整后,在 2024 年產(chǎn)品實(shí)質(zhì)性破圈,帶動(dòng) Figma 2H24 加速增長(zhǎng),充分驗(yàn)證公司增長(zhǎng)邏輯和產(chǎn)品能力。

中長(zhǎng)期視角下,F(xiàn)igma 的增長(zhǎng)驅(qū)動(dòng)力主要包括:

1. 持續(xù)沿著前端開(kāi)發(fā)工作流進(jìn)行用戶滲透:目前的 1300 萬(wàn)月活中為 1/3 設(shè)計(jì)師、 ?1/3 前端工程師以及 1/3 其他職能。而在典型的前端團(tuán)隊(duì)中,設(shè)計(jì)師和前端工程師在團(tuán)隊(duì)典型比例是 1:5~1:10,因此 Figma 在典型團(tuán)隊(duì)中仍有明確的滲透率提升空間。

2. PLG 之后加速 Enterprise 變現(xiàn):Figma 頭部付費(fèi)企業(yè)增長(zhǎng)相對(duì)更快。ARR > $100K+企業(yè)數(shù)同比 47%增長(zhǎng) vs >$10K+企業(yè)數(shù)同比 39%增長(zhǎng),F(xiàn)2000 公司付費(fèi)滲透率 74%,但只有不到 1/4 的企業(yè)付費(fèi)超過(guò)$100K;

3. 國(guó)際化變現(xiàn)潛力:國(guó)際化市場(chǎng)增長(zhǎng)是 Figma 偏中長(zhǎng)期的增長(zhǎng)動(dòng)力。PLG 為主的工具傳播使得 Figma 的國(guó)際流量比例遠(yuǎn)大于目前國(guó)際市場(chǎng)變現(xiàn)的比例:非美國(guó)的國(guó)際用戶占比~85%,但實(shí)際上美國(guó)市場(chǎng)在收入中的占比接近 50%。

從流量上看,美國(guó)始終是 Figma 流量主力,2025 年初峰值達(dá) 500 萬(wàn) UV,顯著高于其他國(guó)家。印度、俄羅斯和中國(guó)是第二梯隊(duì),印度、俄羅斯、印尼用戶的訪問(wèn)深度和粘性極高,是重要的增長(zhǎng)型市場(chǎng)。

02.Figma Make 重新定義 Figma

Lovable、Bolt 等 vibe coding 產(chǎn)品最大的應(yīng)用場(chǎng)景之一是 Web/App 的開(kāi)發(fā)設(shè)計(jì),這些產(chǎn)品的快速增長(zhǎng)讓 Figma 需要面對(duì)“如何應(yīng)對(duì) AI 顛覆”的問(wèn)題。

和所有具備一定規(guī)模體量的創(chuàng)意軟件一樣,我們認(rèn)為 Figma 融合 AI 帶來(lái)的用戶體驗(yàn)會(huì)比創(chuàng)業(yè)公司加工作流更好。構(gòu)建出完整且強(qiáng)大的設(shè)計(jì)工作流以及相關(guān)集成需要非常大的工程投入以及時(shí)間,今天 Figma 在 UI/UX 領(lǐng)域的強(qiáng)勢(shì)也是前幾年不斷圍繞 Figma Design 核心產(chǎn)品迭代的結(jié)果,DevMode、Figma Make、Figma Buzz 等擴(kuò)圈功能也都建立在這些積累之上,但 AI-native 工具普遍都還沒(méi)有構(gòu)建出完整的、可工業(yè)化的工作流。

作為 Config2025 上發(fā)布的重要 AI 產(chǎn)品(功能),F(xiàn)igma Make 是 Figma 對(duì)于市場(chǎng)關(guān)于“如何面對(duì) AI 顛覆”的答案,它也是我們認(rèn)為目前全球二級(jí)市場(chǎng)軟件公司中最 AI Native 的產(chǎn)品之一。

表面上看,F(xiàn)igma Make 和 Lovable、Bolt、Bass44(已被 Wix 收購(gòu))的功能和產(chǎn)品形態(tài)確實(shí)類似:基于 LLM 模型能力,一鍵快速生成各類前端 prototype(網(wǎng)頁(yè)、dashboard 等等),但因?yàn)?Figma 在工作流和設(shè)計(jì)軟件上的積累,F(xiàn)igma Make 給到的綜合用戶體驗(yàn)更高、距離復(fù)雜生產(chǎn)需求更近:

Figma Make 最大的優(yōu)勢(shì)在于內(nèi)嵌于 Figma 中,和 Figma 工作流的集成相當(dāng)絲滑

除了 prompt、截圖生成網(wǎng)站原型外,F(xiàn)igma Make 最有效的是支持用戶直接粘貼 figma 設(shè)計(jì)文件(即 Figma Frame 來(lái)生成),這也是 Figma 融合工作流優(yōu)勢(shì)最直接的體現(xiàn),在此基礎(chǔ)上,帶來(lái)兩個(gè)很直接的提效場(chǎng)景:

1)對(duì)于前端工程師:直接可以在成型的 figma 設(shè)計(jì)稿基礎(chǔ)上利用 Figma Make 快速產(chǎn)出基礎(chǔ)代碼目錄,大幅提效;

拾象前端工程師一手評(píng)價(jià):

  • 前端代碼(e.g一些css樣式)不參與邏輯,把figma設(shè)計(jì)稿粘貼到Make就可以直接生成好代碼和類名,這個(gè)過(guò)程對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)非常方便;
  • FigmaMake生成的代碼整潔,能夠生成好完整的代碼目錄:如果用cursor寫前端代碼,就只能一個(gè)組件一個(gè)組件的讓它寫,figma可以直接連同需要的組件全部生成好,很清晰的文件結(jié)構(gòu)。

2)對(duì)于設(shè)計(jì)師和產(chǎn)品經(jīng)理等非開(kāi)發(fā)者人群:可以直接基于 Figma 做的 UI 圖/prompt 快速生成交互原型進(jìn)行更內(nèi)部溝通,甚至直接進(jìn)行簡(jiǎn)單的 landing page 開(kāi)發(fā),不再受限于內(nèi)部開(kāi)發(fā)資源協(xié)調(diào)。

雖然 lovable、bolt 等工具也支持導(dǎo)入 Figma 文件,但均需要借助 Anima、Builder.io 等三方插件完成,從便捷性和可靠性上都距離 figma Make 的一鍵導(dǎo)入體驗(yàn)差很遠(yuǎn)。

和工作流的集成還體現(xiàn)在 Figma Make 除了可以單獨(dú)使用外,還可以在其他產(chǎn)品模塊融合,目前已經(jīng)可以在 Figma Site(類 Wix 的建站工具)里進(jìn)行利用 Figma Make 生成組件,使用方式和 Figma Make 完全一致。

Figma Site 也可以調(diào)用 Figma Make 生成組件

在 Figma 官方的產(chǎn)品矩陣中,F(xiàn)igma Make 被放置于所有產(chǎn)品之下,可以合理預(yù)測(cè) Make 代表的 AI 能力未來(lái)會(huì)貫穿 Figma 整個(gè)設(shè)計(jì)協(xié)作流的底層。

 

截止 2025年最新產(chǎn)品矩陣,F(xiàn)igma Make 被放置在底層

完善的 GUI 交互

在局部修改支持上,F(xiàn)igma 的精細(xì)化程度更加完善,且修改方式要多元,考慮到了前端開(kāi)發(fā)工作流上不同人群的使用習(xí)慣和代碼能力:

對(duì)于設(shè)計(jì)師、PM 群體等非專業(yè)開(kāi)發(fā)者人群可以直接通過(guò) GUI 的方式進(jìn)行;

具有代碼能力的用戶也可以通過(guò)局部定位后,直接在對(duì)應(yīng)的代碼塊上進(jìn)行修改。

和 Figma 品牌資產(chǎn)庫(kù)打通

Figma Make 支持用戶導(dǎo)入 Library(可以簡(jiǎn)單理解為品牌資產(chǎn)庫(kù)、設(shè)計(jì)規(guī)則) 作為 guidelines.md 文件,確保生成的內(nèi)容符合品牌 image ,同時(shí)也保證了 AI 生成的可靠性。

和品牌資產(chǎn)的打通對(duì)于那些已經(jīng)在 Figma 上沉淀工作流、設(shè)計(jì)資產(chǎn)的用戶來(lái)說(shuō)意味著使用成本低,相對(duì)應(yīng)地,遷移到新工具上的成本就會(huì)增加,無(wú)形中拉長(zhǎng)的工作流也很難保證設(shè)計(jì)出品的穩(wěn)定。

Library 相當(dāng)于已經(jīng)設(shè)定好的設(shè)計(jì)規(guī)則,F(xiàn)igma Make 的生成和調(diào)整都會(huì)根據(jù)這一規(guī)則來(lái)生成代碼。用戶可以在 guidelines.md 里寫明品牌需要的字體、顏色、日期格式等信息,后續(xù)生成都會(huì)依據(jù)這個(gè)指令來(lái)完成。

定價(jià)優(yōu)勢(shì)

目前 Figma Make 被包含在最貴的 Figma Full Seats 方案中在使用上也包含一定的 AI Credits。2H25 會(huì)推出 AI credits 增購(gòu)定價(jià)方案,同時(shí)具備提價(jià)和按量付費(fèi)屬性。

需要指出的是,因?yàn)?Figma Make 歸屬的 Figma Full Seats 方案中包含的是 Figma 全套產(chǎn)品,因而“性價(jià)比”更高,且對(duì)于已經(jīng)是 Figma 存量用戶他們實(shí)際使用 vibe coding 的成本要更低。例如,在 Professional 用戶如果要從 Dev Seat 升級(jí)到 Full Seat 只需要額外支付 $4/mo,但如果單獨(dú)訂閱 vibe coding 產(chǎn)品則需要支付 $20/mo。

Figma Community

這一優(yōu)勢(shì)類似于模板生態(tài),是 figma design 創(chuàng)立初期就積累的設(shè)計(jì)師、開(kāi)發(fā)者社群資產(chǎn)。

03.Figma 具有推動(dòng)前端設(shè)計(jì)&代碼一體融合的天然優(yōu)勢(shì)

我們看好 Figma 因?yàn)?Figma 不僅僅是一款設(shè)計(jì)軟件,它首先已經(jīng)具備一個(gè)協(xié)作開(kāi)發(fā)操作系統(tǒng)的雛形,又因?yàn)樵?Web/App 設(shè)計(jì)開(kāi)發(fā)場(chǎng)景,在 AI 代碼生成能力迅速提升的當(dāng)下,F(xiàn)igma 是最有潛力推動(dòng)設(shè)計(jì)與代碼一體化融合的生態(tài)玩家。

除了推出核心產(chǎn)品 DevMode、MCP、Figma Make 之外,事實(shí)上,過(guò)去幾年 Figma 在 Config 大會(huì)上的重大發(fā)布都是在打通 designers 和 developers 工作方式上的打通。

以 Figma 經(jīng)典的 Variables (變量)功能舉例,它從功能層面增強(qiáng)了設(shè)計(jì)系統(tǒng)的可控性,讓用戶可以更加構(gòu)建高效組件庫(kù),但本質(zhì)上也是代碼和設(shè)計(jì)的聯(lián)通融合:

在軟件開(kāi)發(fā)中,開(kāi)發(fā)者習(xí)慣使用 Git 等工具查看代碼的變更差異(diff),比如哪些行被添加、刪除或修改。Figma 借鑒了這一理念,將差異視圖引入設(shè)計(jì)流程中,讓設(shè)計(jì)改動(dòng)也能以結(jié)構(gòu)化、可讀的方式被呈現(xiàn)。Figma 的可視化差異視圖的具體功能包括:

  • 高亮顯示修改區(qū)域(新增/刪除/修改的圖層、文本、顏色等);
  • 使用不同的顏色進(jìn)行標(biāo)注(通常是綠色表示新增,紅色表示刪除,藍(lán)色表示修改);
  • 可以對(duì)比當(dāng)前版本與歷史版本之間的差異;
  • 將設(shè)計(jì)改動(dòng)與代碼屬性(如尺寸、顏色、邊距等)一起展示;

同樣,類似在代碼中使用變量來(lái)統(tǒng)一管理數(shù)據(jù),F(xiàn)igma 的 Variables 功能可以讓設(shè)計(jì)師統(tǒng)一設(shè)置顏色、尺寸、文本等屬性,一旦修改,所有使用這個(gè)變量的地方會(huì)自動(dòng)更新。

Figma 界面

Config 2025 發(fā)布的 Grid 功能讓設(shè)計(jì)師可以像寫 CSS Grid 一樣在畫板中構(gòu)建復(fù)雜自適應(yīng)柵格:設(shè)計(jì)師可以定義多列布局中的元素跨列跨行、設(shè)置自動(dòng)伸縮的行列尺寸,以及控制元素在網(wǎng)格中的層疊順序等。Grid 與 Dev Mode 深度集成,開(kāi)發(fā)者在 Dev Mode 中查看設(shè)計(jì)時(shí)可直接獲得對(duì)應(yīng)的 CSS Grid 代碼片段。

而在這之前,設(shè)計(jì)工具主要支持單向的垂直或水平 Auto Layout,對(duì)于復(fù)雜儀表盤、圖庫(kù)等二維布局捉襟見(jiàn)肘。開(kāi)發(fā)早已習(xí)慣使用 CSS Grid 構(gòu)建響應(yīng)式界面,引入 Grid 可以讓設(shè)計(jì)稿的布局表達(dá)能力追上前端實(shí)現(xiàn)能力。設(shè)計(jì)師能準(zhǔn)確設(shè)計(jì)出跨終端的復(fù)雜網(wǎng)格布局,開(kāi)發(fā)者則可直接復(fù)用 Figma 給出的 Grid 代碼,實(shí)現(xiàn)所見(jiàn)即所得的還原。

現(xiàn)在可以直接查看并復(fù)制設(shè)計(jì)中所見(jiàn)的實(shí)際 CSS。圖層順序、響應(yīng)式設(shè)置和堆疊邏輯都已以代碼片段形式呈現(xiàn),開(kāi)箱即用。

隨著 GenAI 時(shí)代的到來(lái),LLM前端代碼生成能力的迅速提升,將大大加速前端產(chǎn)品“設(shè)計(jì)與代碼一體化”的趨勢(shì),整個(gè)前端產(chǎn)品開(kāi)發(fā)的工作流也將會(huì)隨之改變。我們認(rèn)為未來(lái)的前端產(chǎn)品協(xié)作系統(tǒng),大概率會(huì)走向”GUI+GenAI 能力”的結(jié)合,而非單純按所謂GenAI 或者 GUI 軟件劃定界限。

該系統(tǒng)的核心價(jià)值主張,仍將是服務(wù)于整體協(xié)作和成果產(chǎn)出的迭代效率,而因?yàn)榇a實(shí)現(xiàn)這一環(huán)節(jié)的瓶頸被大幅提升,在這個(gè)過(guò)程中,創(chuàng)意的價(jià)值會(huì)更加凸顯。Figma已經(jīng)穩(wěn)固占據(jù)創(chuàng)意端和協(xié)作工作流,結(jié)合Figma Make賦能全局產(chǎn)品的方向,我們看好Figma在新時(shí)代中會(huì)占據(jù)更好的生態(tài)位置,有可能走向前端協(xié)作開(kāi)發(fā)OS的宏大愿景。

04.挑戰(zhàn)與風(fēng)險(xiǎn)

中短期:1-2 年后的增長(zhǎng)中樞

現(xiàn)階段 ARR 超過(guò) $10K 的客戶 NDR 為 132%,但這是因?yàn)?2025 年 3 月份提價(jià)帶來(lái)的偏一次性提升,公司也主動(dòng)提示了一年后漲價(jià)周期 NDR 可能會(huì)有所下滑。

長(zhǎng)期挑戰(zhàn):AI 驅(qū)動(dòng)設(shè)計(jì)和代碼生成一體化趨勢(shì)下 Figma 面臨的競(jìng)爭(zhēng)挑戰(zhàn)

GenAI 會(huì)對(duì)目前的前端 workflow 及團(tuán)隊(duì)構(gòu)成有很大顛覆,目前也已經(jīng)看到市場(chǎng)上有對(duì)前端開(kāi)發(fā)者數(shù)量因此會(huì)減少的擔(dān)憂。

這一擔(dān)心不無(wú)道理,前端代碼實(shí)現(xiàn)效率是 LLM 能力范圍內(nèi)確定性的方向,我們認(rèn)為前端設(shè)計(jì)和產(chǎn)品一體化趨勢(shì)將會(huì)逐步明確,目前的產(chǎn)品開(kāi)發(fā)工作流必將改變。長(zhǎng)期看,可能帶來(lái)人數(shù)減少。但短期內(nèi),AI 帶來(lái)的提效效應(yīng)遠(yuǎn)高于人力取代,在復(fù)雜產(chǎn)品開(kāi)發(fā)和維護(hù)迭代上,仍舊需要團(tuán)隊(duì)協(xié)作,如同前面提到的, Figma 從最上游的設(shè)計(jì)圖協(xié)作切入產(chǎn)品原型生成的工作流,要比 Lovable 等從生成切入設(shè)計(jì)協(xié)作更順利。

但從長(zhǎng)遠(yuǎn)來(lái)看,F(xiàn)igma 的任務(wù)是搶在其他人有機(jī)會(huì)之前取代自己,就目前來(lái)看 ,F(xiàn)igma Make 也在正確的迭代路徑上。

作者:Siqi,Xiaoyang,Isa 編輯:Siqi

本文由人人都是產(chǎn)品經(jīng)理作者【海外獨(dú)角獸】,微信公眾號(hào):【海外獨(dú)角獸】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!