Figma Make讓JS零基礎的設計師 也能輕鬆寫出配對遊戲
以下我將用一個實際的活動規劃範例，來逐步說明製作過程。此遊戲的目標很明確：建立一個「明星臉孔配對遊戲」，玩家要將左邊的明星照片與右邊的名字正確配對。整體流程分為五個步驟，每一步都清楚地對應到 Figma Make 的功能與操作方式。
Step 1. 規劃遊戲內容與需求
- 在正式開始設計與開發前，需要先有一份明確的活動規劃，這份規劃同時會是與 ChatGPT
- 溝通的需求文件。以下為需求說明：●活動標題：明星配對挑戰（Celebrity
- Matching Challenge）●遊戲內容：
- o遊戲畫面分為兩個主要區塊：
- ■左邊顯示明星照片（隨機抽取四位）
- ■右邊顯示明星名稱（同樣隨機抽取並打亂順序）
- o玩家需要點選一張照片，再點選對應的名字，如果正確，照片與名字就會消失；如果錯誤，卡片會抖動提示。●資料來源：
- o共收錄 12 位明星的照片與姓名。
- o所有圖片皆來自 維基百科 Wikimedia Commons 公開授權，確保合法使用。
- o每一筆資料需包含三個欄位：id（唯一識別碼）、name（明星名稱）、imageUrl（圖片連結，使用縮圖版本以加快載入速度）。
●語言需求：
- o因為 Figma Make
- 的系統溝通需要英文，所以需將這份活動規劃翻譯成英文，以便未來直接複製到工具中使用。
Step 2. 將明星資料製作成 API 並託管於 JSONBin.io
有了遊戲需求後，下一步就是建立資料來源。這裡我們準備了一份 JSON，內含 12 位明星的資料。每位明星皆有 唯一 ID、姓名、照片連結、來源資訊頁。這份 JSON 我們會託管到 JSONBin.io，因為它是一個簡單的雲端 JSON 儲存服務，能快速生成 API 端點，並支援 Public Read（公開讀取），非常適合拿來做 Figma Make 的資料庫。
操作流程：
1.到 JSONBin.io 註冊帳號。
2.建立新 Bin，將完整的 12 人明星 JSON 貼上。
3.在「Visibility」選項設定為 Public Read。
4.儲存後，系統會生成一個可公開讀取的 API 連結，例如：
5.https://api.jsonbin.io/v3/b/xxxxxxxx/latest這個 API 連結就是遊戲的「資料庫」，稍後會連結到 Figma Make。
Step 3. 在 Figma Make 建立遊戲版面與視覺修正
有了 API 之後，就可以在 Figma Make 裡建遊戲畫面。
1.版面結構：
o左側使用 Grid（2x2），放四張明星照片卡。
o右側使用 Vertical List，放四個名字卡。
2.資料綁定：
o照片清單（PhotoList）綁定 state.photos。
o名字清單（NameList）綁定 state.names。
3.互動邏輯：
o點選照片 → 暫存選擇。
o點選名字 → 比對 ID，如果正確則消除；錯誤則觸發抖動動畫。
4.視覺修正與優化（透過多次迭代）：
o調整 卡片顏色（選取狀態時加上藍色外框）。
o照片大小統一（建議 180×220 px）。
o卡片 hover 狀態加上陰影與浮起效果。
o正確時加上 綠色勾勾，錯誤時卡片抖動。
o上下區塊加間距，保持版面呼吸感。
這個階段需要來回與 Figma Make 做視覺修正，直到達到理想的版面效果。
Step 4. 將 API 連結導入 Figma Make
當版面與互動完成後，就需要接上真實資料。
1.在 Figma Make 的「On App Load」事件中，加入 HTTP GET，URL 填入 Step 2 的 JSONBin API 連結。
2.回傳後透過 Transform，將資料整理成 photos 與 names 兩個陣列，並隨機抽取 4 筆。
3.綁定變數到 UI 元件 → 照片與名字就會正確顯示在畫面上。
此時，遊戲已經能呈現真實的明星照片與名字，不再只是測試資料。
Step 5. 完成小遊戲並體驗
經過以上四個步驟，最終遊戲就能完整執行：
- • 玩家可以進行「明星照片與名字」的配對。
- 所有圖片來自合法授權的 Wikimedia Commons，避免版權問題。
- API 託管於 JSONBin.io，方便管理與更新資料。
- Figma Make 即時調整，即使設計師沒有程式基礎，也能不斷微調顏色、大小、位置，甚至加上動畫效果。
- 需要注意的是，目前
- Figma Make 在 RWD（響應式網頁設計）
- 上仍不算完美，若在手機或平板上使用，可能會有版面跑位的情況。但對於沒有 JS
- 背景的設計師來說，它已經是一個相當強大的工具，可以快速做出雛形或互動展示，並且方便與工程師或客戶溝通。
範例 https://alert-manual-45825147.figma.site/
結語
整體流程下來，可以看到：
Step 1 先用清楚的需求文件（含英文翻譯）來與 ChatGPT 溝通。
Step 2 建立 API 並託管在 JSONBin.io。
Step 3 在 Figma Make 建立版面、反覆修正視覺。
Step 4 將 API 連結接入遊戲。
Step 5 完成並展示。
這套流程對於無程式基礎的設計師來說，特別友善。它不僅能快速做出一個互動 Demo，還能實際連結真實資料，這是單純設計工具較難達成的效果。建議所有想要結合設計與互動體驗的人，不妨都可以嘗試看看 Figma Make 與 JSONBin.io 的組合，會帶來非常有趣的發現。
Figma Make是甚麼?
Figma Make 是 Figma 在 2025 年發表的新功能，結合 AI 與原型設計工具。它能透過自然語言指令或既有設計稿，快速生成互動式原型或 Web App，讓設計師與開發者縮短從構想到實作的距離。使用者只需輸入需求，系統即可自動建立介面、流程與互動邏輯，並能即時調整與測試。Figma Make 強調「從設計到產品」的一站式體驗，讓設計不再只是靜態畫面，而能快速進入可用的應用雛形，大幅提升團隊效率與協作。
https://www.figma.com/make/
JSONBin.io是甚麼?
JSONBin.io 是一個線上雲端服務，讓使用者能免費或付費建立、儲存與存取 JSON 資料。它提供簡單的 RESTful API，能快速建立「Bin」（相當於一個 JSON 文件），並支援 Public Read、Private、版本管理與即時更新。常用於前端原型、測試 API、資料共享，開發者可透過 URL 直接 fetch JSON，不需架設伺服器。免費方案就能滿足小型專案或教學需求，也能升級以獲得更高請求數與存取控制。