Figma 本週重磅發佈：全面解析 Figma Make Kits 與 Attachments 工作流
Figma 本週重磅發佈 Make Kits 與 Make Attachments 更新！過去 AI 只能「模仿外觀」，現在透過綁定真實 npm 代碼庫與 Markdown 規範，AI 終於能完全理解團隊的 Design System。本文將手把手帶你實作，讓 AI 設計稿直接對接前端代碼，完成從「畫布像素」到「真實產品」的極速落地工作流。
有用過Figma make的人應該都知道，當我們輸入提示詞，看著 AI 瞬間生成精美的排版時，第一眼確實令人振奮。但仔細拆解圖層就會發現，這些介面往往是用隨機的形狀、不受控的色塊，以及很容易跑掉的文字拼湊而成的。在過去的版本中，即使 Figma 的 Make 功能可以初步「參考」組件庫，但它本質上仍停留在「外觀的模仿」。AI 生成的按鈕，在系統底層只是一個帶有圓角的藍色矩形，它不懂什麼是 Design Token，也沒有繼承任何 Variables。
這導致了一個尷尬的局面：設計師必須花費大量時間把 AI 產生的隨機圖層手動替換成公司標準組件；而前端工程師拿到這些「沒有靈魂的像素」時，依然得從零開始對照著畫面寫程式碼。AI 雖然加快了靈感發想，卻沒有真正解決設計與工程之間的巨大斷層。
本週重磅發佈：Make Kits 與 Make Attachments
就在幾天前（2026 年 4 月2日），Figma 推出了一次重大更新——正式發佈了 Make Kits 與 Make Attachments。
此次 Figma 針對大型組織與產品團隊痛點所給出的終極解答，核心目的非常明確：讓 AI 的產出物，無縫接軌團隊真正在使用的 Design System。
核心轉變：從「畫布像素」到「真實代碼」的跨越
Make Kits 的誕生，代表著 AI 生成設計正式從「模仿階段」跨越到了「理解與邏輯構建」的層次。
現在，AI 不再是憑空捏造畫面。透過這項新功能，設計系統負責人可以將真實的 npm packages（前端代碼庫）、Figma Library 裡的 Variables 與 Styles，甚至是一份寫滿使用規範的 Markdown 指南，全部打包成一個「Kit」餵給 AI。
這表示說，當你未來請 AI 生成一個「行動端結帳頁面」時，它畫面上的那顆「確認付款」按鈕，已經不再是隨機生成的圖形，而是直接對應到你們家工程師在 React 裡寫好的那個 Primary Button 代碼組件。生成的介面不再只停留在概念層面，而是無限逼近真實產品的落地結構。
Make Kits
透過 Make Kits，Design System Owners 可以將團隊的規範一次性打包。這意味著 AI 必須在你設定的框架與約束內進行設計。更重要的是，這項設定是「一次配置，全域共用」的。只要團隊發布了這個 Kit，未來組織內的每一個人在使用 Make 生成介面時，起始的上下文都會完全一致，大幅降低了後續人工除錯與Design Review的成本。
接下來，我們將示範如何透過四個核心步驟，將你的設計系統餵給 AI：
實操四步驟：
第一步：啟動與創建 Kit
首先，打開 Figma 的 Make 介面。在頁面右上角找到 Settings 圖示並點擊，選擇「創建一個 Kit（Create a Kit）」。
在彈出來的視窗中，系統會詢問你要從零開始建立，還是調取現有的資源。對於已經擁有成熟設計系統的團隊，這裡請毫不猶豫地選擇「調取現有的」。
