Figma

Figma 本週重磅發佈：全面解析 Figma Make Kits 與 Attachments 工作流

Figma 本週重磅發佈 Make Kits 與 Make Attachments 更新！過去 AI 只能「模仿外觀」，現在透過綁定真實 npm 代碼庫與 Markdown 規範，AI 終於能完全理解團隊的 Design System。本文將手把手帶你實作，讓 AI 設計稿直接對接前端代碼，完成從「畫布像素」到「真實產品」的極速落地工作流。

Figma Make Kits＆Attachments

有用過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）」。

在彈出來的視窗中，系統會詢問你要從零開始建立，還是調取現有的資源。對於已經擁有成熟設計系統的團隊，這裡請毫不猶豫地選擇「調取現有的」。

第二步：導入代碼庫（Import npm Packages）

這是整個 Make Kits 最具革命性的一步。在這裡，你需要導入前端真實使用的 npm package（例如團隊私有的 React 組件庫，或是開源的 Ant Design 等）。

過去，AI 與工程師之間有一道難以跨越的牆——AI 只懂畫布上的像素，工程師只認終端機裡的代碼。但在這個步驟中，你直接將代碼庫綁定進了 Figma。當 AI 在接下來的流程中決定要放置一個「下拉式選單」時，它呼叫的不再是圖形的組合，而是真實的代碼組件。這讓設計稿從第一秒起，就與 Codebase 保持了 100% 的結構同步。

第三步：寫入視覺樣式與邏輯規則（Libraries & Guidelines）

光有代碼組件還不夠，AI 還需要知道這些組件的「使用時機」與「品牌外觀」。

1.導入 Libraries：繼續將你們已經發布的 Figma 庫導入進來。這確保了 AI 會嚴格遵守團隊定義好的 Variables、Color Tokens 與 Typography。

2.撰寫 Markdown 指南（Guidelines）：你可以把團隊的設計規範寫成一份 .md 文件並拖曳進去。這就像是寫給 AI 的 Prompt。你可以明確地告訴 AI：「在表單頁面中，主要操作必須使用 Primary Button，取消動作只能用 Text Link；且所有卡片間距必須遵循 8px 的倍數」。有了這份指南，AI 就不會再隨機亂配，而是具備了真正的設計邏輯。

第四步：測試生成與團隊發佈

前置設定都完成後，千萬別急著結束。在正式發佈前，你可以進行一次「測試生成」。試著給 AI 一個簡單的指令，例如「生成一個具有三個定價方案的訂閱頁面」，看看它調用的顏色、間距與組件是否完全符合你的預期。

如果產出的結果還有瑕疵，隨時可以回去微調 Markdown 的規則說明。一旦確認測試沒有問題，你就可以點擊發布，將這個 Make Kit 儲存到團隊的 Library 中。從這刻起，你們團隊就擁有了一個「精通自家前端組件與設計邏輯」的專屬 AI 設計助手。

Make Attachments

Make Attachments ，簡單來說就是給了 AI「記憶」與「業務邏輯上下文」。

過去在使用 AI 生成工具時，最令人疲憊的就是「提示詞疲勞」——因為 AI 沒有記憶，你每次開啟新的對話，都必須重新貼上一大堆背景資訊與條件限制。Make Attachments 完美解決了這個痛點。它允許你直接將各類文件作為「附件」綁定在提示詞中，讓 AI 具備持久的專案記憶，並產出高度客製化、符合當下任務的介面。

以下是三個進階應用場景：

餵產品需求 (PRD / PDF / Markdown)：設計師可以直接把產 PM 寫好的需求文檔作為附件丟給 AI。AI 會自動閱讀文件內的限制條件與功能清單，並嚴格依照你的 Make Kit 規範，把文件裡提到的內容一次性轉換成具備正確組件的排版。
餵真實資料 (CSV / JSON)：可以上傳真實的業務數據。例如，在設計一款理財 App 的投資組合介面時，直接餵入包含 00712、00929、0050 和 00713 等 ETF 標的與殖利率資訊的 CSV 檔案。AI 會直接將這些真實的股票代碼與數據填入 UI 列表中。這種具備「真實數據體感」的原型，在向主管或利害關係人提案時，說服力是傳統假稿無法比擬的。
餵視覺草圖 (截圖 / 白板 Wireframe)：不管是在白板上手繪的線框圖，還是某個競品 App 的截圖，都可以作為附件上傳。AI 能夠精準識別圖像中的介面架構，並直接用你們公司專屬的設計系統（Design System）將其「重構」出來，省去大量拉框框的苦工。

小結語

Make Kits 與 Make Attachments 的問世，宣告了 AI UI 設計工具正式從「概念玩具」進化成了真正的「生產力武器」。

然而，這套架構要真正落實在大型企業中，往往面臨著最後一道關卡：合規與審核。

對於有著嚴格合規要求的產業（例如證券體系或金融機構）來說，法規審核的流程往往比設計本身更耗時。為了解決這個痛點，完成企業落地的最後一哩路，Figma 這次同步在企業版推出了 Buzz 的內建審核工作流（測試版）。

這意味著，設計稿不再需要手動匯出成圖片、發到外部通訊軟體中來回確認。從 AI 生成畫面、套用前端標準 npm 組件，一直到最終的管理員合規簽核，全部都能在 Figma 平台內一站式完成，建立起極度安全且高效的評估循環。

從「設計與代碼的終極對齊」到「內建合規審核」，Figma 這次的更新徹底打通了產品落地的任督二脈。如果你或你的團隊還在苦惱 AI 產出的設計稿無法直接使用，這套全新的工作流絕對值得立刻導入。準備好讓 AI 真正加入你的開發團隊了嗎？打開你的 Figma，今天就開始建立團隊的第一個 Make Kit 吧！

Source：