Figma Make 是甚麼？
Figma Make 是一個直接內置於 Figma 平台的 AI app builder，能夠將文字提示轉化為一個可運作、以程式碼為基礎的前端應用程式，而無需你離開 Figma 工作區或另外設定其他工具。
它會產生 React 應用程式，附有完整原始碼存取、 自動版本歷史，以及即時預覽 URL；而且它與其他 AI builder 不同之處在於，你可以選擇實際執行工作的基礎模型：Claude Sonnet 4.6、Gemini 3 Flash、Gemini 3.1 Pro，或 GPT-5.5，而不是被鎖定在單一模型，且看不到背後到底在運行甚麼。
輸出結果不是 mockup 或設計檔，而是實際可編輯的程式碼，你可以檢視、修改，並推送到 GitHub。
Figma Make 適合邊個？
- 已經使用 Figma 的產品設計師。 Make 直接置於你已經在用的工具內，所以毋須學習新平台，也不用在現有訂閱之上再疊加額外開支。
- 需要快速做 demo 的非技術創業者。 一個包含角色式存取與真實數據的複雜多頁面應用程式，可在 10 分鐘內完成，快到足以拿去首次投資者會議展示。
- 需要「用實物說明」的產品經理。 Figma Make 能產出你可以實際交給持份者並帶著他們逐步演示的東西，而不是一份屏幕 PDF。
- 想要有可運作骨架的開發者。 生成的程式碼是乾淨的 TypeScript React，而免費計劃已可存取完整原始碼，這令它成為一個真正的起點，而不是一次性原型。
Figma Make 的優點與缺點
- 只用一個提示就能建立複雜的多頁面應用程式
- 免費計劃包括完整原始碼存取
- 可選擇你的 AI 模型：Claude、Gemini 或 GPT
- 自動版本歷史會保存每次建構迭代
- 無需額外提示即可生成角色式身份驗證
- 原生內置 GitHub 與 Supabase 整合
- 視覺編輯器與程式碼編輯器可在同一工作區使用
- 首次建構會出現程式碼警告
- 每月免費額度很快就會用完
- 自訂域名需要付費 Figma 計劃
評分拆解
以下分數反映 Figma Make 目前在公開 beta 版本中的表現。對於處於這個階段的產品來說，輸出質素比我原本預期高得多；而對於已經在使用付費 Figma 計劃的團隊來說，這個價值計算幾乎無可挑剔，因為不需要額外付費。
| 功能 | 分數（滿分 10） | 評分原因 |
|---|---|---|
| 易用性 | 9.5 | 零設定、以提示為先的入口、雙重編輯路徑，以及 8 分鐘建構週期，使它成為其中一個最不費力上手的 AI builder。 |
| 功能與實用性 | 9.8 | 角色式身份驗證、Stripe 付款 UI、多圖表報告、管理員控制台、模型選擇，以及完整 REST API 參考，全部都能從單一提示生成。 |
| 設計與自訂化 | 9.4 | 預設視覺輸出乾淨專業，而且即使在免費計劃中，也可同時使用點選式視覺編輯器及完整原始碼存取。 |
| 性價比 | 9.4 | 免費層級可存取完整程式碼，的確相當少見，而付費計劃用戶則可在現有 Figma 訂閱內使用 Make，而非另加一項費用。 |
| 效能與可靠性 | 9.9 | 8 分鐘內就能做出一個多頁面、具角色感知的應用程式，並帶有 Stripe UI 與管理員控制台，這是我測試過最快的建構到可用輸出比率。 |
| 整體 | 9.6 | 一款出色的 beta 產品，已經在輸出質素和功能深度上超越了許多更成熟的 AI app builder。 |
Figma Make 功能
- 10 分鐘內完成 prompt-to-app 建構
- 支援多模型選擇，包括 Claude、Gemini 和 GPT
- 自動生成角色式用戶身份驗證
- 可點選選取的視覺編輯器，並提供內嵌樣式控制
- 免費層級即可存取完整 React 原始碼
- GitHub 與 Supabase 整合無需額外設定
- 一鍵發佈到 figma.site 子網域
我對 Figma Make 的誠實評測：實測後的發現
起始畫面一開始就不會阻礙你
登入頁面就是一個單一提示輸入框，旁邊有一句簡短標語：「Make your ideas real with AI. Start with a design and prompt your way to a functional prototype, fast.」輸入框下方有三個建議起點：
- Onboarding flow
- Data dashboard
- Gradient gallery
你可以完全忽略這三項，直接輸入任何你想要的內容。
我完整提交了以下提示：
「Create a property management platform for landlords and tenants. Include user authentication, property listings, lease management, rent payments, maintenance requests, document uploads, messaging, notifications, admin dashboard, reporting, Stripe integration, PostgreSQL database, REST API, responsive design, and deployment instructions. The application should be production-ready and scalable.”
工具毫無阻礙地接受了提示，並直接開始建構。沒有 project type 選擇器，沒有 template gallery，也沒有任何架構預設設定。
結論： 入口的低阻力程度幾乎是我測試過的 AI builder 當中最接近零摩擦的。代價是，在沒有前置引導結構的情況下，含糊的提示只會產生含糊的輸出。你最終得到甚麼，完全取決於你輸入了甚麼。
註冊速度很快，而且不會在輸出前設下付費牆
在登入前按下箭頭按鈕會觸發一個「Welcome to Figma」彈出視窗。兩個選項如下：
- Continue with Google （一鍵完成，少於 10 秒）
- Continue with email （輸入電郵並驗證，總共少於 30 秒）
兩條路徑都會把你帶入 Figma Make 工作區，而你的建構已經排隊開始。此時沒有計劃選擇畫面、沒有信用卡提示，也沒有升級牆。免費 Starter 計劃會自動啟用。
如果你已經有 Figma 帳戶，這個彈窗不會出現，你會直接進入 builder。
建構歷時 8 分鐘，而且會清楚告訴你它正在做甚麼
工作區左側是聊天欄，右側是即時預覽。預覽會顯示佔位文字「Building your idea…」，之後再顯示「Working out the details…」，隨著工具進度推進而變化。
與一般載入畫面不同之處在於，聊天欄中的推理面板會即時記錄工具的思考過程。
在我的建構過程中，推理面板顯示了：
- 工具在寫第一行程式碼之前先呼叫了 theme tool
- 處理提示時記錄了「Worked with 3 files」
- 推理紀錄描述了完整方法：先映射剩餘功能（物業篩選、租約管理、付款歷史、維修請求、訊息、通知，以及管理員儀表板），然後說明會先以 type definitions 結構化 React component，再建立包含真實細節的 mock data，最後處理整個角色式檢視的導覽與狀態管理
- 在推理下方出現狀態訊息：「Writing the component structure…」
這個順序很重要。工具先規劃 type definitions，然後才寫 UI，之後再加入真實 mock data，最後圍繞它建立導覽。這是一種有結構的方法，而不是隨機生成。
建構時間：3:58 PM 至 4:06 PM。8 分鐘。
聊天面板底部的模型選擇器，讓你可在開始前選擇用哪個 AI 來建構，或者在不同建構之間切換：
| 模型 | 描述 |
|---|---|
| Default | 由 Figma 推薦（具體模型未公開） |
| Claude Sonnet 4.6 | 平衡、有效率 |
| Gemini 3 Flash | 快速、適合反覆迭代 |
| Gemini 3.1 Pro | 深入、富創意 |
| GPT-5.5 | 有能力、速度快 |
能夠在不離開工具或不從頭重建的情況下，從快速迭代模型切換到更深入的模型，是一項很有意義的工作流程優勢。
模型選擇器旁邊還有一個 Build/Plan mode toggle：
| 模式 | 作用 |
|---|---|
| Build | 邊建構邊迭代 |
| Plan | 先就複雜工作對齊方向，並在寫程式碼之前規劃架構 |
對於像我這樣詳盡的提示，Plan mode 很可能會產生更整潔的首次建構，而且警告更少。我使用的是 Build mode，並在第二輪處理警告。
完成後的輸出自動命名為 PropVault，並展現出相當自信的完成度
完成後的應用程式，工具在未經要求下將其命名為 PropVault，是一個多頁面的物業管理平台，擁有一致的視覺識別、深海軍藍側邊欄、乾淨字體，以及登入畫面上的情境式社會證明。登入畫面顯示：
- 左側深色面板包含 PropVault 標誌、標語（”Property management, simplified.”），以及三個模擬統計：86 properties managed、1,240 active tenants、$2.1M collected monthly
- 右側面板設有 Sign In / Create Account 分頁、預填電郵（marcus@propvault.io）及密碼，以及三個角色選擇按鈕：Landlord、Tenant、Admin
- 頁尾備註：「Demo: click a role above, then sign in」
左側導覽中的每個畫面都會打開一個可運作、已填充內容的屏幕。以下是整個應用程式建立出的內容：
| 畫面 | 建構內容 |
|---|---|
| Dashboard | 四個 KPI 卡片（月收入、入住率、待處理請求、總物業數）、12 個月收入對比支出折線圖並附「Live」標籤、最近活動動態、逾期付款提示附 Send Reminders 按鈕、即將到期租約並附個別 Renew 按鈕 |
| Properties | 附篩選功能的物業列表 |
| Leases | 附狀態追蹤的租約管理 |
| Payments | 附狀態標籤的付款歷史表格、Stripe 支援的安全付款彈窗 |
| Maintenance | 看板（Open / In Progress / Completed），附優先級標籤與供應商指派；租戶提交表格 |
| Messages | 雙欄聊天 UI，配有真實對話串及按 Enter 發送支援 |
| Documents | 拖放上載區、分類篩選標籤、帶懸停操作的檔案格狀檢視 |
| Reports | 長條圖、水平入住率圖、維修餅圖、KPI 指標表格、日期範圍切換（3m / 6m / 12m） |
| Admin Console | 用戶管理表格、系統健康與整合面板、完整 REST API 參考、部署指引（PostgreSQL、Docker、Vercel、Stripe webhook 設定） |
各個畫面之間的數據都是模擬的。後端連接需要先完成設定，資料才會真正儲存或讀取。你在 8 分鐘後得到的是一個具備生產品質的前端骨架，具有足夠的畫面覆蓋率和數據密度，可以作為可運作 demo 進行展示。
三個用戶角色的範圍都設定正確，而且各自的細節令人印象深刻
角色式存取控制是 AI builder 最常偷工減料的地方。Figma Make 沒有這樣做。每個角色登入後都會進入完全不同的體驗，擁有自己的導覽、自己的數據視圖，以及自己的範圍。
| 角色 | 導覽項目 | 儀表板重點 |
|---|---|---|
| Landlord (Marcus Hewitt) | Dashboard, Properties, Leases, Payments, Maintenance, Messages, Documents, Reports | 跨所有物業與租戶的平台級指標 |
| Tenant (Priya Nair) | Dashboard, Leases, Payments, Maintenance, Messages, Documents | 只屬於此租戶的個人指標 |
| Admin (Cassandra Voss) | 所有 Landlord 項目外加 Admin | 與 Landlord 儀表板相同，但可存取 Admin Console |
Landlord 儀表板詳情：
- Monthly Revenue: $41,900（Apr 2024，較上月 +2.8%）
- Occupancy Rate: 88%（76/86 units，較上月 +1.2%）
- Open Requests: 5 張維修單
- Total Properties: 6 properties，86 total units
- Revenue vs. Expenses 圖表涵蓋 May 至 April（12 個月）
- Recent activity feed：租金收款、逾期付款、新維修請求、即將到期租約、租戶訊息
- 提示橫幅：「2 overdue payments require attention」，並列出 Tomás Reyes（$2,100）與 Fatima Al-Sayed（$2,650），附 Send Reminders 動作按鈕
Tenant 儀表板詳情（Priya Nair）：
- Next Payment: $1,850，於 April 1, 2024 到期
- Lease Status: Active，於 August 31, 2024 結束
- Open Requests: 1（HVAC repair pending）
- Messages: 2 unread
- 付款歷史顯示 Maple Grove #4B、$1,850、Paid
- 維修請求顯示「HVAC not cooling」，附 In Progress 標籤，日期為 March 28, 2024
Tenant 角色下的 Payments 畫面在按下「Pay Now」時會打開 Stripe 品牌風格的彈窗：
- 標題：「Secure Payment. Powered by Stripe.」
- 付款項目：April Rent, Maple Grove #4B, $1,850.00
- Card Number 欄位（已預格式化）
- Expiry（MM/YY）及 CVC 欄位
- Pay 按鈕預先標示：「Pay $1,850.00」
- 頁尾：「256-bit SSL encryption · PCI DSS compliant」
Admin Console（Cassandra Voss）：
Admin Console 有四個分頁（Users、System、API Docs、Deployment），並會先打開用戶管理表格。
每一行都有 edit 與 remove 動作按鈕。右上角有 Invite User 按鈕。Tomás Reyes 正確地被標記為 Delinquent，與 Landlord 儀表板上的逾期付款提示一致。
編輯同時提供兩套工具，而且兩者都可免費使用
建構完成後，系統同時提供兩條編輯路徑，而且都沒有被付費牆擋住。
路徑 1：視覺編輯器
- 點擊即時預覽中的任何元素即可選取，並開啟浮動編輯條
- 編輯條包括：字體家族選擇器、字體大小（附減號與加號控制）、粗體、斜體、文字對齊、寬度控制、間距，以及元素刪除
- 被選取的元素會同時加入聊天輸入欄，因此點擊元素再輸入文字，會在對該元素已有上下文的情況下送出變更請求
- 選取容器時，工具列上方會顯示精確的 component type 與巢狀結構（例如「div x 4」），無需開啟程式碼也能知道詳細版面上下文
視覺選取器與聊天輸入欄之間的連動，是這套編輯工作流程最實用的部分。
你毋須在兩者之間二選一。你可以先點擊以識別元素，再在聊天欄輸入你想更改的內容，AI 便會在完全知道你選取了哪個 component 的情況下套用修改。
路徑 2：程式碼編輯器
點擊工作區頂部的 code icon 便會打開完整 React 原始碼。檔案結構：
src/
app/
components/
App.tsx (1,300+ lines)
styles/
fonts.css
globals.css
index.css
tailwind.css
theme.css
guidelines/
ATTRIBUTIONS.md
default_shadcn_theme.css
package.json
pnpm-workspace.yaml
postcss.config.mjs
vite.config.ts
App.tsx 以命名 view functions 組織，像 DashboardView、ReportsView、MaintenanceView 等，並以章節註解分隔每個畫面。
程式碼可讀、結構清晰，並可直接在瀏覽器內編輯。毋須下載或使用外部 IDE。這份完整原始碼存取在免費計劃中即可使用。
透過視覺編輯器、聊天，或程式碼編輯器所作出的改動，都會進入同一個即時預覽，並即時反映。
首次建構有十多個警告，但可一鍵準確修正
初次建構完成後，聊天面板底部出現橫幅：「10+ warnings」，旁邊有一個「Fix for me」按鈕和關閉圖示。
打開瀏覽器 console（可透過工作區中的 console 圖示存取）後，可見問題來源：Recharts 圖表函式庫中的重複 SVG gradient ID。
原因是：Dashboard 和 Reports 區段都以 SVG 元素註冊了相同的通用漸層名稱（revGrad、expGrad）。Recharts 會把 gradients 以 ID 註冊到 SVG 命名空間中，因此來自多個圖表實例的通用名稱會在同一文件內產生衝突。console 顯示了一長串壓縮 JavaScript 參考，全部都追溯到這個衝突。
點擊「Fix for me」後，系統會觸發第二輪建構。工具識別出三個具體問題，並套用針對性修正：
- Dashboard AreaChart：將漸層 ID 從通用的 revGrad / expGrad 改為唯一識別碼 dash-area-rev / dash-area-exp，以避免命名空間衝突
- Occupancy BarChart：將 cell keys 從數字索引（key={i}）改為使用物業名稱的穩定字串鍵（key={\occ-${entry.property}`}`），令每個 cell 都有穩定且唯一的 key
- Maintenance PieChart：使用 entry name 套用同樣的 key 修正（key={\pie-${entry.name}`}`）
這次建構會自動儲存為 Version 2。版本歷史面板（透過點擊工作區頂部的版本標籤存取）顯示了清晰紀錄：
| 版本 | 標籤 | 時間 |
|---|---|---|
| Version 1 | Property Management Platform | 4:06 PM |
| Version 2 | Resolve code warnings | 4:19 PM |
第二輪完成後，console 只顯示乾淨的 vite hot-reload 訊息，而警告橫幅亦消失了。透過版本歷史面板回滾到 Version 1 只需一個點擊。
從首次建構到清理乾淨 console 的完整修正流程只用了 13 分鐘，而且完全毋須手動編輯程式碼。
設定面板的深度比你對 beta 工具的預期更高
設定面板可透過右上角的齒輪圖示進入。下拉選單把選項分成兩組：
Make settings：
- General
- Domains
- Fonts
- Chat preferences
- Audio
Integrations：
- GitHub
- Supabase
- Adjust guidelines
General settings 涵蓋發佈狀態及 SEO 設定：
| 設定 | 細節 |
|---|---|
| Status | Not published（可在內聯使用 Publish 按鈕） |
| Title | 可編輯項目名稱 |
| Meta description | 根據建構上下文自動填入 |
| Language | ISO language code 欄位 |
| Google Analytics ID | 連接 GA4 property 以追蹤流量 |
| Exclude from search engine results | 核取方塊，免費計劃下預設已勾選 |
| Clear chat context | 永久清除 Make 的對話記憶；聊天歷史記錄仍會顯示 |
Clear chat context 這個選項值得理解。它會清除 AI 對建構對話的記憶，但不會移除可見的聊天記錄。當一段很長的建構對話令 AI 在新變更請求時過度依賴先前上下文，這功能就很有用。
Domains settings 顯示：
- Base domain: example.figma.site（免費子網域，發佈後會生效）
- Connected domains: 可從第三方供應商加入自訂域名（需要付費計劃）
Integrations：
- GitHub: 程式碼匯出與儲存庫同步
- Supabase: 連接真正的後端與資料庫，以取代模擬數據層
- Adjust guidelines: 設定 AI 在進行變更時遵循的自訂指示，包括元件庫慣例、命名標準，或你希望在每次建構與迭代中都被遵守的設計限制
Adjust guidelines 這個選項是一項相當有意義的新增功能，但在工具的其他部分並不算顯眼。它讓你可以在建構開始前先定義 AI 的行為方式，而不是在事後修正不想要的模式。
發佈只需一個步驟，而免費計劃的 URL 看起來像真正獨立應用程式
點擊右上角的 Publish 按鈕會打開一個面板，涵蓋上線所需的一切：
| 欄位 | 細節 |
|---|---|
| Title | 可編輯項目名稱 |
| URL | example.figma.site |
| Status | Not published |
| Feature on Community | 切換以將應用程式列入 Figma Community 圖庫 |
Feature on Community 切換會展開預覽區段，顯示應用程式在 Figma Community 中與其他已發佈應用程式並列時的樣子。
由此：
- 你可以選擇最多五個標籤來分類應用程式（選項包括 Apps、Dashboards，以及按下「Show more」後可見的更多標籤）
- 「Show chat history」核取方塊可控制建構對話是否對 Community 觀眾可見
- 附註確認：「By publishing to Community, you agree to Figma’s Creator Agreement」
發佈後，figma.site URL 會在獨立瀏覽器視圖中開啟應用程式。畫面上沒有 Figma 編輯器外框、沒有浮水印，也看不到任何「built with Figma Make」標記。它以真正的獨立網頁應用程式形式載入並運作，而不是被框住的原型。
免費計劃發佈包括：
- 可分享的 figma.site 子網域 URL
- 沒有可見 Figma 品牌的獨立應用程式視圖
- 可將應用程式列入 Figma Community
付費計劃發佈額外提供：
- 來自第三方供應商的自訂域名
- 更多 AI credits，以便進行更多建構與迭代
Figma Make 定價與方案
Figma Make 並非作為獨立產品出售。使用權包含在 Figma Full seat 計劃內，而 AI credits 會在整個 Figma AI 功能之間共享，不僅限於 Make。Figma Make 的一次建構，會從與 Figma Design 的 AI 工具、影像編輯，以及平台上任何其他 AI 驅動操作相同的每月配額中扣除。
免費 Starter 計劃包括 Figma Make 使用權，但每月額度相當低，一個複雜建構就足以消耗掉很大部分。Starter 計劃適合評估工具和進行一次性測試，不適合把 Make 作為常規建構流程的一部分。
付費計劃按 seat 類型劃分。Professional、Organization 和 Enterprise 層級的 Full seats 都包括更多每月 AI credits，而且每個層級的月配額都會逐步提升。如果你本身是因為 Design 而訂閱付費 Figma 計劃，Make 已經包含在內，不需要另外付費，只會使用你現有的 credits 配額。
另外還可跨付費計劃購買額外 AI credits，若你的團隊每週會多次使用 Make 建構，並同時進行常規 Figma AI 操作，這一點就值得考慮。
Figma 沒有提供 Starter 計劃以外的免費試用，且公開條款中亦未列出退款保證。年度計劃取消後，不會就剩餘期限退還款項。Professional 計劃可透過 Admin Dashboard 取消；Organization 與 Enterprise 計劃則需要聯絡銷售團隊。
實際方案配對： Starter 計劃足以應付評估和偶爾使用。Professional Full seat 是團隊想每月使用 Make 超過一兩次，而不希望在項目中途碰到 credits 限制的最低現實入門選擇。
Figma Make 的替代方案
目前與 Figma Make 最直接的競爭對手是 Lovable。Figma Make 會在 Figma 工作區內產生前端應用程式，而 Lovable 則是一個專為 AI app builder 而設的平台，能處理完整技術堆疊：前端、後端、資料庫、身份驗證，以及一鍵部署，全部都在一個獨立平台上完成，據稱擁有超過 8 million 名用戶。
對於不是已經在使用付費 Figma 計劃的人，或是需要一個真正連接後端與資料的生產級應用程式的人來說，Lovable 能更快、設定更少地讓你走到已部署、已連接數據的應用程式。
| 功能 | Figma Make | Lovable |
|---|---|---|
| 易用性 | 以提示為先，無需設定 | 以提示為先，無需設定 |
| 最適合 | 已使用 Figma 付費計劃的設計師與團隊 | 建立並部署 MVP 的非技術創業者 |
| 後端與數據 | 只限前端；可作為整合使用 Supabase | 從一開始就內置 Supabase 後端 |
| 設計彈性 | 視覺編輯器、聊天編輯，以及完整原始碼存取 | 以聊天為主的編輯，並可匯出程式碼 |
| 定價模式 | 包含於 Figma Full seat；共用 AI credit 配額池 | 獨立訂閱制，另有自己的 credit 系統 |
最終結論：Figma Make 值唔值得用？
對於任何已經在支付 Figma Full seat 的人來說，答案很直接：值得，而且相當值得。輸出質素令 Figma Make 在許多比它更早進入市場的 AI app builder 之上。
單一提示就產生了一個多頁面、具角色感知的物業管理平台，包含 Stripe 付款彈窗、即時分析儀表板、看板式維修板、雙欄訊息 UI，以及一個帶用戶管理表格、REST API 文件和部署指引的完整管理員控制台。這一切只用了 8 分鐘，且免費計劃已提供完整原始碼存取，以及一個乾淨、獨立的發佈 URL。對 beta 產品而言，這些都不尋常。
對於目前不是 Figma 用戶的團隊而言，則需要誠實評估你真正需要甚麼。要取得 Figma Make 有意義的 credits 使用量，需要購買付費 Figma 計劃中的 Full seat，而這比任何獨立 AI builder 所要求的都更像是一項更廣泛的平台投資。如果主要目標是建立一個可運作、具即時資料庫和真實用戶的網頁應用程式，而不是原型，那麼 Lovable 能以更少設定、更直接的方式更快達成部署。
目前最能從 Figma Make 獲益的受眾，是設計師與產品團隊：他們想要縮短靜態 Figma prototype 與可測試、以程式碼為基礎的互動式建構之間的距離，而且不必改變工具或等待開發者介入。就這個特定使用場景而言，Figma Make 是目前最佳選擇。
