AI Design

Figma Make:它是什麼、如何運作、積分和限制 (2026)7 min read

Reading Time: 3 minutesFigma Make是Figma的AI提示應用程式工具。以下是它的具體內容、它如何逐步工作、誰可以使用它、AI 積分如何運作、如何發布和導出程式碼以及它的限制在哪裡。

Figma Make complete review: features, cost, updates, with Figma and Anima logos

Figma Make:它是什麼、如何運作、積分和限制 (2026)7 min read

Reading Time: 3 minutes

Figma Make是Figma的AI提示應用程式工具。您描述您想要的內容,或從 Figma 設計開始,它會建立一個工作原型或 Web 應用程序,您可以預覽、在聊天中最佳化、在程式碼中編輯並發布。 它作為專用 Make 檔案位於 Figma 內部,因此它可以使用您的設計和庫作為上下文。它面向設計師、產品經理和任何需要將想法轉化為人們可以點擊的東西的人。

事實已於 2026 年 11 月 1 日對照 Figma Make 頁面和 Figma 幫助中心進行檢查。計劃、積分和功能經常發生變化,因此在購買前請在 Figma 中確認當前詳細資訊。

本指南解釋了 Figma Make 是什麼、它如何逐步工作、哪些功能很重要、誰可以使用它、AI 積分如何運作、如何發布和匯出以及它的限制在哪裡。如果您在工具之間進行選擇,我們的 Figma Make 與 Anima Playground 比較 涵蓋替代方案。

Figma Make是什麼?

Figma 將 Figma Make 描述為一款由人工智慧驅動的應用程式提示工具,可讓您將想法和現有的 Figma 設計作為功能原型、網頁應用程式和互動式 UI 變為現實。您可以在即時預覽旁邊的聊天中工作,並且您建立的所有內容都有程式碼支持,因此您可以在預覽、點擊編輯和程式碼本身之間切換。

Figma 在 Config 2025 上推出了 Make,它已經從單一組件的想法發展成為具有計劃模式、程式碼編輯器、後端、發布和整合的完整產品。它與 Figma Design 是分開的:您可以使用草稿中的 Make 按鈕,以與建立其他 Figma 檔案相同的方式建立 Make 檔案。

Figma Make 聊天提示要求在產生的互動式音訊設定面板旁提供播放設定模式,並附有均衡器
圖:Figma。提示和附加設計成為互動式設定面板。

您可以使用 Figma Make 建構什麼?

  • 用於與使用者測試的流程或功能的可點擊原型。
  • 現有 Figma 設計的互動版本,具有轉換和邏輯。
  • 小型網路應用程式或內部工具,具有資料和登入後端。
  • 您可以發佈到公用 URL 的登陸頁面或微型網站。

Figma Make 的工作原理(一步一步)

  1. 建立一個 Make 檔案。 在 Figma 檔案瀏覽器中,開啟草稿並點擊 製作 在右上角。您也可以從範本或複製 GitHub 儲存庫開始。
  2. 描述您想要在聊天中建立的內容。您可以輸入或聽寫。具體說明使用者、主要任務和螢幕。
  3. 將 Figma 設計附加到聊天中或將框架貼上到聊天中,從 Figma 庫(付費計劃)引入樣式上下文,添加後端,透過 MCP 連接器連接工具,或讓 Make 搜尋網路或取得 URL。
  4. 如果你想控制,請先計劃。 在付費計劃中,計劃模式會產生一個結構化計劃,您可以在編寫任何程式碼之前對其進行編輯。
  5. 查看預覽。 Make 建立應用程式並即時展示。像用戶一樣點擊它。
  6. 精煉。 繼續聊天,使用點和編輯來更改特定元素,添加註釋並一起發送,或打開程式碼編輯器並直接更改程式碼。
  7. 分享或發布。 共享文件以獲取評論回饋、將預覽作為圖層複製回 Figma Design、將其發佈到公共 URL 或下載程式碼。
Figma Make 工作區,左側是 AI 聊天,提示要求使用媒體播放器,右側是即時應用程式預覽
圖:Figma。左側聊天中提示,右側生成的應用程式的即時預覽。

Figma 文件中的一個實用提示:附加框架或元件,而不是將連結貼到 Figma 檔案。 Make 不會從 URL 讀取設計,貼上的連結可能會導致意外的輸出。

Figma Make 主要特性

特徵 它的作用
計劃模式 在生成開始之前建立可編輯的計劃,以便您可以先闡明意圖。
附件 允許您附加設計、圖像、視訊、音訊、文字檔案和 PDF 來指導模型。
指向並編輯 按一下預覽中的某個元素可重新設定其樣式、交換它或提示以進行變更。
註解 選擇幾個元素,描述變更並將它們立即發送到模型。
程式碼編輯器 查看和編輯產生的程式碼,新增您自己的檔案並新增以下 Make 指南。
Make套件 同步 npm 套件、庫樣式和指南以產生更高保真度的原型。
MCP連接器 從文件和任務等外部工具中提取上下文。
版本歷史 預覽、收藏或還原任何早期版本、AI 或手動版本。
評論和手機 收集有關原型的回饋並在手機上查看。
模板和自訂技能 重複使用經過驗證的工作流程或打包您自己的 Make 指令。
Figma Make 指向並編輯:帶有提示框的選定標題元素,要求在播放歌曲時對時間戳進行動畫處理
圖:Figma。透過指向並編輯,您可以在預覽中選擇一個元素並提示進行更改。

Figma Make 與 Figma 代碼層與 Figma Sites

這三個人都糊塗了。 Figma Make 在一個專用文件中工作,您可以在其中建立和發布應用程式。程式碼層可讓您在 Figma Design 畫布上探索設計旁的互動想法;請參閱我們的指南 Figma 代碼層和規格。 Figma Sites 用於發佈在 Figma 中設計的網站。當輸出應該像應用程式一樣運行時,請選擇 Make;當您想要在靜態設計旁邊添加互動式元素時,請選擇程式碼層。

誰可以使用 Figma Make,AI 積分的費用是多少?

Figma Make 適用於 Starter(有限制)、Professional、Organization、Enterprise、教育(高等教育和訓練營用戶)和政府計畫。您的座位決定您可以做什麼:

座位 在Figma Make你可以做什麼
滿的 一切:在資料夾和團隊中建立 Make 檔案、共享、發布、使用程式碼編輯器和匯出程式碼。
開發者 在草稿和匯出程式碼中嘗試 Make。
協作和檢視 在草稿中嘗試 Make。

Make 依靠 AI 積分運行。每个席位都包含积分,每月重置,并且不能共享或延期。截至 2026 年 10 月 Figma 的文檔:

方案(全席) 每月人工智慧學分
Starter 500(加上每日限額 150)
Professional 3,000
Organization 3,500
Enterprise 4,250

提示使用多少積分取決於您選擇的模型和任務。 Figma 自己的範例基於 2026 年 2 月的預設模型,進行了一些小更改,例如以大約 30 或更多積分更新字體,以及以大約 75 或更多積分使附加設計具有互動性。為小型編輯選擇較輕的模型並為大型構建使用計劃模式有助於您的學分持久。

發布、後端和完成您的工作

發布

點擊“發布”,設定標題,Make 會為您提供一個公共 URL,如下所示 three-random-words.figma.site。您可以在支援的計劃上連接自訂網域。已發布的應用程式託管在 Amazon Web Services 上,並透過 Cloudflare 進行路由,預設情況下它們不會被搜尋引擎索引,且 Make 沒有內建分析儀表板,儘管您可以在設定中新增 Google Analytics ID。

Figma Make 發布按鈕在已發佈的網站設計網格上反白顯示
圖:Figma。將 Make 應用程式發佈到公用 URL。

後端

要儲存資料並支援登錄,您可以要求 Make 建立一個由 Payload 支援的後端,其中包含資料庫、檔案儲存、驗證和管理面板,或從 Make 設定連接您自己的 Supabase 專案。

CMS 面板旁邊的 Figma Make 應用程式預覽列出了帶有標題和日期的事件,顯示了儲存資料的後端
圖:Figma。具有 CMS 的後端允許 Make 應用程式儲存和管理資料。

出口代碼

擁有完整席位或開發席位的使用者可以透過「檔案」標籤中的「檔案」操作以 ZIP 形式下載 Make 檔案中的所有檔案。將下載的內容視為原型程式碼庫:在本地運行它,在其上進行建置之前對其進行審查和重構。

Figma Make 聊天面板顯示 15 個程式碼變更、檢視變更和建立 PR 按鈕以及具有建立新分支的分支選單
圖:Figma。查看 Make 已在分支上產生和工作的程式碼變更。

將設計移回 Figma

在付費方案中,您可以將目前預覽複製為設計圖層並將其貼上到 Figma Design 中。這些圖層是可編輯的,但它們是快照。它們不是互動的,不連結到 Make 文件,也不自動綁定到您的設計系統。

Figma Make 開始之前需要了解的限制

  • 大多數功能都需要付費計劃的完整席位,並且在大型構建中積分可能會很快耗盡。
  • 它是為原型和簡單應用程式而構建的。生產軟體仍然需要工程審查、測試、安全和維護。
  • 您對 Figma Design 中複製的圖層所做的變更不會流回 Make 檔案。
  • 如果您要求模型使用 Supabase 並且整合未連接,它可以產生模擬程式碼而不是工作連接。
  • 對於已發布的網站來說,SEO 控制和分析是最少的。
  • 您不能向它提供 Figma 連結並期望它讀取該檔案。連接或貼上框架。

如果您需要真正的前端程式碼、網站克隆或位於 Figma 之外的應用程序,請考慮替代方案,例如 Anima Playground。我們誠實地比較它們 Figma Make 與 Anima Playground 對比.

Figma Make 的提示想法

命名使用者、任務和狀態的特定提示會產生更好的初步結果。試試這些:

  • “為預算應用程式建立一個三步入門流程。顯示進度指示器,驗證每個欄位並在成功畫面上結束。”
  • “將附加的定價框架變成互動頁面。在每個計劃卡上添加每月和每年的切換以及懸停狀態。”
  • “為對工單進行分類的代理程式建立支援儀表板。包括過濾器、空狀態和載入狀態。”
  • “製作一個帶有賓客結帳、地址驗證和訂單確認功能的行動結帳原型。”

使用 Anima Playground 建立工作應用程式

喜歡可以匯出和運送的真實網站或應用程式?描述它,Anima 將建造它。

Figma Make常見問題解答

Figma Make是什麼?

Figma Make 是 Figma 的 AI 驅動的應用程式提示工具。它將提示或現有的 Figma 設計轉換為功能原型、Web 應用程式或互動式 UI,您可以在聊天或程式碼中預覽、編輯並發布。

Figma Make是免費的嗎?

Starter 方案可以免費探索 Figma Make,但有限制,包括每月 500 個 AI 積分和每日限制。付費方案的完整席位可以獲得更多積分和功能,例如團隊庫上下文、計劃模式、共享和發布。計劃有變,因此請查看 Figma 的定價。

如何使用Figma Make?

在您的 Figma 草稿中,點擊 Make,在聊天中編寫提示,附加設計或樣式上下文(如果有),發送並透過聊天、指向和編輯或程式碼編輯器完善結果。然後共享、發布或導出它。

Figma Make可以導出程式碼嗎?

是的。擁有完整席位或開發席位的使用者可以從「檔案」標籤下載 Make 檔案的程式碼作為 ZIP。最好將其視為原型程式碼庫,在生產使用之前進行審查。

我可以發布 Figma Make 應用程式嗎?

是的。滿員席位可以發佈到公共的Figma.site URL,初學者用戶只有同時發佈到Figma Community時才可以公開發布。您可以在支援的計劃中新增自訂網域,預設情況下,搜尋引擎不會對已發佈的應用程式建立索引。

Figma Make和Anima Playground有什麼差別?

Figma Make 在 Figma 生態系統內建立原型和應用程式。 Anima Playground 是一個獨立的工作區,從提示、Figma 設計、URL 或圖像開始,產生可編輯的 HTML 或 React,您可以匯出、移交和發布。詳情請參閱我們的比較。

|

Co-founder & CEO