Figma Make讓JS零基礎的設計師 也能輕鬆寫出配對遊戲

在數位設計與互動體驗的領域中，如何讓非工程背景的設計師，也能快速做出簡單又有趣的互動原型，一直是一個很重要的課題。近年來，Figma 除了本身的設計功能外，延伸推出的 Figma Make 提供了更多「低程式門檻」的互動編輯可能。即使沒有 JavaScript 基礎的設計師，也能藉由拖拉、綁定 API、調整視覺與互動邏輯的方式，快速完成一款小遊戲或互動展示。 以下我將用一個實際的活動規劃範例，來逐步說明製作過程。此遊戲的目標很明確：建立一個「明星臉孔配對遊戲」，玩家要將左邊的明星照片與右邊的名字正確配對。整體流程分為五個步驟，每一步都清楚地對應到 Figma Make 的功能與操作方式。

Step 1. 規劃遊戲內容與需求（含英文翻譯）

在正式開始設計與開發前，需要先有一份明確的活動規劃，這份規劃同時會是與 ChatGPT 溝通的需求文件。以下為需求說明： 

• 活動標題：明星配對挑戰（Celebrity Matching Challenge）
• 遊戲內容：
  • 遊戲畫面分為兩個主要區塊：
    • 左邊顯示明星照片（隨機抽取四位）
    • 右邊顯示明星名稱（同樣隨機抽取並打亂順序）
  • 玩家需要點選一張照片，再點選對應的名字，如果正確，照片與名字就會消失；如果錯誤，卡片會抖動提示。
• 資料來源：
  • 共收錄 12 位明星的照片與姓名。
  • 所有圖片皆來自 維基百科 Wikimedia Commons 公開授權，確保合法使用。
  • 每一筆資料需包含三個欄位：id（唯一識別碼）、name（明星名稱）、imageUrl（圖片連結，使用縮圖版本以加快載入速度）。
• 語言需求：
  • 因為 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
6. 這個 API 連結就是遊戲的「資料庫」，稍後會連結到 Figma Make。

Step 3. 在 Figma Make 建立遊戲版面與視覺修正

有了 API 之後，就可以在 Figma Make 裡建遊戲畫面。

1. 版面結構：
   1. 左側使用 Grid（2x2），放四張明星照片卡。
   2. 右側使用 Vertical List，放四個名字卡。
2. 資料綁定：
   1. 照片清單（PhotoList）綁定 state.photos。
   2. 名字清單（NameList）綁定 state.names。
3. 互動邏輯：
   1. 點選照片 → 暫存選擇。
   2. 點選名字 → 比對 ID，如果正確則消除；錯誤則觸發抖動動畫。
4. 視覺修正與優化（透過多次迭代）：
   1. 調整 卡片顏色（選取狀態時加上藍色外框）。
   2. 照片大小統一（建議 180×220 px）。
   3. 卡片 hover 狀態加上陰影與浮起效果。
   4. 正確時加上 綠色勾勾，錯誤時卡片抖動。
   5. 上下區塊加間距，保持版面呼吸感。

這個階段需要來回與 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 完成並展示。

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，不需架設伺服器。免費方案就能滿足小型專案或教學需求，也能升級以獲得更高請求數與存取控制。

https://jsonbin.io/