Figma Make讓JS零基礎的設計師 也能輕鬆寫出配對遊戲
在數位設計與互動體驗的領域中，如何讓非工程背景的設計師，也能快速做出簡單又有趣的互動原型，一直是一個很重要的課題。近年來，Figma 除了本身的設計功能外，延伸推出的 Figma Make 提供了更多「低程式門檻」的互動編輯可能。即使沒有 JavaScript 基礎的設計師，也能藉由拖拉、綁定 API、調整視覺與互動邏輯的方式，快速完成一款小遊戲或互動展示。
以下我將用一個實際的活動規劃範例，來逐步說明製作過程。此遊戲的目標很明確：建立一個「明星臉孔配對遊戲」，玩家要將左邊的明星照片與右邊的名字正確配對。整體流程分為五個步驟，每一步都清楚地對應到 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
的資料庫。
Step 3. 在 Figma Make 建立遊戲版面與視覺修正
o左側使用 Grid（2x2），放四張明星照片卡。
o右側使用 Vertical List，放四個名字卡。
o照片清單（PhotoList）綁定 state.photos。
o名字清單（NameList）綁定 state.names。
o點選照片 → 暫存選擇。
o點選名字 → 比對 ID，如果正確則消除；錯誤則觸發抖動動畫。
o調整 卡片顏色（選取狀態時加上藍色外框）。
o照片大小統一（建議 180×220 px）。
o卡片 hover 狀態加上陰影與浮起效果。
o正確時加上 綠色勾勾，錯誤時卡片抖動。
o上下區塊加間距，保持版面呼吸感。
這個階段需要來回與 Figma Make 做視覺修正，直到達到理想的版面效果。
Step 4. 將 API 連結導入 Figma Make
Step 5. 完成小遊戲並體驗
結語
Step 1 先用清楚的需求文件（含英文翻譯）來與 ChatGPT 溝通。
Step 2 建立 API 並託管在 JSONBin.io。
Step 3 在 Figma Make 建立版面、反覆修正視覺。
Step 4 將 API 連結接入遊戲。
Step 5 完成並展示。
Figma make是甚麼?
JSONBin.io是甚麼?
藏森設計
藏森設計，專注於將科技的理性與藝術的感性融合。擁有科技產業設計經驗，擅長UI/UX、網站與視覺整合，同時也投入文化藝術領域，以設計作為故事與情感的橋樑。無論是品牌形象、互動體驗，還是展覽視覺，我們相信設計不只解決問題，更能帶來溫度與靈感。
