就在最近，figma上線了一個(gè)新功能，以Claude4.0為基礎(chǔ)的figmamake正式上線了，這個(gè)功能的特點(diǎn)是產(chǎn)品經(jīng)理與設(shè)計(jì)師不僅可以進(jìn)行編輯頁面，同時(shí)還能夠更新代碼，不僅是做原型設(shè)計(jì)。

并且現(xiàn)在支持鏈接Superbase，直接鏈接數(shù)據(jù)庫，讓前后端可以進(jìn)行交互，從而真的是一個(gè)APP產(chǎn)品了，也不是一個(gè)高保證原型設(shè)計(jì)了。

如下是我利用1小時(shí)左右，基于產(chǎn)品經(jīng)理的基本功來完成生成的APP，包含了如下的功能。

這幾乎是產(chǎn)品經(jīng)理春天，并且figma make是支持協(xié)作，讓設(shè)計(jì)師也可以團(tuán)隊(duì)編輯，一遍生成的同時(shí)，一邊修改自己的產(chǎn)品邏輯。

不過現(xiàn)在figma make的功能目前是收費(fèi)的，20美元，我也第一時(shí)間在體驗(yàn)完5次之后，就充值成為付費(fèi)用戶了，幾乎沒有報(bào)錯(cuò)，相比于之前分享的onlook，figmamaker的產(chǎn)品還不是靜態(tài)頁面，還是包含了JS組件的，也就是基于react框架或VUE框架，可以生成的前端頁面，可以反復(fù)使用。

如下是有JS的前端頁面與靜態(tài)頁面的區(qū)別

Figma make不僅降低了開發(fā)成本，并且一個(gè)產(chǎn)品支持反復(fù)迭代，新增功能與做功能的增刪改查。

要注意的是，F(xiàn)igma make還可以允許產(chǎn)品經(jīng)理與設(shè)計(jì)師制定相關(guān)開發(fā)規(guī)范，讓代碼可以有更高的復(fù)用性

以上就是figmamake的產(chǎn)品使用，我們就快速完成了這個(gè)APP如下

以上就是部分的功能，通過以上的頁面可以看到figmamake的能力，通過surpbase，還能夠鏈接數(shù)據(jù)庫，從而讓產(chǎn)品真的變成一個(gè)應(yīng)用。

figma通過supabase之后，你就可以將應(yīng)用發(fā)給你的用戶來真正使用了，就是有真正數(shù)據(jù)的，從而不用擔(dān)心是一個(gè)假的前端服務(wù)了。

選擇之后用戶就可以新建數(shù)據(jù)庫，從而讓數(shù)據(jù)可以存儲(chǔ)在數(shù)據(jù)庫中，當(dāng)然這個(gè)數(shù)據(jù)庫是免費(fèi)的，你在figmamake里面就可以直接選創(chuàng)建數(shù)據(jù)庫的密碼，你如果沒有賬戶，figma也會(huì)提示讓你創(chuàng)建賬戶

以上就是figmamake的產(chǎn)品界面，要注意在figmamake不僅是做UI設(shè)計(jì)到原型設(shè)計(jì)，而是的確將將研發(fā)速度提升了。因?yàn)閺漠a(chǎn)品研發(fā)的角度來說，需求不清楚往往是最難得，而現(xiàn)在這個(gè)就可以快速提升從需求翻譯到原先設(shè)計(jì)，同時(shí)有了前端代碼與數(shù)據(jù)庫supabase，就可以完成一個(gè)真正的產(chǎn)品實(shí)現(xiàn)

并且figmamake為了解決幻覺問題，支持在生成好的前端頁面像素級(jí)的二次修改，允許用戶可以通過figma圖層編輯或者AI再次生成來完成。

在AI生成完成后，就可以直接調(diào)整對(duì)應(yīng)的頁面內(nèi)容，選擇其對(duì)應(yīng)的不同部位就可以再次修改生成，從而快速完成二次編碼。

figma maker預(yù)示著前后端代碼全程零code 在今年就將實(shí)現(xiàn)

通過figmamake，產(chǎn)品經(jīng)理真的開始實(shí)現(xiàn)成為程序員了，從原型設(shè)計(jì)到編碼再到數(shù)據(jù)庫， 是一個(gè)徹底的改變。

這就像產(chǎn)品經(jīng)理使用原型模板一樣，效率不僅提升，從而降低了需求不清晰程度。

今天的分享就在這里

“關(guān)注我，一個(gè)產(chǎn)品經(jīng)理的創(chuàng)業(yè)故事“

產(chǎn)品經(jīng)理和設(shè)計(jì)師的Cursor學(xué)習(xí)課程：AI編碼工具使用與學(xué)習(xí)

最后，我?guī)е鴪F(tuán)隊(duì)使用的產(chǎn)品經(jīng)理的“Cursor工具：Onlook”已經(jīng)上線,我在業(yè)余時(shí)間開設(shè)了這套工具的課程，你可以報(bào)名7月31日開班的B端產(chǎn)品經(jīng)理訓(xùn)練營學(xué)習(xí)與獲得這個(gè)工具。

這款工具已經(jīng)是我們團(tuán)隊(duì)普遍使用的了，讓產(chǎn)品經(jīng)理在不會(huì)代碼的情況下，完成移動(dòng)端、網(wǎng)頁端、以及B端類的產(chǎn)品設(shè)計(jì)與前端編碼，從而大大減少自己的開發(fā)成本，讓你成為一個(gè)產(chǎn)品經(jīng)理的前端開發(fā)專家。

下面這個(gè)網(wǎng)頁是是利用這款產(chǎn)品經(jīng)理的Cursor工具實(shí)現(xiàn)的，你只需要懂產(chǎn)品經(jīng)理的技能，就可生成。

課程訓(xùn)練營介紹

7月31日開班，29期B端AI產(chǎn)品經(jīng)理訓(xùn)練營

AI B端產(chǎn)品經(jīng)理訓(xùn)練營課程表

報(bào)名咨詢課程助理