Figma Make 新功能介紹:Make kits 與 Make attachments 完整解析

把設計系統與真實檔案直接餵給 AI,原型從第一版就貼近你的產品
設計師 Riven

設計師 Riven

2026年4月11日 下午 5:45

UI/UX 設計
Figma Make kits 與 Make attachments 新功能宣傳圖

TABLE OF CONTENTS

01Figma Make 這次到底更新了什麼

02Make Attachments:30+ 檔案格式的新可能

03Make Kits:教 AI 認識你的設計系統

04設計師可以怎麼實際應用

05限制與注意事項

PROLOGUE / 序章

AI 能在幾秒內產出一個介面。問題從來不是「快不快」,而是「像不像你的產品」。

過去使用 Figma Make,你大概都有過類似經驗:輸入一段 prompt,AI 確實給了你一個看起來還算漂亮的第一版。但仔細一看——元件不是你的設計系統、文案是泛泛的 placeholder、那些真正棘手的邊界狀態完全沒出現。

於是你花在改的時間,比從零畫還多。問題不在 AI 生得不夠快,而是它沒有你們團隊正式開發時會用到的 context。

4 月 2 日 Figma 官方正式推出 Make kitsMake attachments 兩項新功能,就是要把這件事從根本解決。本文帶你完整拆解。

CHAPTER 01 / THE UPDATE

這次到底
更新了什麼

Figma Make 是 Figma 去年推出的 prompt-to-code 功能——你用自然語言描述,它幫你生出可互動的 React 原型。聽起來很科幻,但實際用起來,第一版永遠跟「能交」有段距離。

這次的兩個新功能是同一個策略的兩個層級:把產品真正的樣貌帶進 AI 生成流程。一個處理「設計系統層級」的 context,一個處理「當下專案層級」的 context。

MAKE KITS

教 AI 認識你的設計系統

把 npm 套件、Figma library 的樣式與 tokens、以及 Markdown 寫的使用指引打包成一個 kit。每次 Make 生成都從你自己的元件出發,而不是泛用模板。

MAKE ATTACHMENTS

把真實檔案直接拖進 Prompt

PRD、品牌指南、CSV、JSON、截圖、影片、SVG 都可以直接附上。不用再把內容複製成一大段文字描述,AI 直接讀原始檔。

"問題不在第一版的品質,
而是它沒有你們團隊
開發時會用到的 context。"

CHAPTER 02 / ATTACHMENTS

Make Attachments
把真實檔案拖進 Prompt

Make attachments 最讓人驚艷的地方是檔案類型範圍之廣。官方把 attachment 的用法分成兩種角色,這個區分其實很關鍵,因為它決定了你要丟什麼檔案進去。

Figma Make attachments 操作介面,JSON、SVG、CSV 檔案與 React 程式碼編輯器
Attachment 直接拖到 prompt 輸入框,AI 在生成時會把內容當成參考素材。

作為 CONTEXT | 背景脈絡

當成背景知識給 AI 參考

典型用法:PRD、品牌指南、程式碼檔案、規格文件、tone of voice 手冊。AI 會理解這些內容並在生成時參考,但不會直接塞進 UI 裡。

作為 CONTENT | 實際素材

當成要放進原型的真實素材

典型用法:產品照片、CSV 資料集、JSON API response、示範影片、SVG icon。AI 會用真東西填進介面,不再是 placeholder。

完整支援格式

文件PDF、Markdown

程式TSX、JS、CSS 等主流語言

資料CSV、JSON

圖像JPEG、PNG、GIF、SVG

媒體MP4、MP3

文字類檔案單檔上限 1MB,媒體類較寬鬆

Figma Make 拖曳 MP4 影片檔案作為 attachment 的操作介面
連 MP4 影片檔都可以直接拖進 prompt,AI 會理解動態內容。

舉個具體場景:你在做一個 onboarding 流程。過去你要在 prompt 裡寫「這一步是法律條款,大概 500 字長,字小一點」。現在你直接把法務給的 PDF 附上,AI 會用真正的條款全文去排版。

於是那個過長的合約、那個需要滾動的頁面、那個「等等,我們的確認按鈕要能固定在底部」的問題——全部在原型階段就浮現,而不是等工程師實作到一半才發現。

CHAPTER 03 / KITS

Make Kits
設計系統的 AI 版說明書

如果 attachments 解決的是「這次專案的 context」,Make kits 解決的則是更長期的問題:讓 AI 每次都從你的設計系統出發

概念上,一個 Make kit 就是把三件事打包在一起:你們團隊的元件(npm 套件或 Figma library 樣式)、用 Markdown 寫的使用指引,以及 AI 該怎麼拼裝這些積木的上下文。

Figma Make kits 設定介面,顯示匯入的 library 數量與 npm 套件清單
一個 kit 可以同時匯入多個 library 與 npm 套件。

組一個 kit 的三個步驟

01

匯入元件與樣式

從 npm 公開或私人 registry 匯入程式碼元件,或直接把 Figma library 的 tokens 與樣式同步進來。兩種來源可以混用。

02

撰寫使用指引

用 Markdown 說明「這個元件什麼時候該用哪個 variant」「間距該抓多少」「禁止做什麼」。可以自己寫,也可以請 Make 分析套件後產出初稿。

03

發布給團隊

組好之後可以發布給團隊或組織,管理員可以審核並預設啟用。團隊所有人建立 Make 專案時,第一版就是從你們的系統出發。

Make kits 從 3 月 26 日開始逐步推送給付費方案的 Full seat 使用者,個人免費帳號目前還用不到。

務實的玩法是——即使你沒有企業方案,可以先把 kits 理解為「未來標準」,現在用 attachments 達成類似效果:把 design token JSON、規範 Markdown 檔案附上,先享受八成的紅利。

CHAPTER 04 / USE CASES

設計師實際
可以怎麼用

把這兩個功能串起來之後,幾個常見情境會變得截然不同。以下是我自己覺得最有感的四個場景。

SCENARIO 01

完整 Onboarding 流程原型

把法務 PDF、真實測試資料的 CSV、品牌指南同時丟進去,Make 會用真實長度的條款和真實邊界條件排版,而不是把法條縮短成一行。

SCENARIO 02

Dashboard 與資料密集介面

附上 JSON 格式的真實 API response,AI 生出來的表格與圖表會直接使用你的欄位名稱、真實的數值範圍。一次就能看出「這欄太擠了」「這張圖要換 log scale」。

SCENARIO 03

既有介面的改版提案

截圖舊版介面當 attachment,加上改版需求描述,Make 會產出對照版本。開會討論時直接拿舊介面與新原型並排,說服力遠比簡報高。

SCENARIO 04

品牌一致的 Landing Page

品牌指南 PDF + Logo SVG + 產品照片一次附上,不用再反覆 prompt「顏色用 #xxx、字體用 xxx」。對接客戶案時尤其省時。

CHAPTER 05 / NOTES

使用前要知道的
幾件事

幾個目前已知的限制與注意事項,開工前先知道比較省心。

01文字類檔案單檔上限 1MB。大 PDF 或整份程式碼需要先切分。

02Make kits 只開放給付費方案的 Full seat,個人免費帳號目前用 attachments 就好。

03使用 Figma Community 設計檔當 prompt 來源時,Make 會自動生成 Attributions.md,商用前務必檢查授權範圍。

04官方建議用 Auto Layout 排版的設計檔效果最好,Make 比較能正確讀懂版面邏輯。

05Prompt 工作流建議「先排版、後功能」。先讓 Make 把畫面做出來,再逐步加上互動。

EPILOGUE / 後記

重點回顧

Figma 在 4 月 2 日推出 Make kits 與 Make attachments 兩項功能。

Make kits 讓 AI 從你的設計系統出發,Attachments 讓 AI 讀得到真實專案檔案。

Attachments 支援 PDF、Markdown、CSV、JSON、SVG、程式碼、圖片、音訊、影片,共 30+ 種格式。

核心改變:AI 原型從「泛用模板」轉向「從你的系統與內容出發的工作草稿」。

Make kits 限付費 Full seat(3/26 起),Attachments 已全面開放。

AI 原型製作的下一階段,
重點不是生得多快,
而是生得多像你真正要做的東西。

RESOURCES / 延伸資源

Figma 官方 blog:Build with more context and more control in Figma Make

Help Center:Attach files to a prompt

Help Center:Get started with Make kits

Figma 介面設計課程

RAR 課程

Figma 介面設計完整攻略

想用好 Figma Make 這類 AI 功能,前提是你對 Figma 本身夠熟。從零開始扎實學會元件、Auto Layout、設計系統,才能真正把 AI 變成你的加速器。

了解課程 →

AI 設計覺醒
訂閱制✨ AI × 設計趨勢

AI 覺醒設計應用攻略|RAR 設計攻略訂閱方案

AI 工具每週都在更新,我幫你過濾雜訊,只整理對設計師真正有用的 AI 應用

AI 工具實測與工作流分享

設計師角度的 Prompt 技巧

每週精選 AI × 設計新知

文章標籤

# figma