Figma Make 指南 2026｜用 Figma AI 做互動網站，設計原型與正式上線怎麼分？

Figma Make 指南 2026｜用 Figma AI 做互動網站，設計原型與正式上線怎麼分？

內容目錄 顯示
加入為 Google 偏好來源

Figma Make 是一套 AI 驅動的 prompt-to-app 工具，可以把文字需求、既有 Figma 設計與其他素材，轉成能操作的原型、Web App 或互動介面。這篇 Figma Make 教學會先回答它是什麼，再逐步拆解功能、操作與公開發布的邊界。

如果你原本就在 Figma Design 裡畫介面，Make 的吸引力很直接：不必只停在靜態畫面，可以進一步測試按鈕、資料與使用流程。不過，能公開一個網址，不代表網站已經完成 SEO、表單收件、權限、安全、數據追蹤與長期維護。

來源：Figma Make 官方頁與Figma Make FAQs（查證 2026-10-10；功能、席次與發布條件以 Figma 官方最新公告及實際帳號為準）。

3 句話看懂 Figma Make

  1. Figma Make 是把提示詞、設計脈絡與素材轉成可操作介面的 AI 工具，官方定位涵蓋功能原型、Web App 與互動 UI。
  2. 產出以程式碼為基礎，也能透過提示詞、畫布與程式碼繼續調整，但這不等於每份輸出都已符合正式環境的開發規範。
  3. 它適合縮短設計到互動驗證的距離；若目標是長期營運官網，仍要另外確認 CMS、SEO、表單、權限、安全與維護責任。

讀者常見的混淆，是「Figma 裡做出來」代表什麼。Figma Make、Figma Design、Figma Sites 與一般 Prototype 都在同一個產品生態中，但解決的任務、交付成果與公開方式不同。本文後面會用一張差異表逐項比較，不用「可以做網站」一句話帶過。

Figma Make 是什麼？

它是從提示詞建立可操作介面的 AI 工具

Figma 官方將 Make 稱為「AI-driven, prompt-to-app tool」。prompt-to-app 若直譯，就是「從提示詞到應用程式」；白話來說，你可以描述使用者要完成的任務，附上既有設計或素材，再讓 AI 建立一個可以操作與修改的介面版本。

既有設計可以成為上下文，但不是自動雙向同步

使用者可以把 Figma frame、component 或其他支援素材附到 Make 的提示詞，讓 AI 參考既有版型與內容。Figma 官方產品頁也說明，Make 可以使用設計系統、圖片與程式碼等脈絡，產出以程式碼為基礎，並可在視覺畫布繼續編輯。

Figma Make 與一般 Figma Prototype 解決的問題不同

一般 Figma Prototype 主要把設計畫面連結成操作路徑，適合示範點擊、跳頁與狀態切換。Figma Make 則進一步產生以程式碼支撐的互動成果，能處理更接近 Web App 的行為。

「prompt-to-app」容易讓人誤會一段提示詞就能正式上線

prompt-to-app 很容易被理解成「輸入一句話，完整應用程式就完成」。實際上，提示詞只能提供起點；需求是否完整，流程是否合理，程式碼能否維護，資料是否安全，以及公開後由誰負責，仍需要人做判斷。

來源：Figma Make FAQs與Figma Make 官方頁（查證 2026-10-10）。官方將 Make 定位為 AI 驅動的 prompt-to-app 工具，可建立 functional prototypes、web apps 與 interactive UI；官方 FAQ 同時說明 Figma Design 工具未直接整合進 Make。

Figma Design、Make、Sites、Prototype 與正式官網差在哪裡？

這五個名稱不在同一個比較層級。Figma Design、Make 與 Sites 是不同產品或工作空間；Prototype 是 Figma Design 裡用來模擬操作流程的能力；正式營運官網則是一種交付狀態，不是 Figma 的產品名稱。

項目主要目的常見輸入主要輸出是否以程式碼運作公開與營運邊界
Figma Design設計介面與建立設計系統Frame、component、文字、圖片可編輯設計稿不以交付程式碼為核心通常用於設計與交接
Figma Prototype模擬點擊與畫面路徑Design 畫面與互動設定可操作的流程示意不等於正式前端程式適合驗證導覽與狀態
Figma Make建立功能原型、Web App 與互動 UI提示詞、設計、素材、程式碼以程式碼支撐的互動成果是可分享或發布，營運條件另驗收
Figma Sites設計並發布響應式網站Design frame、元件、內容公開網站與 Sites CMS可使用 AI 或程式碼調整2026-10-10 官方仍標示 Beta
正式營運官網長期接單、內容經營或交易商業需求與通過驗證的設計可維護的品牌資產視系統而定還要驗收網域、SEO、資料、安全與維護

Figma Design 負責介面，Prototype 負責示範路徑

Figma Design 適合整理版面、元件、字體與設計規則。Prototype 則把這些畫面連成使用路徑，讓團隊示範按下按鈕後會前往哪裡，以及選單、彈窗或頁面切換如何呈現。

Figma Make 負責建立更接近實際操作的成果

Make 會產生程式碼，並提供互動預覽、提示詞修改、局部編輯與程式碼編輯。它適合測試較具體的功能行為，例如資料篩選、狀態改變或多頁 Web App，而不只是示範畫面跳轉。

Figma Sites 的核心任務是建立並發布網站

Figma Sites 官方頁主打把既有 Figma Design frame 轉為彈性版面，加入響應式元件、預設互動與 Sites CMS，再發布為公開網站。它比 Make 更直接對應「製作網站」這個任務。

正式營運官網是一組驗收條件，不是工具名稱

不論使用 Make、Sites 或其他系統，正式官網都要回答相同問題：誰擁有網域與內容，誰能更新，表單資料送到哪裡，搜尋引擎能否正確收錄，追蹤是否有效，以及發生問題時由誰復原。

來源：Figma Sites 官方頁與Figma Make FAQs（查證 2026-10-10）。Figma Sites 官方頁說明響應式網站發布與 Sites CMS，且目前仍標示 Beta；Make FAQ 則說明 Design layers 回貼後不會自動同步回 Make。

Figma Make 目前能做什麼？

以下功能依 Figma 官方產品頁與說明文件整理。實際可用範圍會受方案、席次、管理員設定與 AI credits 影響；本章只確認官方能力，不把尚未實測的輸出品質寫成結果。

提示詞可以搭配設計、素材與外部脈絡

建立 Make 時，可以輸入文字或語音提示詞，也能附上 Figma 設計、圖片與其他支援檔案。官方文件還列出設計資源庫提供的樣式脈絡、外部工具連接器、網路搜尋與網址內容等來源，其中部分能力受付費方案限制。

互動成果可以用對話、局部工具與程式碼修改

Make 完成第一版後會顯示互動預覽。使用者可以繼續對話要求修改，也能選取特定元素調整文字、色彩、間距等屬性，或直接進入程式碼編輯器修改。

可以加入後端，但仍要獨立驗收資料與安全

Make 可連接 Supabase 後端，提供秘密值儲存、運算與 Postgres 資料庫；官方指出 Make 建立的是基本 key-value store，不是自動建好完整 SQL 資料模型。API key 只放在工具提供的 Create a secret 介面，不貼進提示詞。登入、資料隔離、表單收件、刪除與錯誤處理仍須逐項驗收。

團隊可以留言、共同查看並管理版本

有檔案或預覽查看權限的人可在目前版本留言；程式碼修改會留下版本紀錄。留言僅在 Make 檔案或分享預覽中提供，公開發布的 Web App 訪客不能使用這個審稿留言功能。編輯、共同查看及組織分享仍依方案與檔案權限確認。

來源：Create and edit a Figma Make file、Add a backend to a functional prototype or web app、Add comments in Figma Make、Manage connectors in Figma Make與Figma Make FAQs（查證 2026-10-10）。官方文件列出設計附加、樣式脈絡、外部工具連接器、網路內容、後端、對話編輯、局部編輯、程式碼編輯與版本紀錄；Connectors 適用範圍受 Organization／Enterprise 方案限制，其他功能也應以帳號與官方最新文件為準。

公開、內部與密碼保護：先選對發布方式

公開網站與分享預覽的權限分開。當前 Make 發布文件列出 Organization／Enterprise 可限制組織內部查看；發布的 *.figma.site 可設定密碼保護，不能直接推定自訂網域也有相同保護。Starter 使用者發布到 Web 時還須同時發布到 Community，內容公開前要先確認授權與資料範圍。

發布設定包含頁面標題、描述、語言、favicon、社群預覽圖、Google Analytics、阻擋搜尋收錄及自訂程式碼等；有設定入口仍不等於已收錄或追蹤成功。自訂網域與額外主機條件以實際方案確認，不能沿用官方文件中「2025 年免費」的舊時限。Make 在本機程式庫運作的功能於查核日產品頁仍寫 Coming soon，不能當作全面可用。

哪些人適合使用，哪些情況不適合只靠 Figma Make？

判斷要不要用 Figma Make，不應只看它能不能產生畫面，而要看團隊想縮短哪一段工作。若目標是把既有設計快速變成可操作版本，Make 很有價值；若目標包含內容經營、交易與敏感資料，Make 比較適合作為驗證工具，而不是唯一的正式系統。

使用情境適合程度建議用法還要補的工作
已有 Figma 設計系統的產品團隊高附上既有 frame 與 component，驗證互動與流程確認輸出是否符合元件規則與開發架構
設計師、產品經理或行銷人員需要可操作 Demo高先做關鍵任務，提供團隊或客戶操作設定回饋範圍與驗收標準
新創團隊驗證 MVP中高用假資料測試核心價值與使用路徑另評估後端、安全與維護成本
需要頻繁更新的內容型官網中低可先做版型或互動概念另選合適的 CMS，規劃 SEO 與內容權限
會員、付款或個資流程低僅用測試資料建立概念驗證需要工程、資安、法遵與正式測試
AI 或公開分享受管制的組織視政策而定先確認方案、席次與管理員規則釐清資料能否上傳，成果能否對外分享

已有 Figma 設計系統的產品團隊較容易取得價值

若團隊已經在 Figma 管理元件、版型與品牌規則，就能把既有設計直接當成 Make 的起點。這類用法不是請 AI 從零猜測品牌，而是讓它依可辨識的視覺脈絡建立互動版本。

需要可操作 Demo 的設計師、產品經理與行銷人員適合先用 Make

靜態設計稿常讓討論停在配色與排版，互動 Demo 則能讓參與者實際完成一項任務。設計師可以測試操作細節，產品經理可以確認需求，行銷人員也能先檢查活動概念與內容順序。

內容型官網與 SEO 經營不適合只看公開網址

需要長期寫文章，管理分類與維護搜尋流量的網站，核心不只是頁面能不能公開。團隊還要確認內容管理、標題與描述、結構化資料、轉址、網站地圖、權限與備份。

會員、付款與敏感資料專案需要完整工程驗收

只要流程會處理密碼、付款資訊、客戶個資或公司機密，判斷標準就不能停在「可以操作」。資料如何保存，誰能讀取，異常怎麼記錄，以及發生問題如何復原，都需要獨立驗證。

開始使用 Figma Make 前要準備什麼？

好的提示詞無法替代需求整理。開始前先準備一頁簡短規格，至少寫下使用者要完成的任務，可參考的設計，需要出現的狀態，以及成果最後交給誰，能降低每一輪修改都在重新猜題的情況。

  1. 使用者要完成的單一任務，例如預約諮詢或比較方案。
  2. 作為起點的 frame、component、圖片與文字內容。
  3. 必須遵守的色彩、字體、間距與元件規則。
  4. 哪些內容是真實文案，哪些只是示意資料。
  5. 正常、空白、載入、錯誤與完成狀態。
  6. 手機、平板與桌機需要呈現的差異。
  7. 哪些資料只供展示，哪些需要後端或外部服務。
  8. 分享權限、發布方式、驗收人與正式上線邊界。

先選一條使用者任務，不要一次做完整產品

第一輪可以只做一個有開始與結束的任務。例如「從服務頁選擇時段並送出預約」，比「做一個預約平台」更容易讓 Make 理解，也方便團隊測試成功與失敗的條件。

把 Frame、Component 與品牌規則整理成可用上下文

附上設計前，先移除無關草稿，並確認 frame 名稱、文字內容與元件狀態容易辨識。若團隊有設計系統，也應說明哪些 component 必須沿用，以及哪些版面可以讓 Make 探索。

用假資料先定義正常、空白、載入與錯誤狀態

互動成果不能只在「資料剛好正確」時看起來正常。列表沒有內容，連線等待，輸入格式錯誤或送出失敗時，畫面也要告訴使用者發生什麼事，以及下一步可以怎麼做。

在動手前寫清楚權限、發布與正式上線邊界

先確認誰可以編輯 Make 檔案，誰只能查看，以及成果能否公開分享。若組織有 AI 使用政策，還要確認哪些設計、程式碼與資料可以上傳，不能等完成後才發現內容無法交付。

依官方文件規劃從既有設計做出互動 Web App

Figma Make 的流程不是把整份設計稿丟進去，等 AI 一次完成。較可控的作法是先限定任務，提供必要的設計脈絡，再用正常與例外案例逐輪驗證。以下流程依官方操作文件整理，屬於可重現的操作架構，不代表本文已完成指定帳號的第一手測試。

先用一句任務敘述定義完成條件

先把需求寫成「誰要在什麼情境完成什麼事」，例如：「第一次來訪的顧客，要在手機上比較三種方案並送出詢問。」再補上成功條件，不能發生的結果與本輪不做的功能。

附上必要的 Frame、Component 與內容

建立 Make 檔案後，可以在對話中附上 Figma 設計，貼入 frame 或圖片，也能提供設計資源庫的樣式脈絡。只放與當前任務有關的畫面，並說明哪一個是起點，哪些 component 必須沿用。

先檢查計畫，再建立第一個可操作版本

付費方案可使用 Plan mode，先產生結構化計畫並在寫入程式碼前調整。沒有這項功能時，也可以在第一則提示詞要求 Make 先列出畫面、狀態、資料與不處理的範圍，確認後再開始。

用正常、空白、載入與錯誤案例逐項驗證

測試時不要只點過一次順利流程。至少準備正常資料、零筆結果、內容過長、網路等待、輸入錯誤與送出失敗，逐項記錄預期結果、實際結果與待修項目。

來源：Create and edit a Figma Make file與Best practices for optimizing AI credits in Figma Make（查證 2026-10-10）。官方文件說明提示詞、設計附件、樣式脈絡、Plan mode、預覽與程式碼編輯；AI credits 指南則建議縮小第一則提示詞範圍，並依修改類型選擇局部編輯或直接改程式碼。

Figma Make 費用、AI credits、素材權利與上線風險怎麼看？

Figma Make 的成本不能只看「免費或付費」。實際支出由方案、席次、每月 AI credits、額外點數與反覆修改量共同構成；公開後還要把網域、素材授權、資料合規與維護工作算進去。

Figma Make 不是獨立購買的單一產品

截至 2026 年 10 月 10 日，Figma 官方價格頁以美元列價，Full seat 包含 Figma Make 與其他產品。Starter 可有限試用；Professional Full seat 頁面顯示每月 USD16，月繳或年繳的實付價格要依所選週期確認。Organization 與 Enterprise 分別顯示每月 USD55 及 USD90，均標示年繳；不要把月均標價當成可逐月取消的合約。

方案與席次官方頁面顯示價格內含 AI credits閱讀方式
Starter免費每日 150，上限每月 500適合有限試用，功能依帳號畫面為準
Professional Full seat每月 16 美元每月 3,000可選月繳或年繳，實付依結帳畫面
Organization Full seat每月 55 美元每月 3,500官方標示年繳
Enterprise Full seat每月 90 美元每月 4,250官方標示年繳，採購條件另確認

AI credits 不是固定的提示詞次數

AI credits 是各 Figma AI 功能共用的計量點數，不是一點等於一次提示詞。消耗依模型、任務與處理脈絡而變；個人席次點數每月重設，不能轉讓或跨月累積。管理員可另外設定方案共用的持續點數訂閱及按用量計費，須核對每人額度與每月支出上限，不能把全部功能當成無限免費。

發布前必須確認第三方素材與資料責任

Figma 官方提醒，Make 可能把網路上的字型、程式套件或圖片等第三方內容帶進成果。Make 提供的圖片來自 Unsplash，但使用者仍要依實際用途檢查權利與適用條款，不能因為素材由工具帶入就假設可以商用。

公開發布前要完成 12 項檢查

  1. 使用到的圖片、字型、程式套件與文案都有適當使用權利。
  2. 檔案、提示詞與公開成果不包含不該曝光的敏感資料。
  3. 手機、平板與桌機的主要任務都能完成。
  4. 鍵盤操作、焦點順序、替代文字與色彩對比已檢查。
  5. 表單資料的收件位置、保存方式與刪除流程已確認。
  6. 編輯、查看、公開與內部存取權限符合組織政策。
  7. 頁面標題、描述、語言、索引設定與網址符合公開目的。
  8. Google Analytics 或其他追蹤工具已依法告知並完成測試。
  9. 自訂網域、DNS、HTTPS 與舊網址轉移方式已確認。
  10. 程式碼、內容、設定與可復原版本有備份或交接方式。
  11. 空白、錯誤、逾時與服務中斷時有可理解的處理方式。
  12. 上線後由誰更新，監控，付費與處理問題已有明確責任。

清單全數通過，也不代表每個產業的法規與技術要求都已涵蓋。它的作用是把「可以 Publish」轉成一張可驗收的待辦表，再依專案風險補上工程、資安與法律檢查。

來源：Figma Plans & Pricing、Manage AI credits、Publish, update, or unpublish a Figma Make file（查證 2026-10-10；價格、額度與發布條件可能調整，採購及上線前請重新核對官方頁面與實際帳號）。

同一份需求可以分成哪三種交付層級？

「做出來」不是單一終點。同一份需求可以交付成互動原型、公開 Demo 或正式營運網站，三者的驗收深度、資料責任與維護成本不同。專案一開始就寫清楚層級，能避免收到公開網址後，才發現雙方對「完成」的理解不同。

交付層級主要成果可分享方式搜尋收錄資料管理適用情境
互動原型可操作的核心流程團隊或指定對象查看不以收錄為目標使用假資料，不接正式流程需求討論、使用者測試、開發交接
公開 Demo可由網址開啟的展示版本公開網址或自訂網域依設定決定，但不等於已完成 SEO只放可公開資料，限制收件與權限提案、活動預覽、概念驗證
正式營運網站可長期更新與承接業務的系統品牌正式網域依 SEO 策略管理有正式資料流程、權限與合規機制接單、內容經營、會員或交易

互動原型用來驗證任務是否成立

互動原型的完成條件，是目標使用者能否理解並走完核心流程。它可以保留未完成的次要頁面，也能使用假資料；重點是讓團隊在投入完整開發前，先確認需求與操作邏輯。

公開 Demo 用來擴大回饋，不代表已承接正式業務

公開 Demo 比互動原型多了一個可直接開啟的網址，適合提供客戶、投資人或測試者體驗。公開前仍要清除敏感資料，確認素材權利，並說明哪些表單、登入或資料只是展示。

正式營運網站要通過持續經營的驗收

正式網站除了介面與功能，還要能穩定更新內容，處理真實資料，追蹤成效並在發生問題時復原。網域與帳號歸屬、權限、備份、SEO、無障礙、安全與維護責任都要有負責人。

內文精華總結

Figma Make 的核心價值是縮短設計到互動驗證的距離

  • 它能從提示詞、既有設計與素材建立以程式碼支撐的互動成果。
  • 適合先測試關鍵任務、狀態與使用流程，不必只用靜態畫面討論。

既有 Figma 設計是上下文，不是自動雙向同步

  • Design frame、component 與樣式脈絡能幫助 Make 理解現有設計。
  • 回貼 Design 或修改 Make 後，不應假設兩邊會自動保持一致。

公開發布與正式營運需要兩張不同的驗收表

  • Publish 可以提供公開網址、自訂網域與部分發布設定。
  • 正式網站還要驗收內容、SEO、資料、安全、分析、備份與維護責任。

費用要把席次、AI credits 與重做成本一起計算

  • 每個方案與席次的點數不同，提示詞消耗也會受模型、任務與脈絡影響。
  • 清楚的需求、適量的上下文與分階段驗證，能減少反覆修改造成的成本。

Figma Make 值得被視為一套互動驗證工具，而不是「輸入一句話就完成正式網站」的捷徑。若團隊先定義交付層級，再把公開 Demo 與正式營運分開驗收，就能保留 AI 加速探索的優勢，同時避免把尚未完成的責任藏在一個看似可用的網址後面。

把原型接到正式網站前，先核對需求與費用

若要使用秒站營運官網，可以先用自己的內容試操作，再確認需要的功能、資料管理與維護範圍。原型或設計稿移入網站仍需要實作與驗收，不能由展示成果推定已完成。

方案首年費用次年起年費
標準NT$24,000NT$12,000
專業NT$36,000NT$18,000
輕電商NT$48,000NT$24,000

以上依 秒站公開方案頁；網域、影片空間、金流手續費與加購模組等依需求另計。4 小時免費試用不必信用卡。匯入既有設計或外部程式前，先確認內容格式、權利、相依功能及實際服務範圍。

查看網站案例，比較與自己需求相關的內容與操作流程。

延伸閱讀

AI 建站工具系列文章

重點整理

Figma Make 是什麼，和 Prototype 有何差別？

Make 以提示詞、設計與素材產生以程式碼支撐的互動原型或 Web App；一般 Prototype 主要模擬畫面路徑。能操作或有網址，不等於已完成正式營運需要的資料、安全與維護驗收。

免費帳號能使用與發布 Figma Make 嗎？

Starter 與其他席次可有限試用，完整功能以付費 Full seat 為主。Starter 發布到 Web 時須同時發布到 Community；AI 點數、檔案及實際帳號限制仍要分項確認。

Figma Design 與 Make 會自動同步嗎？

不會自動雙向同步。附加 frame、component 或樣式脈絡可作為 Make 的參考；回貼 Design 或修改其中一邊後，都要另外確認另一邊需要的更新。

Figma Make 能做登入與儲存資料嗎？

可連接 Supabase 後端，提供秘密值、運算及 Postgres 中的基本 key-value store；不等於自動建立完整 SQL 資料模型。正式登入、資料權限與表單收件仍須驗收。

發布 Make 網站能限制誰看嗎？

當前發布文件列出 Organization／Enterprise 可限制組織內部查看，*.figma.site 的發布網站可設定密碼保護。分享預覽、自訂網域與公開網站是不同範圍，請逐項確認實際設定。

Figma Make 可以設定 SEO 嗎？

當前發布設定提供標題、描述、語言及阻擋搜尋收錄等選項，也可設定社群預覽圖與 Analytics。設定成功不代表已被搜尋引擎收錄、排名提高或追蹤資料已收到。

AI credits 一點等於一次操作嗎？

不是。每次提示詞消耗依模型、複雜度及脈絡而變。席次點數每月重設，不能跨月累積；另外購買的共用點數或按用量計費需管理員確認額度與支出上限。

Make 的輸出能直接用來營運官網嗎？

先依用途驗收手機與桌機、素材權利、內容更新、權限、表單、網域、SEO、備份與維護責任。原型可作為起點；公開發布不代表每項正式營運條件都已完成。

分享此文章：

相關文章