Figma Make 完整教學：從 Prompt 到可互動原型的實戰指南
2026年3月18日 上午 1:21
UI/UX 設計
你有沒有過這種經驗：腦中有一個很清晰的產品畫面，但要從靜態設計稿做到「可以點的原型」，光是拉互動、設定動畫、處理各種狀態，就花掉整個下午？
Figma Make 就是為了解決這件事而生的。它讓你用文字描述想法，直接生成一個可以點擊、有真實互動邏輯的高保真原型——不需要寫程式、不需要拉連線，整個過程就像跟 AI 聊天一樣。
2026 年初 Figma 舉辦了第二屆 Makeathon，超過 5,000 名創作者參賽，用 Figma Make 做出了多人刺繡畫布、包裹客製化器、甚至賽車遊戲。這些作品不是工程師寫出來的——是設計師用 prompt 做出來的。這篇文章會帶你完整了解 Figma Make 到底能做什麼、怎麼用、以及設計師該怎麼把它融入工作流。
Makeathon 得獎作品看 Figma Make 的可能性
要理解 Figma Make 的能耐，最快的方式就是看別人用它做了什麼。Figma 與 Contra 合作舉辦的 Makeathon 到 2026 年已經是第二屆，獎金池高達 $100,000 美元。先看看幾個讓人印象深刻的得獎作品：
參賽人數
5,000+
2026 Makeathon
總獎金
$100K
USD 美元
首獎獎金
$50,000
Grand Prize
評分標準
3 項
創意 × 創新 × Prompt
🏆 Best Overall — Common Thread
Charlota Blunárová 打造的多人線上刺繡畫布。每個訪客都能在共享畫布上選擇線色、針法，縫出自己的一塊拼布。整件作品完全在 Figma Make 內完成，是她第一次用這個工具 vibe coding 的成果。
👆 可直接在上方互動體驗 ｜ 開啟完整版 →
🥇 第一屆首獎 — Web Poetry
Cara Ellis 讓使用者手繪 A-Z 每個字母，自動生成個人化字體，再用這套字體寫詩。她先在紙上畫了好幾版草稿，在 Figma Design 完成設計後才進入 Make 製作。前期的思考讓她在 Make 裡只用了很少的 prompt 就完成了。
👆 可直接在上方互動體驗 ｜ 開啟完整版 →
💡 Most Innovative — Package Customizer
Daniella Marynova 和 Max Pradella 做了一個包裹客製化工具，可以自訂尺寸、材質、圖案、品牌色，甚至還有 AR 預覽。他們的起始 prompt 只有一句話：「Create a parcel configurator」。
👆 可直接在上方互動體驗 ｜ 開啟完整版 →
這些作品的共通點是：它們都不是「設計稿」，而是可以點擊、互動、甚至多人使用的真實體驗。而且全部在 Figma Make 裡完成，不需要另外開 VS Code 或接後端。
Figma Make 是什麼
Figma Make 是 Figma 在 Config 2025 推出的 AI 驅動 prompt-to-app 工具。簡單說，你可以用自然語言描述你想要的東西，Figma Make 會把它變成一個可互動的高保真原型或 Web App。
它跟你印象中的 Figma Prototype 不一樣。傳統 Prototype 是你手動拉連線、設觸發條件、一個一個定義互動。Figma Make 生成的是真正的前端程式碼，背後跑的是 React，可以有真實資料、API 串接、響應式佈局——但你不需要看到或理解任何一行程式碼。
它也不是 Figma 的 First Draft（AI 生成靜態設計稿）。First Draft 產出的是「可以看」的畫面，Figma Make 產出的是「可以用」的體驗。兩者在工作流裡的定位完全不同。
| Figma Prototype | First Draft | Figma Make | |
|---|---|---|---|
| 輸入方式 | 手動拉連線 | 文字 prompt | 文字 prompt + 設計稿 |
| 產出物 | 連線式原型 | 靜態設計稿 | 可互動 Web App |
| 底層技術 | Figma 互動引擎 | AI 生成圖層 | React 程式碼 |
| 真實資料 | ❌ | ❌ | ✅ 可接 Supabase |
| 可發布上線 | ❌ | ❌ | ✅ 透過 Figma Sites |
| Design System 整合 | 使用元件庫 | ❌ | ✅ Make Kits + npm |
2026 年 1 月，Figma 宣布所有 AI 功能正式脫離 Beta，Figma Make 成為正式產品。同時推出的還有將 Make 原型嵌入 Figma Design、FigJam、Figma Slides 的功能，讓原型不再是孤立的檔案，而是可以直接放進你工作流任何一個環節的互動素材。
▲ Figma 官方教學：Intro to Figma Make
核心功能完整拆解
Figma Make 的功能可以拆成五個核心模組，每個都解決設計師工作流中的一個具體痛點：
💬 Prompt-to-Prototype
在 AI 聊天框中用自然語言描述你想做的東西，Figma Make 會生成可互動的高保真原型。你也可以直接把 Figma Design 的 frame 貼進聊天框，讓 AI 基於你的設計稿來生成。
👆 Point & Edit
看到原型裡某個元素想改？直接用滑鼠點選它，然後打字描述你要的修改。可以改顏色、間距、字型，也可以把整個元件替換成你的 Design System 元件。
🎨 Design System 整合（Make Kits）
透過 Make Kits，你可以把 Figma Library 的顏色、字型、元件帶進 Make，生成的原型自動套用品牌規範。進階用戶還能匯入 React Design System npm 套件，讓原型直接使用跟產品一樣的程式碼元件。
📎 嵌入與分享
Make 原型可以嵌入 Figma Design、FigJam 和 Figma Slides，不用離開工作環境就能展示互動體驗。完成後還能透過 Figma Sites 直接發布到公開網址。
🔗 後端整合與 MCP
需要真實資料？Figma Make 支援接入 Supabase 作為後端，讓原型不只是看起來像產品，而是真的能存取資料。搭配 Figma MCP Server，還能用 Codex、Claude Code 等工具直接從 Make 原型生成可部署的程式碼。
值得注意的是，Figma Make 底層使用的 AI 模型包含 Claude（Anthropic）和其他模型，你可以在 prompt 框裡選擇不同的模型。不同模型消耗的 AI Credits 不同，產出品質也會有差異。
從零開始的使用教學
Figma Make 的上手門檻很低，但要用得好需要掌握正確的工作流。以下是從開啟到發布的完整流程：
🎨
DESIGN
Figma Design
完成設計稿
→
💬
PROMPT
貼入 Make
描述互動邏輯
→
👆
EDIT
Point & Edit
精修細節
→
📎
EMBED
嵌入 Design
FigJam / Slides
→
🚀
PUBLISH
Figma Sites
發布上線
建立 Figma Make 檔案
在 Figma 首頁點擊「New」，選擇「Figma Make」。你需要 Full seat + 付費方案才能完整使用所有功能（Starter 方案可試用，但有限制）。
匯入你的設計稿（選填但建議）
點擊 AI 聊天框的「+」按鈕，選擇「Import from Figma」，匯入你在 Figma Design 裡做好的 frame。你也可以直接把 frame 複製貼上到聊天框。建議一次只附一個設計稿，AI 才能準確理解你的意圖。
寫你的第一個 Prompt
在聊天框描述你想要的原型。可以從零開始（「Build a task management app with kanban board」），也可以基於你匯入的設計稿（「Turn this design into an interactive prototype with working filters」）。
用 Point & Edit 精修細節
生成結果出來後，切換到 Edit 工具，直接點選你想修改的元素。文字可以直接改內容、字型、顏色；容器可以調整背景、間距；圖片可以上傳替換。也可以點選後再用 prompt 描述更複雜的修改。
預覽、分享或發布
完成後你有三個選項：在 Figma 內預覽全螢幕互動效果；將原型嵌入 Figma Design / FigJam / Slides 用於設計評審或簡報；或透過 Figma Sites 直接發布到公開網址。你也可以把預覽複製成設計圖層，回到 Figma Design 繼續迭代。
讓 AI 聽懂你的 Prompt 技巧
Figma Make 的品質取決於你的 prompt 品質。以下是從 Figma 官方和 Makeathon 得獎者身上整理出來的實戰技巧：
🎯 高效 Prompt 的六個原則
01
先在 Figma Design 做好設計，再進 Make
Make 最強的用法不是從零開始，而是把你精心設計的 frame 貼進去轉成互動版本。Cara Ellis 和 Johannes Specht 都是先在 Design 裡完成高保真稿，再進 Make。
02
短 prompt 比長 prompt 更有效
Package Customizer 的起始 prompt 只有「Create a parcel configurator」。官方建議：短 prompt 更容易測試、更不容易讓模型困惑。先給方向，再用後續 prompt 補細節。
03
每次只改一件事
不要在一個 prompt 裡堆疊多個修改請求。一次一個變更，如果效果不好就回退。堆疊請求容易讓 AI 偏離方向。
04
用 Design System 元件名稱當 prompt 關鍵字
如果你的元件庫裡有 Button/Primary、Input/Default，在 prompt 裡直接使用這些名稱。Figma Make 能更精準地找到並使用正確的元件。
05
明確定義「完成」是什麼
在開始前想清楚：你是要驗證流程、佈局、文案、還是互動？需要哪些狀態（loading、empty、error、success）？定義邊界會讓迭代速度大幅提升。
06
善用 guidelines.md 檔案
在 Make 的程式碼編輯器裡有一個 guidelines.md 檔案，你可以在裡面寫入偏好設定（品牌色、字型規範、互動規則等），Make 會在每次生成時參考這些規則。
💡 進階技巧：搭配外部工具
Figma Make 支援 MCP Connector，可以連接 Notion 等外部工具。你可以直接把 Notion 裡的 PRD 拉進來當 context，讓 Make 根據規格文件生成原型，而不是手動複製貼上。如果你想深入了解 MCP 的運作，可以參考我之前寫的 Figma MCP 進階玩法。
AI Credits 計費與方案說明
Figma Make 使用 AI Credits 計費系統。每個 Figma 帳號都有每月的 Credits 額度，不同方案額度不同。從 2026 年 3 月 18 日起，Figma 已正式對 Full seat 用戶強制執行 Credits 上限——用完就要等下個月重置，或是由管理員加購額度。
| 方案 | Full Seat 月費 | 每月 AI Credits |
|---|---|---|
| Starter（免費） | $0 | 有限額度 + 每日 150 上限 |
| Professional | $20/月 | 3,000 |
| Organization | $55/月（年繳） | 3,500 |
| Enterprise | $90/月（年繳） | 4,250 |
Credits 消耗方式：Figma Make 屬於 agentic AI 功能，每次 prompt 消耗的 Credits 不是固定的，會根據任務複雜度、使用的模型、處理的資料量而變動。圖片編輯功能（去背、擴展、生成）的消耗則是固定的。
如果你的團隊經常使用 AI 功能，管理員可以從 2026 年 3 月 11 日起購買額外的 Credits 訂閱包，或啟用 pay-as-you-go 計費（Organization / Enterprise 方案已可用，Professional 方案預計 2026 年 5 月開放）。
⚠️ 省 Credits 的訣竅：先在 Figma Design 做好設計再進 Make、用短 prompt 每次只改一件事、善用 guidelines.md 減少 AI 猜錯的次數。
設計師的實戰應用場景
Figma Make 對不同角色的設計師有不同的價值。以下是幾個最常見的應用場景：
🎨 UI/UX 設計師：快速驗證互動概念
你有一個新的互動想法，但不確定體驗起來如何。以前要花半天拉 prototype，現在把設計稿貼進 Make，三分鐘就能得到一個可以實際操作的版本。特別適合在設計評審前快速準備 demo。
📱 產品設計師：跨裝置原型測試
用 prompt 告訴 Make「把這個 mobile app 做成 desktop responsive 版本」，它會自動調整佈局。你可以在不同螢幕尺寸上測試同一個概念，發現潛在的 UX 問題。
🤝 與工程師協作：原型即規格
Figma 內部 PM 已經在用「Figma Make 檔案 + 設計稿」取代傳統 PRD 來跟工程師溝通。工程師可以用 Make 原型作為互動參考，或是透過 Figma MCP Server 將設計 context 拉進 coding 環境，生成跟設計一致的程式碼。
🧪 用真實資料做使用者測試
Make 原型可以上傳資料、呈現動態內容。這代表你做使用者測試時，受測者看到的不再是「Lorem ipsum」，而是真實的資料情境。測試結果的參考價值大幅提升。
🚀 個人專案：從概念到上線
接 Supabase 後端、透過 Figma Sites 發布——你可以用 Figma Make 做出真正上線的 Web App，完全不需要開發環境。自由接案的設計師可以用這個方式快速交付 MVP。
如果你想更深入了解 Figma 其他 AI 功能（圖片編輯、First Draft、AI Prototype 等），可以參考我的 Figma AI 功能完整教學。想了解 Claude Code 和 Figma 的雙向工作流，也可以看 Claude Code to Figma 教學。
重點整理
📝 重點整理
→
Figma Make 是 AI 驅動的 prompt-to-app 工具，能把文字描述或 Figma 設計稿轉成可互動的高保真原型
→
底層是 React 程式碼，不只是連線式原型——支援真實資料、API 串接、響應式佈局
→
透過 Make Kits 和 npm 套件可以整合 Design System，讓生成的原型自動符合品牌規範
→
最佳實踐：先在 Figma Design 完成設計 → 貼進 Make 生成互動版 → 用 Point & Edit 精修 → 嵌入或發布
→
AI Credits 從 3/18 起正式強制執行上限，Professional 方案每月 3,000 Credits
→
Makeathon 得獎作品證明：設計師用 prompt 就能做出過去需要工程師才能完成的互動體驗
→
搭配 Figma MCP Server 和 Supabase，Make 不只是原型工具，更是從設計到部署的完整流程
延伸資源
🔗 Figma Blog：Introducing Figma Make
🔗 Figma Blog：8 Essential Tips for Using Figma Make
🔗 Figma Blog：Embed Make Prototypes Everywhere
🔗 Figma Blog：Prototypes Are the New PRDs
🔗 Figma Help：How AI Credits Work
