- 工具網址：https://www.figma.com/make/
- 最終生成的遊戲：https://margin-edit-23743595.figma.site （歡迎試玩看看）
Figma Make 是 Figma 於 2025 年發表的 AI 協作設計工具，可用自然語言來快速生成可互動的原型，大幅降低設計到開發的交付時間成本，讓設計師不用寫程式也能直接做出可運作的近似最終產品畫面。適合在團隊展示或商業提案能有更清晰的對標方式。
Figma 教育版申請：學生與教師免費方案完整步驟（圖文教學）官方教學 Intro to Figma Make (Tutorial)
Figma Make 操作介面介紹
左上方控制列
- Refresh 重新整理
- Open Console：查看錯誤、載入狀態、AI 請求與日誌
- Mobile Review 預覽行動裝置：檢視響應式網頁狀況
- Preview：預覽網站實際呈現效果
- Code：切換顯示 HTML / CSS / JS 程式碼（可直接複製）
右上方控制列
- Copy Design：可以複製目前的設計，貼到Figma設計稿中
- Run（三角箭頭）：執行你的互動功能或動畫測試
- Settings（齒輪）：進入設定頁、檢視公開網址、連結 Github 做版本控管、串連Supabase 資料庫 Database
- Publish：發佈成正式可連結的網站
- Share：生成可協作或預覽的連結給他人
中間編輯區（Editor Canvas）
網頁生成的主畫布。 可透過「AI Prompt」或手動編輯內容。 若畫面正在轉圈代表內容還在載入或生成中。
AI 助理對話框
- Attach Design：可以將 Figma 設計檔複製貼上匯入 Figma Make，或給予參考圖
- Select a library：將 Figma 中的元件（按鈕、卡片、圖示）匯出成可在 Make 裡重用的設計庫。
- Point and Edit：在 Preview 畫面中指定特定區域做修改。
Attach Design 匯入設計稿
STEP1：點擊設計檔 Frame 標題 command + C 或是 ctrl + C 複製
STEP2：Attach a Design 出現小視窗後 command + V 或是 ctrl + V 貼上檔案
STEP3：Point and Edit
在 Preview 畫面中指定特定區域做修改
https://fair-crumb-50186839.figma.site
用 Figma Make 製作 3D 數字門遊戲
STEP1：藉由 LLM 來生成更符合需求的提示詞
使用 ChatGPT 的深入研究，來釐清並補充遊戲概念。3D網頁需要用到「three.js」的技術。
提示詞：「請作為一名遊戲工程師去拆解 Last War 數字門遊戲，並進一步使用 three.js 來開發3D，主角是一群士兵頭上有數字代表士兵數量，土兵不停地朝前方射擊，迎面而來有Gate和敵人，Gate上有數字計算，經過門根據門上數字做四則運算來增減士兵數量，敵人士兵也會射擊，雙方互相抵銷數量，敵人數量不要太多方便玩家通關。給我一步到位的Figma Make 一篇完整的全面的提示詞。」
給予參考圖片更聚焦
產生後的提示詞：https://chatgpt.com/s/dr_69135b21c5688191bbe2af01db3c3cbb
STEP2：點擊「右上角自己的頭像」進入Recents 頁面
由於首頁的輸入框無法附加圖片或Figma設計檔，先點擊「右上角自己的頭像」進入Recents 頁面，工具網址：https://www.figma.com/make/
STEP3：點擊右上方的「Make」
STEP4：貼上ChatGPT生成的「提示詞」在中間輸入框中，以及按「＋」附加參考畫面圖片
STEP5：生成結果，複製錯誤的文字，貼回對話框中請AI修復
生成結果發生意外問題，有時會出現彈跳視窗，複製錯誤的文字，貼回對話框中請AI修復。
STEP6：製作完成後點擊右上角「設定」，編輯遊戲資訊
反覆修改，直至完成後就可以準備發佈。實際測試最大58次左右的修改次數就要等待20天。
STEP7：編輯完成點擊「< Make settings」
- Status 狀態：Published 發佈或 Unpublished 未發布
- Title 標題
- Meta description 描述
- Language 語系
- Google Analytics ID： 可以藉由 GA 追蹤流量，或是從搜尋引擎結果中排除
- Accessibility 無障礙設定：
- 允許減少動態，網站將尊重用戶設備設置，限制動畫和互動效果。
- 新增Skip連結來直接跳到內容區：在主要內容中添加視覺上隱藏的鏈接，以便用戶可以跳過重複的導航元素。
- Favicon： 網頁標題左側小圖示
- Social sharing image 分享至社群的縮圖
- Custom code 自訂程式碼
- Start of <head>：會放在
<head>最前面，載入追蹤或設定 meta 標籤，如：網站驗證碼 - End of <head>：會放在
</head>前，追蹤碼、favicon 或外部 CSS 連結 - Start of <body>：放在
<body>最前面，初始化腳本或載入 SDK （如 Firebase、GA） - End of <body>：放在
</body>前，結尾腳本，如 Google Analytics、Facebook Pixel、Hotjar 等
- Start of <head>：會放在
STEP8：製作完成後點擊右上角「Publish」，遊戲
https://margin-edit-23743595.figma.site
STEP9：開啟「Feature on Community」可發佈至Figma的社群
https://www.figma.com/community/file/1570143676319756385
