Figma Make-a-thon 2026 完整拆解：6 件作品改寫人機互動的下一步
Make-a-thon 2026 六件得獎作品逐一拆解：Common Thread、Pucker、Duet Booth、Airwwave、Tokyo、Reframe，每位 maker 在 Figma Make 裡得到的工作 tip 一次整理。
每年 Figma 都會跟 Contra 合辦一場 Make-a-thon，給社群一道題目、十萬美金獎金，看大家用 Figma Make 能把軟體互動推到什麼地方。今年的題目很簡單也很大：除了 pinch-to-zoom、tap-to-like、swipe right 這幾個我們已經習慣到不會多想一秒的手勢，下一個常用互動會長什麼樣？
得獎的 6 件作品給的答案，比題目還要更直接——他們不只設計新的互動方式，而是用這些互動重新定義「人和軟體相處時想要的感覺」：可以慢、可以一起做、可以不用手、可以失控一點、可以毫無目的、可以只是分享一個看起來舒服的畫面。
這篇把六件得獎作品逐一拆解，把每個 maker 在 Figma Make 裡得到的工作 tip 也一起整理出來。對正在學 Figma 的你，這是一份「用 Figma Make 做點什麼」的靈感清單，也是一張你可以開始照著走的 prompt 地圖。
6 designs that reimagine how we interact with software
Emma Webster · 2026-04-01 · figma.com/blog
read original →原文揭露的關鍵數字——Figma Make 把參賽門檻壓到什麼程度
PRIZE POOL
$100K
WINNERS
6件
FASTEST BUILD
1天
STITCHES
100K+
- § Make-a-thon 是什麼？這次題目要回答的是哪個問題
- 01 Common Thread — 把限制做成功能的多人共織畫布
- 02 Pucker — 用嘴唇做選擇的免手互動層
- 03 Duet Booth — 把雙人快照亭拆掉時間與空間
- 04 Airwwave — 會回頂回來的手勢樂器
- 05 Tokyo — 沒有目的的 16-bit 互動城市
- 06 Reframe — 把隨手截圖變成值得發出去的作品
- § 整體觀察：Figma Make 改變了誰可以 ship 東西
Make-a-thon 是什麼？這次題目要回答的是哪個問題
Make-a-thon 是 Figma 與創作者媒合平台 Contra 共同舉辦的開放比賽，全程要求用 Figma Make 完成作品——也就是用 prompt 把想法直接寫成可執行的網頁原型。今年的題目把焦點放在「互動」：請參賽者重新想像我們和軟體之間最常用的那幾組手勢，找出下一個版本。
題目的隱藏條件是時間：很多作品從構想到成品只花了一兩天，這在過去用傳統 prototyping 工具是做不到的。Figma Make 把「想法到能玩」的距離壓到一個下午，門檻降到只要描述清楚體驗、剩下的結構讓 Make 接手。這也是這次得獎作品最值得讀的地方——它們示範了 Figma Make 在哪些題目上可以發揮，以及 maker 真正的工作 重心已經從「怎麼實作」轉移到「想要創造什麼感覺」。
Common Thread — 把限制做成功能的多人共織畫布
Best Overall 由 Charlota Blunárová 的 Common Thread 拿下。靈感來自百年老的女紅 sampler 傳統——一塊布、一代代繡上去、傳給下一個人。Common Thread 把這件事搬到網路：訪客挑線色、選針法、在共用畫布上留下自己的針腳，旁邊就是其他陌生人的作品。
最有意思的設計判斷是 Charlota 對「規模」的態度。她說：「在每個工具都在拼速度與規模的時代，限制本身就是答案。所有人共用的就只有那一塊畫布。」上線到現在累積了 10 萬針以上，但永遠只有一塊布。對學設計的人來說，這是一個很好的提醒：稀缺感和共有感是一體兩面，刻意把擴張關掉，反而能換到一種多人軟體很少做出來的儀式感。
Charlota 沒有任何工程背景，整個專案是一個下午用 Figma Make「vibe coded」出來的，包含 real-time 協作和互動畫布控制。她的 Make 心法是：「先描述體驗的感覺，不要急著列功能。讓 Make 把結構搭起來，再用 Figma 補設計細節。」
下次用 Figma Make 開新案，第一個 prompt 試著只描述「使用者打開頁面那一秒的感覺」——不要寫 layout、不要寫元件，把氛圍寫清楚就好。等 Make 把骨架搭起來，再在 Figma 裡準備好色票、字體、logo，貼回 Make 當參考圖讓它套上去。比一開始就寫死規格容易很多。
Pucker — 用嘴唇做選擇的免手互動層
New Interaction 獎落到了 Aleyna Çatak 的 Pucker。Aleyna 自稱是個「busy hands」——她在編織、烘焙、做設計時手永遠停不下來，傳統的點擊、滑動、語音都會打斷她的 flow。她要的工具是：人在做別的事情時，還能完成導航和選擇。
Pucker 的方案是用頭部移動當游標、用嘴唇的「pucker」動作（嘟嘴）做確認。完全不用手、也不用講話。Aleyna 形容 Pucker 是一層「flexible interaction layer」，可以套在任何 app、任何平台上，把現有 UI 的點擊事件交給臉部完成。這對無障礙設計（accessibility）特別有意義，但她的目標更大：「我希望這件事最後變成像點擊一樣自然，沒人會多想一次。好的設計是看不見的。」
她的 Make 心法很實用：「對程式有點基本概念是值得的——就算只是高層次的理解，在 troubleshooting 時也會差很多。」對轉職新手，這是一個誠實的提醒。Make 把寫程式門檻拉低，但不是拉到零；把「看得懂程式在發生什麼」這件事也練起來，會讓 Make 的產出品質明顯往上跳。
挑一個你最常用的 app，在 Figma Make 裡 prompt 一個假設：「如果這個 app 的主要操作不能用手指，要怎麼設計？」可能是用聲音、表情、頭部、甚至呼吸。把替代互動層做出可以玩的版本——這個練習能讓你對「手勢」這件事敏感很多，也是無障礙思維的入口。
Duet Booth — 把雙人快照亭拆掉時間與空間
Reimagining Iconic Interactions 獎給了 Paige Latimer 的 Duet Booth。傳統雙人快照亭從 1920 年代之後變動不大——必須兩個人坐在同一塊布幕後、同一時間按下同一個按鈕。Duet Booth 把這兩個前提都拆了：兩個人可以在不同地方、不同時間各自拍，系統再把兩段時間軸縫起來成同一條快照條。
Paige 是底片攝影迷，她在乎的是快照亭原本帶給人的東西——共同創造、立刻可分享、有實體的儀式感。她想知道，這種感覺在數位空間還能不能成立。
技術面其實很硬：live camera feed、影像合成、跨時區同步，每一項拆開都是工程題。Paige 說 Figma Make 把這些技術細節接管掉，讓她可以把心力留在體驗上：「我可以一直停留在創作的 flow，快速跑迭代——對這種以互動為主的東西特別重要。」她的 Make 心法是：「先把核心互動弄好再處理視覺細節。等核心對了，後面的東西才有東西可以對齊。」
挑一個歷史悠久的「線下儀式」——簽到簿、便條紙、留言本、老式拍立得——把它的「時間軸假設」拆掉，問自己：如果這件事可以非同步、可以遠距、可以分散在不同人手上，會變成什麼？把答案做成 Figma Make 原型。先抓核心互動，視覺收尾。
Airwwave — 會頂回來的手勢樂器
Boundary Pushing 獎給了 Lee Black 的 Airwwave，一個用相機讀手勢、再轉成 ambient 音景的網頁樂器。Lee 是業餘 DJ，他想做一件音樂軟體很少做的事：讓樂器有自己的個性，不完全聽指令。他描述自己想要的感覺：「你是用手感受音樂，不是用旋鈕在控制；聲音會回頂回來——你和它在跳舞。」
最難的是控制感與隨機感的拉扯。手勢太靈敏會混亂，太鈍又斷掉連結；音色出現的時間需要一點變化，淡入淡出要自然。Lee 在 Figma Make 裡先把 gesture engine 和核心行為 prompt 出來——以「思考夥伴」的方式工作，沒有先做視覺。他的 Make 心法很反直覺：「不要太早設計外觀。先讓東西動起來，醜也沒關係。」
對學設計的新手，Lee 的工作流值得借鏡。一般練習會從 visual hi-fi 入手，因為那是最熟悉的肌肉。但對 expressive、dynamic 的東西——遊戲、聲音、互動裝置——核心其實是「動態感」。動態錯了，UI 再漂亮都救不回來。Make 給設計師一個之前沒有的選項：先 prompt 動態邏輯，視覺最後再上。
下次做動態類專案（轉場、micro-interaction、互動 prototype），先在 Make 裡用「灰底加幾何 placeholder」的形式 prompt 出純動態原型，把動態跑順。等手感對了再回到 Figma 把視覺鋪上去。等於把 Lee 的「核心先動，視覺最後」翻譯成你的工作流。
Tokyo — 沒有目的的 16-bit 互動城市
Excellence in Craft 獎給了 Kiel Cole 的 Tokyo——一座 16-bit 風格的可漫遊互動城市。逛街、進一蘭點拉麵、翻黑膠唱片、聽夜晚街頭的環境音，沒有計時器、沒有進度條，只有一個讓人慢慢晃的世界。
Kiel 對這件事的描述很乾淨：「我想做一個沒有任何任務目標的互動。希望大家進去之後，感受到我在東京街頭的那種狀態——好奇、完全在當下。食物、街機、夜晚的能量，我想用一個更未來、更風格化的鏡頭去致敬它們。」每一間店都有自己的配樂（她自己做的）、環境音、互動細節，連夾娃娃機都會動。
她的 Make 心法是這次裡面最技術導向的一條：「prompt 時不要怕換不同的模型，像 Claude 跟 Gemini。就把它們當不同個性的合作者，每個有自己擅長的東西。」這是很實用的提醒：對沒有寫程式背景的設計師，Figma Make 背後其實接著多個模型，遇到瓶頸時換一個 LLM 試試，常常比反覆改 prompt 更有效。
下次做網頁原型卡關時，把同一個 prompt 換到另一個模型再跑一次，比較兩邊輸出的結構差異。Claude 偏邏輯結構、Gemini 偏視覺與 layout 直覺，很多時候不是 prompt 不夠好，只是這個任務換個模型更合適。Kiel 把這件事當作「換合作者」，思路就鬆開了。
Reframe — 把隨手截圖變成值得發出去的作品
Fan Favorite 投票冠軍是 Dann Petty 的 Reframe。把設計截圖貼進去，會自動排出 28 種 layout，每一種都是「準備好可以發出去」的版本。Dann 的觀察很直白：「我們花了那麼多時間做 UI，分享時卻只是直接截圖丟出去。Reframe 就是想處理這個摩擦感。」
幾小時就有可用原型，但他說最難的是「克制」——Make 寫東西太順了，很容易功能膨脹。最後 Reframe 守住一件事：把 28 個 template 設計到「畫面卡進去那一秒、整張截圖突然像可以放 portfolio 的作品」。
Dann 的 Make 心法可能是 6 個 maker 裡最直白的一句：「停止把 Figma Make 當作 code generator，開始把它當合作者。描述你想要的感覺，而非規格。」這句話對學 Figma 的新手特別重要。如果你還在用「列功能規格給它」的方式 prompt Make，產出會卡在「能跑但沒靈魂」。如果你用「描述使用者打開那一刻的情緒、節奏、預期」的方式 prompt，你會看到完全不同等級的成品。
把你下一個 Make prompt 拆兩個版本：第一個寫功能列表（「需要 A/B/C」），第二個寫使用者體驗（「打開時要感覺如何，操作完後要記得什麼」）。各跑一次，把兩邊輸出並排看。差距大到你之後不會再用第一種寫法。Dann 那句「描述感覺、不只是功能」是 Figma Make 最值得收進工具箱的 mental model。
整體觀察
把這 6 件作品擺在一起看，可以歸納出一條清楚的軌跡：Figma Make 改變的核心，是「誰可以 ship 東西」這個問題的答案。Charlota 沒寫過程式、Aleyna 是初學者、Lee 從沒做過 web 樂器、Paige 不熟即時影像合成——但他們都把作品上線了。
過去設計師的天花板大多卡在「這個原型要不要找工程師接手」這個轉換點。卡住，作品就停在 mock-up；接手成本太高，多半就放掉。Figma Make 沒有讓設計師變成工程師，但把那個轉換點往後推了非常多——一個下午就能跨過。Charlota 對這件事的觀察很乾淨：「Figma Make changes who gets to ship things.」
對轉職新手與設計科學生，這意味著兩個現實：第一、你接下來的作品集可以從靜態 Figma 檔升級成真的可以打開來玩的網頁原型；第二、prompt 能力會慢慢變成設計工具的延伸——能不能描述清楚體驗、能不能跟模型來回對話，是新一代設計師的肌肉。Make-a-thon 這 6 件作品還遠遠不是 Figma Make 的天花板，但它們是你開始用它的最佳起點。
QUOTE · 原文金句Figma Make 改變了誰可以 ship 東西。各種背景的人，現在都能把想法做成原型、推上網路。我希望接下來的網路，會多一點古怪、多一點好玩。
這篇 6 個重點濃縮成可截圖收藏的清單
- 01 Make-a-thon 2026 與 Contra 合辦、總獎金 $100K，要求全程用 Figma Make 完成。
- 02 Common Thread（Best Overall）用「全網只有一塊布」的限制做差異化——稀缺帶出儀式感。
- 03 Pucker 用頭部移動加嘟嘴取代手指，定位是「flexible interaction layer」、可疊到任何 app。
- 04 Duet Booth 把雙人快照亭從同時同地，拆成可跨時區、跨時間的非同步合作體驗。
- 05 Airwwave、Tokyo、Reframe 三件作品共通的 Make 心法：先寫感覺、再寫功能；先動態、再視覺。
- 06 最大的轉變是 ship 門檻——Make 把「找工程師接手」這個關卡推遠很多，設計師可以自己上線。
