FigCade 幕後：Figma 團隊怎麼用 Make / Weave / MCP 三件套，一週做出 6 款遊戲
Figma 2026 April Fun Day 用 Make、Weave、MCP 三件套一週做出 6 款可玩小遊戲。拆解 Figma 官方團隊的 AI 工作流，看 swimlane 如何被打破。
每年 4 月 1 日，Figma 不做愚人節玩笑，他們做「Fun Day」——給社群一個 Easter egg，讓打開 Figma 的人會心一笑。2026 年這個 Easter egg 叫 FigCade：一個藏在畫布裡的迷你街機，裡面有 6 款可以直接玩的小遊戲。
從構想到上線，Figma 團隊只用了幾天。背後的推進器不是加班，是三個工具：Figma Make（把想法變成可測試原型）、Figma Weave（生成視覺素材與動畫）、Figma MCP（把設計資訊送進 AI coding agent）。
這篇文章對正在學 Figma 的新手特別重要——因為它完整拆解了 Figma 官方團隊怎麼把自家 AI 三件套串成一條工作流，每個工具在哪個環節出場、解決什麼問題。把這三個流程看懂，你就掌握了 2026 年 Figma 團隊的標準節奏。
How Figma AI tools helped us bring extra delight to the canvas
Madeline Stafford · 2026-04-08 · figma.com/blog
read original →原文揭露的關鍵數字——看完就懂這次 April Fun Day 的節奏
GAMES
6款
TIMELINE
1週
AI TOOLS
3件套
TRAILER
1天
- § 一個 Easter egg，三個工具，一週時間
- 01 Figma Make：把想法秒變可測試原型
- 02 Figma Weave：美術與動畫的 atelier
- 03 Figma MCP：把設計脈絡送進 coding agent
- 04 真正的突破：設計／工程 swimlane 被打破
- § 整體觀察
一個 Easter egg，三個工具，一週時間
FigCade 這個名字是 Figma 加上 arcade 的組合：把街機搬進畫布。團隊在 April Fun Day 的一週內，做出六款不同風格的小遊戲——有限時問答、音樂播放器、拼圖等等。每一款都是可玩的完整原型，而不只是概念截圖。
能在這麼短的時間內做到這種完成度，背後不是加班文化，而是工具的分工。下面依照原文整理，看 Figma 內部如何把 Make、Weave、MCP 三件套，對應到「原型、素材、程式碼」三個環節。
Figma Make：把想法秒變可測試原型
團隊裡的一個例子最能說明 Figma Make 的角色。2Fast2Figma 這款 30 秒限時答題遊戲，週日早上只是一個口頭 idea，同一天下午已經變成能玩的 prototype（原型）。這個節奏在原文被描述成「Sunday morning concept → same afternoon working prototype」。
這種速度的價值不在「快」本身，而在於原型可以直接被討論。Product Manager Tara Nadella 觀察到，當團隊有了會動的版本，大家就能看到、回饋、對齊，而不是停留在口頭 idea 或白板草圖的概念層級。短短幾小時內，團隊手上的 prototype 數量幾乎和想法數量一樣多。
對正在學 Figma 的新手，這改變了「做原型」的心理門檻。過去會先把靜態 wireframe 完成才敢往互動走；現在可以在腦海浮現 idea 的當下，立刻用 Make 生成一個可點擊的版本。原型從「設計的最後一關」變成「設計的第一刻」。
下次設計作業不要先畫 wireframe。打開 Figma Make，把腦裡浮現的第一個 idea 直接打進 prompt 讓它產 prototype，再用這個半成品去和組員討論——會發現討論品質比純口述高很多，因為大家在看同一個會動的東西。
Figma Weave：美術與動畫的 atelier
Product Designer Lesley Moon 用 Figma Weave 在幾小時內生成了 FigCade 整套毛氈質感（felted）素材——包括那隻標誌性的「毛氈感游標」。她的原話是：「I used Figma Weave to generate many of the felt assets quickly, which not only sped up my workflow but also expanded the range of visual themes and textures I could explore.」Weave 不只加快工作流，更擴大了她能探索的視覺主題與材質範圍。
Weave 也包下了 April Fun Day 宣傳短片的製作。Product Manager Tara 先在 Weave 裡 riff 出影片概念，Motion Designer Fifi Law 接手，結合 Lesley 的視覺素材，一天內完成整支 trailer。
值得注意的是，原文強調 Weave 的定位是「素材生成器」，不是「設計取代者」。Lesley 用 Weave 產出大量候選材質之後，仍然需要判斷哪些可以用、如何拼接、怎麼和 FigCade 的整體語言對齊。AI 把探索成本壓低，但決策權仍在設計師手上。
做 side project 時，先別跳去 Figma 做精緻 mockup。用 Weave 先跑 3 到 5 個不同材質／色調的探索版本，再選最契合 brief 的方向往下深做——這樣不會太早被自己的第一版視覺綁架，決策空間也變得更寬。
Figma MCP：把設計脈絡送進 coding agent
當設計定版後，工程端用的是 Figma MCP server。Software Engineer Steven Noto 的工作流是：在 Claude 和 GitHub Copilot 裡掛載 Figma MCP 驗證，把 Lesley 設計的 component 連結貼給 agent。agent 讀到後，就能輸出「精準符合設計規範」的程式碼。原文的描述是 "generate the exact code I needed, matching the design spec."
這裡的關鍵詞是「設計規範」（design spec）。過去 AI coding agent 雖然會寫程式，但它看不到設計檔裡的 spacing、token、variant 結構，寫出來的 UI 常常「看起來對、細節全錯」。MCP 做的事就是把這層缺失的上下文補回去——它是設計資訊送進 agent 的協定層。
對還在學 Figma 的新手，這一段的重點不是立刻去用 MCP，而是理解一個方向：未來設計師的價值不只在畫面，更在設計檔的資訊結構是否乾淨到能被 AI 讀懂。Auto Layout、Variables、Component Properties——這些不只是設計功夫，也是能不能對接 AI 工作流的技術底子。
檢查自己最近一個設計檔：layer 有沒有命名？元件有沒有用 Component／Variants？spacing 是不是用 Auto Layout 而不是手動拖？把這些補齊，檔案就從「給人看」升級成「給 agent 讀」——這會直接影響未來 MCP 工作流的效率。
原文最深的觀點——不是速度，而是 swimlane（職能泳道）被打破
設計 → 交付 → 實作
每個職能在自己的 swimlane 裡依序作業，工程師看不到設計師的 intent，設計師看不到工程限制，誤譯只能靠會議補。
→ nuance lost in translation
設計 ↔ 程式碼 同時進行
Make／Weave／MCP 三者把媒介之間的轉譯成本壓到分鐘級，設計師與工程師可以並行作業、甚至 live coding。
→ tight feedback loops
真正的突破：設計／工程 swimlane 被打破
原文最深的一段在這裡。Tara Nadella 說，AI 的最大優勢其實不是「更快進 production」，而是把大家從各自的 swimlane（職能分工泳道）裡拉了出來。
「線性交接流程的問題是，你很少會建立對另一個媒介的直覺——在傳統流程裡，這些細節會在轉譯過程中被壓平或遺失。」— Tara Nadella
在 FigCade 專案裡，這變成具體的行動：Software Engineer Myrah Shah 和 Designer Lesley 甚至做了一次 live coding session——兩人同時在設計與寫程式，只為把溝通時差壓到最小。當工程師看到設計師的 intent，設計師看到程式的限制，誤譯的空間就被消滅。
過去這種「雙向同時工作」非常昂貴，因為轉譯成本太高。現在 AI 作為中介，把設計檔、素材、程式碼三個媒介的轉譯時間都壓到分鐘級——於是 swimlane 真的可以被打破。
下次做課堂組作業，試試「設計師先花 10 分鐘用 Make 產 prototype、工程師同步在 Weave 探索視覺風格」的平行開工模式，而不是線性的「設計 → 交付 → 實作」。會發現最後成果的共識成本低很多。
整體觀察
把這篇文章放回「新手正在學 Figma」的視角，最值得記住的是一個方向：Make、Weave、MCP 並不是三個新功能，而是 Figma 對於「設計流程應該長什麼樣」的重組。
Make 改寫了「什麼時候可以有原型」，Weave 改寫了「美術素材從哪來」，MCP 改寫了「程式碼怎麼拿到設計資訊」。三個工具疊在一起，取代的不是某個設計步驟，而是整條流水線的輸送帶。
對中文讀者，特別是設計科學生或轉職新手，現在該做的事很明確：在學 Figma 基礎功的同時，逐步把 Make、Weave、MCP 這三個工具的「使用邏輯」納入自己的肌肉記憶——不一定要每天用，但要知道在哪個階段，哪一個工具最適合出場。FigCade 只是示範，真正的問題是：自己的下一個作品，敢不敢把這條流程跑一次？
QUOTE · 原文金句線性交接流程的問題是，你很少會建立對另一個媒介的直覺——在傳統流程裡，這些細節會在轉譯過程中被壓平或遺失。
這篇 5 個重點濃縮成可截圖收藏的清單
- 01 FigCade 是 Figma 2026 April Fun Day 的 Easter egg——6 款可玩小遊戲在一週內完成。
- 02 Figma Make 讓「想法」在當天就變成可點擊 prototype，改寫「什麼時候可以有原型」這件事。
- 03 Figma Weave 變成設計師的素材生成器，Lesley Moon 幾小時就完成過去要幾天的美術探索。
- 04 Figma MCP 把設計檔資訊送進 Claude／Copilot 等 agent，讓 AI 寫出符合 design spec 的程式碼。
- 05 真正的突破不是單一工具變快，而是設計／工程「泳道」被打破——AI 讓兩邊可以同時工作。
