Figma Make AI 原型生成：從文字提示到互動式 React 應用

老實說，第一次看到 Figma Make 的 demo 時，我整個人是愣住的。你只要打幾句話描述你想要的介面，它就能直接生成一個可以互動的 React 應用？這也太誇張了吧。但實際用了一陣子之後，我發現它確實改變了我對「設計到開發」這段流程的想像。今天就來好好聊聊 Figma Make AI 原型生成的完整體驗。

Figma Make 到底是什麼？

Figma Make 是 Figma 在 2025 年底推出的 AI 原型生成功能，簡單來說就是讓你用自然語言描述想要的 UI，然後 AI 幫你直接產出可互動的設計稿。跟以前那種只能生成靜態畫面的工具完全不同，Figma Make 產出的東西是真的能點、能滑、能跑動畫的。

它背後整合了 Figma 自家的設計系統，所以生成出來的元件不是那種亂七八糟的拼貼，而是有結構、有層級的設計稿。如果你之前有用過 Figma Make 的元件系統整合功能，你會發現 Make 生成的元件跟你既有的 Design System 可以無縫銜接，這點真的很加分。

文字提示到 React 應用的完整流程

好，來講最核心的部分。Figma Make 的文字到 React 應用流程大概分成這幾步：

• Step 1：輸入文字提示 — 你在 Make 的對話框裡描述你想要的介面，例如「一個帶有側邊欄導航的儀表板，包含數據圖表和用戶列表」
• Step 2：AI 生成 First Draft — Make 會在幾秒鐘內產出一份設計稿，包含完整的元件結構和基本互動
• Step 3：微調與迭代 — 你可以用自然語言繼續修改，像是「把側邊欄改成深色主題」或「加一個搜尋功能在頂部」
• Step 4：導出 React 程式碼 — 確認設計稿沒問題後，直接導出可運行的 React 元件程式碼

整個流程最快十分鐘就能完成一個原型，這在以前是不敢想的事情。而且產出的 React 程式碼品質還不錯，不是那種只能看不能用的垃圾 code。

First Draft AI 設計稿的實際體驗

First Draft 是 Figma Make 裡面我最喜歡的功能之一。它不只是幫你畫一個靜態的線框圖，而是直接給你一份帶有視覺設計、排版邏輯、甚至微互動的完整設計稿。

我實際測試過用它來生成一個電商產品頁面，結果它連商品圖片的佔位區塊、加入購物車按鈕的 hover 效果、還有響應式斷點都考慮到了。當然，AI 生成的東西不可能百分之百完美，有時候排版會有點奇怪，顏色搭配也不一定符合品牌調性。但作為一個起點，First Draft 省下的時間真的非常可觀。

比較值得注意的是，First Draft 對於複雜的表單互動還是有點力不從心。如果你的需求涉及到多步驟表單、條件式欄位顯示這類比較進階的互動，最好還是手動調整。不過對於一般的展示型頁面，它的表現已經相當成熟了。

MCP 伺服器串接開發工具

這是 Figma Make 真正讓我覺得厲害的地方。透過 MCP（Model Context Protocol）伺服器，Make 可以直接跟你的開發環境對接。什麼意思？就是你在 Figma 裡面修改設計，對應的程式碼可以即時同步到你的 IDE 裡。

目前支援的開發工具包括 VS Code、Cursor 還有 WebStorm。設定的方式也不難，基本上就是安裝一個 MCP 插件，然後在 Figma 那邊授權連接就好了。連接成功之後，你可以：

• 在 Figma 修改元件樣式，IDE 裡的程式碼自動更新
• 在 IDE 修改程式碼，Figma 的設計稿也會反映變化
• 設計師和開發者可以同時工作，不用再來回丟 Figma 連結

說真的，這個雙向同步的體驗讓我想到以前用 Dreamweaver 的年代（好吧我暴露年齡了），但 Figma 的實作顯然高明很多。之前 Figma AI 自動生成 UI 的功能已經很驚艷了，加上 MCP 之後又是另一個層次。

AI 圖片編輯工具：Vectorize 等新功能

除了原型生成之外，Figma Make 還附帶了一系列 AI 圖片編輯工具。其中最實用的大概就是 Vectorize 了——它可以把點陣圖直接轉換成向量圖形，而且轉出來的品質比我用過的其他工具都好。

其他值得一提的 AI 圖片功能還有：

• 背景移除 — 一鍵去背，邊緣處理得很乾淨
• 圖片擴展 — 用 AI 把圖片延伸到你需要的比例
• 風格轉換 — 把照片轉成插畫風或其他藝術風格

這些功能單獨拿出來可能都不算新鮮，但整合在 Figma 裡面，不用再切來切去開一堆工具，工作效率確實提升不少。

Figma Sites：設計直接變網站

Figma Sites 是另一個跟 Make 搭配很好的功能。簡單講就是你在 Figma 裡設計好的頁面，可以直接發佈成一個真正的網站。不需要寫任何程式碼，也不需要用什麼 no-code 工具匯入匯出。

它特別適合用來做 landing page、作品集或是活動頁面這類相對簡單的網站。搭配 Make 的 AI 原型生成，你甚至可以用文字描述生成設計，然後直接發佈——整個過程可能二十分鐘都不用。

但老實說，Figma Sites 目前還不太適合做比較複雜的 web app。它的互動能力有限，也不支援後端邏輯。如果你的需求比較進階，還是乖乖用 React 導出比較實在。

Figma Make vs Google Stitch 比較

很多人會拿 Figma Make 跟 Google Stitch 來比較，畢竟兩者都是 AI 輔助的 UI 設計工具。我兩個都用過一段時間，簡單分享一下心得。

Google Stitch 的強項在於它跟 Google 生態系的整合，如果你主要用 Material Design 或是 Flutter，Stitch 的產出會比較符合你的需求。但在設計彈性和元件系統的完整度上，Figma Make 明顯勝出。

另外，Figma Make 的協作體驗也好很多。畢竟 Figma 本身就是以協作為核心的工具，多人同時編輯、即時留言回饋這些功能都很成熟。Stitch 在這方面還有不少進步空間。如果想了解更詳細的比較，可以看看這篇 Google Stitch AI 設計工具完整比較。

寫在最後

Figma Make AI 原型生成最大的價值，不是取代設計師或工程師，而是把那些重複性高、耗時但不太需要創意的工作自動化掉。從文字提示到互動式 React 應用，這個流程以前需要好幾天，現在可能半天就搞定。

當然，AI 生成的結果還是需要人來把關和調整。但作為一個加速器，Figma Make 確實讓「從想法到原型」這件事變得前所未有地快。如果你還沒試過，強烈建議去玩玩看，體驗一下未來設計工作流的樣子。