【設計師的 AI 秘笈】Figma Make 教學:不寫程式也能做 3D 遊戲!用 AI 打造你的互動世界

Figma Make 是 Figma 推出的 AI 擴展工具,能用文字指令生成 3D 場景與互動遊戲。 本文教你從零開始,用 Figma Make 打造屬於自己的 3D 魔法世界,完全無需程式基礎。

【設計師的 AI 秘笈】Figma Make 教學:不寫程式也能做 3D 遊戲!用 AI 打造你的互動世界

你以為 Figma Make 只能畫 UI?我在網路上發現一個玩法,它連 3D 遊戲都能幫你做,今天就來教學!

一、Figma 也能做 3D 遊戲?真的可以!

過去我們提到 Figma,多半只想到 UI/UX 設計或原型製作。
但隨著 Figma Make 的出現,這個熟悉的設計工具,不僅能生成UI介面,還能生成 3D 場景與互動體驗 的 AI 平台。

你沒聽錯——現在只要輸入文字指令(Prompt),Figma Make 就能幫你:

  • ⚙️ 生成立體空間與光影效果(無需建模或導入素材)
  • 🕹️ 添加互動控制,例如 WASD 移動、空格跳躍、物件碰撞
  • 🔊 整合音效與得分機制,打造完整遊戲體驗
  • 🪄 自動優化體驗提示與動效,像「遊戲完成」「恭喜得分」等情境反饋

更驚喜的是,所有內容都能回到 Figma 原編輯器中繼續微調,對設計師來說,這代表——從設計稿到可操作的遊戲,只需要一次對話。


二、Figma Make 可以實現什麼

Figma Make 是 Figma 在生成式設計領域的重要升級,它將「設計、原型、發佈」三個環節透過 AI 無縫整合,讓設計師能用自然語言快速完成過去需要反覆手動操作的任務。

1️⃣ 設計 ⇆ Make ⇆ Site 的整合體驗

Figma Make 串連了 Design、Make、Site 三個模組,形成一條完整的創作鏈路。

  • Make 中生成的 3D 場景或互動原型,可以回到 Design 編輯器 繼續細化。
  • 同時,完成後的作品也能直接嵌入 Figma Sites,提供即時互動的展示體驗。
    換句話說,從設計稿 → 互動原型 → 發佈展示,全流程都能在 Figma 生態系內完成,不需要額外導出或使用第三方工具。

2️⃣ AI 高效處理重複性任務

Figma Make 對於那些「結構明確、邏輯固定」的任務表現特別突出,例如:

  • 自動生成 color palette(色票方案)
  • 整理並歸納 Design Token Set
  • 統整元件與延伸製作 Variants(元件變體)
    這些原本需要手動比對、整理、命名的重複性工作,都能交由 Make 處理,大幅節省設計師的時間,讓創意回歸到設計本身。

3️⃣ 生成式原型與互動體驗

除了靜態畫面,Make 也能根據 Prompt 生成 可操作的互動原型
你只需輸入類似「建立一個巫師學院的 3D 場景,角色可以用鍵盤移動與跳躍」這樣的描述,AI 就會自動產生包含空間、光影、物件與互動邏輯的完整場景。
這對設計師或創作者來說,意味著從構想到原型的距離只剩「一句話」。

4️⃣ 向即時生成工具邁進

Figma 官方展示的第二支 Demo 已經揭示了未來可能性——在 Make 中從構想到工具,甚至能自動轉為 plugin(外掛)
若這項能力持續發展,未來設計師可能不再需要自己開發外掛,而能透過自然語言即時生成實用工具,實現 Realtime Generative UI(即時生成式介面)。


三、我用 Figma Make 做出一個巫師世界

在了解 Figma Make 的能力後,接下來我們實際動手,用它做出一個簡單但充滿魔法氛圍的 3D 小遊戲場景
整體流程分成五個步驟,你只需要打開 Figma,選擇「Make」模式,輸入簡短的文字指令(Prompt),AI 會自動完成建構。

▶ Step 1:生成場景

首先,建立一個新文件並選擇 「Figma Make」
在 Prompt 輸入框中輸入指令,例如:

還想看更多嗎?完整內容只對註冊用戶開放喔!
點下方的免費 Subscribe,馬上加入我們~