【設計師的 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，馬上加入我們～

“Build a simple voxel-style 3D scene using Three.js. Use a first-person POV camera with WASD for movement and mouse-look for navigation. Generate the floor as a grid of cubes, each textured with Figma brand colors and vector-style patterns (dots, grids, stripes). Place several translucent cubes with glowing Figma-colored icons (arrow, flower, X-shape) that act as teleport portals — when the player collides with one, move them to another location. In the center, place a raised pedestal with a glowing voxel block styled as the Figma logo fragment. Show a simple stylus/pencil model in the lower-right corner of the screen as the held tool. Lighting should use soft ambient + gradient sky background to reflect Figma’s playful aesthetic.”

AI 會立刻生成一個可旋轉的 3D 場景。你可以拖曳滑鼠改變視角、使用鍵盤 W/A/S/D 來在場景中移動。
此時場景已包含基礎的光影、地面、建築，讓你有一個完整的「世界」雛形。

💡 小技巧：
1. 如果 AI 生成的構圖不理想，可以直接將需求丟給 GPT 修改 Prompt，AI 會即時重新渲染場景。
2. 我在使用鍵盤 W/A/S/D 這邊來回修正很多次，大家不要氣餒，丟給gpt持續try就可以成功了。

▶ Step 2：加上魔法學校與水晶

接著，讓場景更有主題感。
在 GPT 中輸入：

“Add a wizard school building in the center and glowing crystals around the yard.”

AI 會自動在中央生成一座巫師學校建築，周圍散落幾顆會發光的水晶。這裡的發光效果（Glow）會根據燈光方向自動調整，產生柔和的環境光。

▶ Step 3：讓樹變實心

此時你會注意到，Figma Make 預設生成的樹木是半透明、可穿透的。
只要再跟GPT補一句：

“Make all trees solid and add leaf textures.”

AI 就會重新渲染所有樹木，讓它們具有更真實的材質感。
這一步雖小，但會大幅提升場景的立體層次，也能讓後續角色或互動物件在移動時，獲得更準確的遮擋效果（occlusion）。

▶ Step 4：裝飾與夜景

為了營造魔法氛圍，我們可以讓場景轉為夜晚模式。
指令示例：

“Switch to a night scene, add floating lanterns and soft blue fog.”

AI 隨即會調整整體光源與天空顏色，並在空中懸浮幾盞會飄動的燈籠。效果會隨著鏡頭角度改變，營造出如哈利波特般的奇幻氛圍。

💡 延伸應用：
你也可以加入背景音樂或粒子效果（particle effects），讓整個場景更生動。

▶ Step 5：加上互動遊戲機制

最後一步，我們要讓這個巫師世界真正「動」起來，並加入一點挑戰感。
在 Make 的 Prompt 區輸入：

“Add a controllable wizard character. Use keyboard arrows to move, and let the player collect 5 floating candies while avoiding ghost enemies.”

AI 隨即會生成一個可控制的角色（通常是一個簡化造型的巫師或小方塊），你可以使用鍵盤方向鍵移動角色。
同時，場景中會出現幾個漂浮的糖果（Candies），作為玩家的收集目標。

更有趣的是，AI 還會在場景中加入幾個移動中的 鬼魂（Ghosts）。
它們會按照隨機路線或設定範圍移動，若玩家碰到鬼魂，就會扣生命值。這讓整個體驗變成具有互動與挑戰性的小遊戲。

💡 設計提示：

• 想調整難度，可以改變糖果數量或鬼魂移動速度。
• 若要加入音效或環境音，只要補上「add spooky background music」或「play sound when candy is collected」即可。

四、結果展示：一個 AI 做的魔法世界 ✨

經過前面五個步驟，我的「巫師世界 3D 小遊戲」正式誕生了。
整個過程完全不需要寫任何代碼，也沒有打開 Unity 或 Blender，卻能在 Figma 裡實現一個有互動、挑戰與結局的完整遊戲體驗。

體驗回顧

從建立場景到完成互動邏輯，整體流程不到 15 分鐘。
過去這樣的 3D 遊戲製作至少需要多個軟體（例如 Blender、Unity、Figma），而現在只需要在 Figma Make 中輸入幾句自然語言。

透過這次實作，我發現幾個亮點：

1. 全新思路：過去的我，只認為在Figma make只能產ui,拉prototype，現在發現還有3D功能，著實是一條新思路。

2. 互動體驗可視化：你能即時看到角色動作、光影效果與碰撞回饋。

3. 創意原型極速迭代：修改 Prompt 就能立刻得到不同版本，特別適合頭腦風暴與概念驗證。

常見問題（FAQ）

Q1：什麼是 Figma Make？

Figma Make 是 Figma 推出的 AI 生成工具，能透過文字指令（Prompt）直接生成 UI 元件或互動原型。
它讓設計師不用寫程式，也能快速建立可操作的原型、互動畫面，甚至像這篇示範一樣，製作出完整的 3D 小遊戲。

Q2：Figma Make 跟一般 Figma 有什麼不同？

傳統 Figma 著重在 UI 設計與 Prototype 原型；
而 Figma Make 則新增「生成式設計（Generative Design）」能力，能：

• 以文字指令生成畫面、場景、互動邏輯
• 與 Figma Sites 整合，能直接嵌入互動展示
• 加速原型、動畫與資產整理流程（如 Token、Variants、Color Palette）

Q3：用 Figma Make 做遊戲需要懂程式嗎？

完全不需要。
只要能清楚描述需求（例如：「建立一個角色收集糖果、避開鬼魂的 3D 場景」），
AI 就會自動生成所有互動邏輯與物件。
如果要進一步微調體驗，則可透過「Prompt & Edit」面板修改文字描述即可。

Q4：可以把 Figma Make 做的遊戲分享出去嗎？

可以！
你可以：

• 直接嵌入 Figma Sites 提供互動預覽；
• 或匯出為連結／嵌入代碼分享給他人體驗。
  未來若開放更多匯出格式，甚至可導出到 Web 或 plugin 中使用。

Q5：除了遊戲，Figma Make 還能拿來做什麼？

Figma Make 不僅能生成遊戲，也非常適合：

• 🔸 製作 3D 原型或展示頁（產品 Demo、互動展示）
• 🔸 生成 UI 設計素材（色票、Token、Variants）
• 🔸 製作沉浸式互動畫面（例如虛擬展覽或教學場景）
• 🔸 快速構思創意概念（Concept Ideation）

Source：https://www.figma.com/make/