Figma AI 教學：所有 AI 功能完整介紹，從圖片編輯到 MCP 雙向工作流
2026年3月15日 下午 1:43
UI/UX 設計
🔔
想跟上 AI × 設計的最新動態？加入 AI 設計覺醒訂閱，每週幫你整理最值得關注的 AI 工具更新。
如果你最近打開 Figma，可能會發現選單上多了不少跟 AI 有關的按鈕。從用文字生成設計稿、一鍵去背、到把程式碼直接丟進畫布變成可編輯的 Frame——Figma 在過去一年密集推出了十幾項 AI 功能。
但問題是：功能太多、更新太快，很多設計師根本不知道 Figma 現在到底能用 AI 做什麼，哪些功能真的好用，哪些只是噱頭。
這篇文章幫你一次整理：Figma 目前所有 AI 功能的完整介紹，包含每個功能是什麼、怎麼用、適合什麼場景，以及設計師該怎麼把這些工具融入日常工作流程。不管你是剛接觸 Figma AI 的新手，還是用過幾次但沒有系統了解的老用戶，看完這篇都能建立完整的認知。
Figma AI 是什麼？不只是加了 AI 那麼簡單
很多人以為 Figma AI 只是在工具列上多幾個按鈕，但實際上 Figma 從 2024 年底到 2025 年 Config 大會，做的是一次完整的平台轉型——從「協作設計工具」變成「AI 驅動的設計到產品平台」。
Figma CEO Dylan Field 在 Config 2025 的主題演講說得很直接：「在一個 AI 讓建造軟體變得比以往更容易的世界裡，設計會變得更重要。」Figma 的策略不是用 AI 取代設計師，而是把 AI 當作加速器，讓設計師能更快地從想法走到成品。
Figma 2025 年的 AI 報告也呼應了這個趨勢：85% 的設計師和開發者認為，學會跟 AI 協作對未來的職涯非常重要。而在實際使用上，33% 的設計師已經在用 AI 生成設計素材，22% 用 AI 產出介面初稿。
以下是目前 Figma AI 功能的完整分類，我把它們分成四大類讓你更好理解：
🎨 生成類
First Draft（生成設計稿）、Figma Make（prompt-to-prototype）、AI 圖片生成
✂️ 編輯類
去背、擦除物件、分離物件、延伸圖片、向量化
⚡ 效率類
自動圖層命名、AI 內容替換、AI 互動原型、視覺搜尋、自動建議
🔗 整合類
MCP Server、Code to Canvas、Code Connect、FigJam AI
First Draft：用文字生成設計稿
First Draft 是 Figma 內建的 AI 設計稿生成功能。你只要用文字描述你想要的介面——比如「一個有搜尋欄和卡片列表的美食探索 App 首頁」——Figma 就會在幾秒鐘內生成一份可編輯的設計稿。
注意，生成出來的不是圖片，而是完整的 Figma 圖層結構：有 Frame、有 Auto Layout、有 Component——你可以直接在上面修改，當作設計的起點。
適合的場景：
→
快速產出 wireframe 或低保真原型，跳過空白畫布的發呆時間
→
同時生成多個方向快速比較，再挑最好的去深化
→
非設計師（PM、工程師）快速把想法視覺化，降低溝通成本
⚠️ First Draft 目前生成的品質大約在「堪用的 wireframe」等級，離可以直接交付的高保真設計還有距離。把它當起點而不是終點，是正確的使用心態。
Figma Make：從設計到可互動原型
Figma Make 是 Config 2025 最受矚目的新產品。簡單說，它是一個 prompt-to-prototype 工具——你可以用文字描述，或直接丟一個 Figma 設計檔進去，Figma Make 會幫你把它變成一個可互動、有真實資料的高保真原型。
跟 First Draft 的差異在於：First Draft 生成的是靜態設計稿，Figma Make 生成的是可以點擊、有互動邏輯、甚至可以接資料庫的原型。它底層跑的是真正的 React 程式碼，不只是一張好看的圖。
更重要的是，Figma Make 支援匯入你的 Design System。透過 Make Kits，你可以把 Figma Library 裡的顏色、字型、元件直接帶進 Make，生成的原型會自動套用你的品牌規範，不會是一堆通用的灰色方塊。
在 Schema 2025 大會上，Figma 進一步宣布 Make 可以匯入你的 React Design System，讓生成的原型直接使用跟你產品一樣的程式碼元件。這代表原型和最終產品之間的落差大幅縮小。
Figma Make 可以做什麼：
→
用文字 prompt 生成完整的互動原型
→
把現有 Figma 設計稿轉成可互動版本
→
選取原型中的特定區域，用自然語言修改
→
整合 Supabase 等後端，做出有真實資料流動的原型
→
在 Figma Make 的 prompt 框裡可選擇不同 AI 模型（包括 Claude）
⚠️ Figma Make 目前仍在 Beta 階段，Make Kits（匯入 Design System）需要申請早期存取。功能會持續擴充。
AI 圖片編輯五件套
這是 Figma AI 目前最實用的一組功能。從 2024 年底的 Remove Background 開始，到 2025 年 12 月一口氣推出 Erase、Isolate、Expand 三個工具，再到 2026 年 2 月的 Vectorize，Figma 現在有五個原生的 AI 圖片編輯工具，讓你不用再跳去 Photoshop 做小修改。
| 功能 | 做什麼 | 常見場景 |
|---|---|---|
| Remove Background | 一鍵去除圖片背景 | 產品圖去背、人像擷取、Logo 處理 |
| Erase Object | 用套索選取物件後移除，AI 自動補背景 | 移除雜物、清理產品照、去掉浮水印 |
| Isolate Object | 把選取的物件分離成獨立圖層 | 重新構圖、對單一物件調色 / 加效果 |
| Expand Image | AI 延伸圖片邊緣，適配新比例 | 桌面圖轉手機版、方形圖變橫幅 |
| Vectorize | 把點陣圖（PNG/JPG）轉成可編輯向量圖 | 手繪草圖數位化、手寫字轉 Logo |
這五個工具都整合在 Figma 的圖片編輯工具列裡。選取一張圖片後，工具列就會出現在上方，所有 AI 編輯功能一目了然。Erase 和 Isolate 使用套索（lasso）選取，操作方式很直覺——大致圈一下就好，不需要像素級的精準遮罩。
這組功能的核心價值不是取代 Photoshop，而是減少工具跳轉。以前設計師做一個簡單的去背或移除雜物，要匯出到 PS、修完再匯回 Figma。現在直接在畫布上搞定，省下的不只是時間，是整個工作流程的順暢度。
如果你對 Vectorize 功能有興趣，我之前寫過一篇完整教學：Figma Vectorize 完整教學 →
日常效率工具：AI 自動命名、內容替換、搜尋
除了前面那些「看得見的大功能」，Figma AI 還有一組融入日常操作的效率工具，這些才是真正每天都會用到的。
📝
Rename Layers
AI 圖層命名
一鍵把「Frame 374」「Rectangle 12」改成有語意的名稱，交接設計檔給工程師必備。
🔄
Replace Content
AI 內容替換
把 Lorem ipsum 替換成 AI 生成的真實感內容——姓名、頭銜、簡介，讓設計稿更接近真實產品。
🔍
Visual Search
視覺搜尋
用截圖、設計局部或文字描述，在團隊檔案或 Community 中找類似設計，找靈感超方便。
⚡
Auto Interactions
AI 互動原型
選取一組 Frame，AI 自動加上互動連結和轉場動畫，快速做出可點擊的原型。
🖼️
Edit Image with Prompt
文字修圖
用文字描述修改圖片——「把背景換成日落」「加一杯咖啡」，底層使用 AI 圖像模型。
✨
Boost Resolution
AI 超解析度
提升低解析度圖片的畫質和清晰度，處理客戶提供的低畫質素材或小圖放大。
MCP Server：讓 AI 讀懂你的設計檔
如果前面的功能是「Figma 裡面加了 AI」，那 MCP Server 就是「讓外面的 AI 讀懂 Figma」。
MCP（Model Context Protocol）是 Figma 推出的一個協議，讓 Claude Code、Cursor、VS Code、OpenAI Codex 這些 AI 程式碼工具可以直接連接你的 Figma 設計檔。連接之後，AI 可以讀取你的 Frame 結構、元件關係、Design Token，然後生成精準的程式碼——不是亂猜，而是真的根據你的設計規格來寫。
MCP 最強大的功能是 Code to Canvas：用 Claude Code 或 Codex 生成的 UI，可以直接擷取到 Figma 畫布上，變成可編輯的 Figma Frame。反過來，你也可以選取 Figma 的設計，讓 AI 讀取結構後直接生成對應的程式碼。這就是所謂的「雙向工作流」。
搭配 Code Connect 功能，你還可以把 Figma 元件跟你 codebase 裡的程式碼元件對應起來——比如 Figma 的「Primary Button」對應到 <Button variant="primary" />。這讓 AI 在生成程式碼時不是用通用的 HTML，而是用你們團隊的元件庫。
這塊我寫過兩篇詳細教學，有興趣可以深入：
AI Credits 怎麼算？免費方案能用什麼？
Figma AI 功能不是全部免費的。這裡整理目前的計費方式：
| 方案 | AI 額度 | 說明 |
|---|---|---|
| Starter（免費） | 有限額度 | 可使用基本 AI 功能，但有使用次數限制。MCP Server 限制每月 6 次工具呼叫。 |
| Professional | 含基礎額度 | Full Seat 可使用所有 AI 功能。可購買 AI 訂閱方案增加額度。 |
| Organization / Enterprise | 含基礎額度 + 可訂閱 | 支援 AI 訂閱和按量付費兩種模式。管理員可控制誰能使用付費 AI Credits。 |
簡單來說：如果你是免費用戶，可以試用大部分 AI 功能，但用完額度就得等。如果你是 Professional 付費用戶，所有功能都能用，但重度使用的話可能需要額外購買 AI Credits。
Figma 的 AI Credits 採用兩種購買方式：訂閱制（每月固定額度，適合穩定使用的團隊）和按量付費（用多少算多少，適合使用量波動大的情況）。兩者可以同時使用。
設計師該怎麼看待 Figma AI
看完這些功能清單，你可能會有兩種反應：「太好了，以後做設計更快了」或「AI 是不是要搶我的工作了」。
我的觀察是：Figma AI 取代的是設計中的「苦力活」，不是「判斷力」。
去背、圖層命名、生成佔位文字、延伸圖片比例——這些本來就是設計師最不想做、但又不得不做的事。AI 幫你省下這些時間，讓你可以把精力放在真正重要的地方：思考使用者需要什麼、怎麼用設計解決問題、怎麼讓介面不只是「能用」還要「好用」。
前 Figma 設計總監 Jenny Wen 在一場訪談裡說得很到位：「AI 目前能生成在平均水準以上的視覺，但在真正有觀點的設計判斷上還有很大落差。」換句話說，AI 可以幫你做出 70 分的東西更快，但從 70 分到 95 分的那段距離，還是需要你。
我建議的使用策略：
01
先把基本功練好——Auto Layout、Component、Design System 這些核心功能不會因為 AI 而過時，反而是 AI 能幫你做得更好的前提
02
把 AI 當加速器——用 First Draft 快速產出初稿、用 AI 圖片編輯省下跳去 PS 的時間，但最終的設計判斷還是你來做
03
關注 MCP 和 Make——這兩個功能代表的是設計和開發之間的牆正在被拆除，會寫 prompt、懂一點程式邏輯的設計師，價值會越來越高
📝 重點整理
→
Figma AI 不是一個單一功能，而是橫跨生成、編輯、效率、整合四大類的功能矩陣
→
AI 圖片編輯五件套（去背、擦除、分離、延伸、向量化）是目前最實用的功能，直接省掉跳去 Photoshop 的時間
→
Figma Make 是 Config 2025 最大的亮點，代表設計和開發之間的界線正在模糊
→
MCP Server 讓外部 AI（Claude Code、Cursor）可以讀懂你的 Figma 設計檔，實現 Design ↔ Code 的雙向工作流
→
AI 取代的是設計中的苦力活，不是判斷力。基本功（Auto Layout、Component、Design System）依然是核心
→
免費方案可以試用大部分 AI 功能，但額度有限。Professional 以上方案可使用所有功能
延伸資源
站內相關教學：
