Figma AI 是什麼？它不是單一功能，而是一組設計工作流
Figma AI 是 Figma 內建在設計、原型、圖片、文字與開發協作流程裡的一組 AI 功能。它的重點不是產生一張漂亮圖片，而是把想法變成可編輯的設計稿、互動原型與交付線索。
以 2026 年的使用情境來看，Figma AI 的核心價值在於縮短早期探索時間。設計師可以用 First Draft 產出初稿，用圖片與文案工具處理素材，用 Rename layers 整理檔案；工程團隊則可以透過 Dev Mode、MCP、Code Connect，把設計上下文帶進 Cursor 或其他 AI coding 工具。
我的判斷是，figma ai功能最適合拿來加速「第一版」與「整理工作」，不適合取代設計決策。品牌語氣、資訊架構、可用性驗證與 production code 仍然要由團隊負責。
Figma AI 可以解決哪些設計任務
- 用 Figma First Draft 產出網站、App、Dashboard、表單頁的可編輯初稿。
- 用 Figma Make 把 Prompt、既有設計稿或元件變成可操作的互動原型。
- 用 Remove Background、Make Image、Edit Image、Boost Resolution 處理圖片素材。
- 用 Rewrite、Shorten、Translate、Replace Content 處理 CTA、錯誤訊息、卡片內容與多語系介面文字。
- 用 Rename layers 讓圖層命名更接近交付狀態，降低工程師看稿成本。
- 用 Dev Mode、MCP、Code Connect，把設計稿上下文接到 Cursor、React、HTML、CSS 工作流。
Figma AI 和一般圖片生成工具差在哪
| 比較面向 | Figma AI | 一般圖片生成工具 |
|---|---|---|
| 主要產出 | 可編輯設計稿、Frame、圖層、原型、介面文案 | 單張圖片或視覺素材 |
| 適合任務 | UI 初稿、PM Demo、設計交付、元件整理 | 插圖、情境圖、風格探索、廣告主視覺 |
| 後續修改 | 可調整 Auto layout、元件、文字、間距與狀態 | 多半要重新生成或進入修圖流程 |
| 設計系統關係 | 可與 Library、Dev Mode、Code Connect 串接 | 通常不理解團隊元件庫與命名規範 |
Figma AI 功能選擇表：你想做什麼，該用哪個功能？
選 figma ai功能 時，先看任務，不要先看功能名稱。要做介面初稿選 First Draft，要做可操作 Demo 選 Figma Make，要整理交付就用 Rename layers、Dev Mode 與 Code Connect。
| 你想完成的任務 | 優先使用功能 | 適合誰 | 下一步 |
|---|---|---|---|
| 快速產出首頁或 App 畫面初稿 | Figma First Draft | UI 設計師、PM、接案設計師 | 輸入頁面目標、使用者、必要區塊，再人工修版面 |
| 把想法做成可點擊 Demo | Figma Make | PM、產品設計師 | 用多輪 Prompt 調整流程、狀態與互動 |
| 處理商品圖、人像圖或活動素材 | Remove Background、Edit Image、Boost Resolution | 品牌行銷、設計師 | 先確認素材授權，再做去背、延伸或修補 |
| 改寫 CTA、錯誤訊息、卡片內容 | Rewrite、Shorten、Replace Content | PM、UX writer、設計師 | 指定受眾、語氣、字數限制與介面位置 |
| 交付前整理圖層 | Rename layers | 設計師、設計系統負責人 | 先選取要整理的 Frame，再檢查命名是否符合團隊規範 |
| 讓工程師用 AI coding 接設計稿 | Dev Mode、MCP、Code Connect | 前端工程師、設計系統負責人 | 確認元件命名、狀態、token 與程式碼對應 |
從「任務」選功能，不要從功能名稱開始
Figma AI 的功能名稱看起來多，但設計團隊真正需要的是決策路徑。首頁初稿、App Flow、文案改寫、圖片處理、前端交付，背後是完全不同的品質標準。
| 任務類型 | 建議功能 | 不建議這樣用 |
|---|---|---|
| Landing Page 初稿 | First Draft | 直接當最終品牌頁上線 |
| SaaS Dashboard Demo | First Draft 加 Figma Make | 忽略資料狀態、空狀態、錯誤狀態 |
| 介面微文案 | Rewrite、Shorten、Translate | 不審稿就直接放進正式產品 |
| 工程交付 | Dev Mode、Code Connect、MCP | 把 AI 生成程式碼視為 production code |
First Draft 是什麼？適合用來產出什麼設計初稿？
Figma First Draft 是用文字需求快速產出可編輯介面初稿的 AI 功能，適合網站、App、Dashboard、表單與 Onboarding 的早期探索。它產出的不是最終稿，而是可修改的設計起點。
官方文件指出 First Draft 會以 Figma 建立的 wireframing 與 design libraries 作為生成基礎，適合常見網站與行動 App 設計模式。它的優點是快，缺點是還不能直接用你自己的 Design System 生成設計稿。這一點很關鍵，因為多數台灣團隊真正耗時的不是「畫出來」，而是「修到符合品牌規範」。
First Draft 適合的 5 種任務
- App 首頁：快速測試資訊優先順序、主 CTA 與底部導覽。
- Dashboard：建立 KPI 卡片、表格、篩選器與側邊欄的初步結構。
- Landing Page：產出 Hero、痛點、功能、社會證明與價格區塊。
- 表單頁：建立輸入欄位、錯誤提示、確認狀態與提交流程。
- Onboarding：先排出步驟、說明文字、進度提示與完成畫面。
First Draft 不適合直接完成的事
| 不適合事項 | 原因 | 應改由誰處理 |
|---|---|---|
| 最終品牌視覺 | AI 不會完整理解品牌規範、語氣與禁用樣式 | 品牌設計師、設計主管 |
| 響應式細修 | 不同 breakpoint 的閱讀順序與元件行為仍需人工判斷 | UI 設計師、前端工程師 |
| 可用性驗證 | AI 能生成畫面，但不能證明使用者真的看得懂 | 產品設計師、PM |
| 正式交付 | 命名、狀態、元件替換、間距與標註通常還沒到交付水準 | 設計系統負責人、工程團隊 |
First Draft 怎麼用：從需求到可編輯設計稿的步驟
使用 First Draft 的流程是選擇設計類型或 Library、輸入清楚 Prompt、生成設計稿、用 Prompt 或樣式控制修改，最後檢查圖層、元件、版面與品牌規範。
步驟 1：先選擇設計類型或元件庫
在 Figma Design 內開啟 Actions，選擇 First Draft，再依需求選網站、行動 App wireframe 或 basic design 類型。若沒有選，Figma AI 會依 Prompt 判斷適合的 Library。
這裡要保守一點：First Draft 的 Library 不等於你的團隊元件庫。若公司已有 buttons、cards、forms、navigation 的正式 Library，建議把 First Draft 產物視為版面草稿，再手動替換成品牌元件。
步驟 2：輸入清楚的中文 Prompt
中文 Prompt 可以用，但內容要像產品需求，不要像一句靈感。好的 Prompt 會交代目標使用者、頁面目的、必要區塊、資料類型、風格限制與不需要的內容。
| Prompt 類型 | 範例 | 問題或優點 |
|---|---|---|
| 太模糊 | 幫我做一個好看的 SaaS 首頁 | 缺少受眾、產品定位、區塊與轉換目標，容易生成普通模板 |
| 可用 | 為台灣中小企業會計 SaaS 產出 Landing Page 初稿，包含 Hero、三個痛點、功能卡片、客戶評價、方案比較與預約 Demo 表單，語氣專業但不要浮誇 | 能讓 AI 判斷資訊架構，也方便設計師後續替換品牌元件 |
| 更適合改稿 | 把 Hero 改成偏 B2B 採購決策語氣，減少插圖感，CTA 改為「預約 30 分鐘導入諮詢」 | 適合針對局部區塊微調，不會整頁重來 |
步驟 3：檢查圖層、元件與版面
- 確認 Frame 命名是否能讓工程師理解頁面與狀態。
- 檢查 Auto layout 是否穩定，避免文字一長就壓壞卡片。
- 把 AI 生成的按鈕、表單、卡片替換成正式元件庫。
- 檢查間距是否符合 8pt grid spacing 或團隊既有規範。
- 檢查按鈕層級是否符合 button design guidelines。
- 確認品牌色、字體、語氣是否符合 brand guideline manual。
Figma Make 可以做什麼？和 First Draft 差在哪
Figma Make 是 AI prompt-to-app 工具，偏向生成可互動原型、web app 與可分享預覽；First Draft 偏向產出可編輯設計初稿。兩者可以連用，但任務不同。
Figma Make 適合把設計想法變成可以操作的 Demo，例如點擊流程、表單互動、資料卡片切換或簡單網頁預覽。我的使用建議是，先用 First Draft 把 UI 結構排出來，再用 Figma Make 驗證互動與敘事，不要一開始就期待它輸出正式前端架構。
| 比較項目 | Figma First Draft | Figma Make |
|---|---|---|
| 主要用途 | 生成可編輯設計初稿 | 生成互動原型、web app、可分享預覽 |
| 輸入方式 | 文字 Prompt、Library、樣式控制 | Prompt、既有設計稿、圖片、元件、外部資料 |
| 適合階段 | 資訊架構與版面探索 | Demo、互動驗證、提案展示 |
| 主要限制 | 不能直接用自家 Design System 生成完整設計 | 生成程式碼需審查，不宜直接當 production code |
Figma Make 的 4 種輸入方式
| 輸入方式 | 適合情境 | 使用提醒 |
|---|---|---|
| 原型圖或截圖 | 已有手繪流程、競品畫面或低保真概念 | 要補充互動規則，避免只生成相似外觀 |
| 設計元件 | 想讓 Demo 接近既有 UI kit | 仍要檢查狀態、spacing、token 是否正確 |
| 既有設計稿 | 把 Figma 畫面變成可操作原型 | 適合提案與內部驗證，不等於完成前端交付 |
| 純 Prompt | PM 還沒有設計稿，只想先做想法 Demo | Prompt 要寫出頁面、資料、互動與限制條件 |
如何用多輪 Prompt 修改原型
| 改稿目標 | Prompt 寫法 | 檢查重點 |
|---|---|---|
| 調整 Sidebar | 把左側導覽改成 SaaS 後台常見結構，包含總覽、客戶、報表、設定，並加入目前頁面狀態 | Active state 是否清楚，手機版是否有替代導覽 |
| 調整 CTA | 把主 CTA 改成「建立第一個專案」，次 CTA 改成「匯入範例資料」 | 主次層級是否符合產品流程 |
| 調整卡片 | 把統計卡片改成四欄，加入趨勢箭頭、上週比較與空資料狀態 | 資料密度是否合理，文字是否會爆版 |
圖片、文案與整理類 AI 功能有哪些
Figma AI 除了 First Draft 和 Make，還包含圖片去背、生成與編輯圖片、提升解析度、改寫文字、翻譯、替換內容與重新命名圖層。這些功能適合處理設計過程中的小型重複工作。
圖片功能：Remove Background、Make/Edit Image、Boost Resolution
| 功能 | 適合做什麼 | 不適合做什麼 | 下一步 |
|---|---|---|---|
| Remove Background | 商品圖、人像圖、簡報素材去背 | 替代正式商攝修圖 | 檢查邊緣、陰影與授權 |
| Make Image | 產生臨時視覺素材或概念圖 | 生成未授權的品牌資產 | 確認是否能商用，再進入設計稿 |
| Edit Image | 延伸背景、移除物件、局部修改 | 處理高風險真實人物或敏感素材 | 保留原檔與修改紀錄 |
| Boost Resolution | 提升低解析素材在提案稿中的可讀性 | 修復來源品質太差的正式素材 | 正式上線仍應替換成高品質原圖 |
文案與多語系：Rewrite、Translate、Replace Content
Rewrite、Shorten、Translate 適合處理介面微文案，例如按鈕、提示、錯誤訊息、空狀態、卡片描述。Replace Content 則適合把重複卡片、列表、表格裡的 placeholder 文字換成更像真實產品的內容。
實務上，我不建議把 AI 改寫直接視為 UX writing 完稿。台灣產品常見的問題是語氣太像英文翻譯，按鈕變長、錯誤訊息太客氣、表單說明不夠明確。AI 可以給候選版本，但最後要用產品語境審稿。
如何讓 Figma AI 產出符合品牌與 Design System
要讓 Figma AI 產出接近品牌規範，先準備 Library、元件庫、品牌色、字體、文案語氣與檢查表，再用 AI 產初稿。AI 負責速度，Design System 負責一致性。
如果團隊已經有 brand image consistency 規範，First Draft 的產物應先進入品牌檢查，而不是直接交付。尤其是按鈕、表單、卡片、導覽、錯誤狀態，這些元件一旦被 AI 產物污染到正式 Library，後續維護成本會很高。
| 檢查項目 | 要看什麼 | 判斷標準 |
|---|---|---|
| 品牌色 | 主色、輔色、狀態色是否被亂用 | 必須符合品牌規範與 accessibility 對比 |
| 字體與層級 | 標題、內文、註解、按鈕是否有穩定階層 | 不能因為 AI 生成而出現過多字級 |
| 元件替換 | 按鈕、卡片、表單是否已換成正式元件 | 正式交付前不得保留一次性假元件 |
| 文案語氣 | 是否像品牌會說的話 | 避免翻譯腔、過度行銷、模糊 CTA |
先套元件庫，再讓 AI 產初稿
較穩的流程是先建立或整理核心元件，再讓 AI 參與初稿與改稿。設計師可以用 First Draft 探索資訊架構，再把 buttons、cards、forms、navigation 換成正式元件；Figma Make 則可用較接近品牌的設計稿作為輸入，減少 Demo 走偏。
Figma AI 如何搭配 Cursor／AI coding 工具
Figma AI 可以透過 Dev Mode、MCP、Code Connect 與 Cursor 等 AI coding 工具串接，讓工程師取得設計上下文、元件資訊與樣式線索。但這是開發輔助，不是自動上線流程。
Dev Mode 提供檢視、標註、變更與程式碼交付線索；MCP server 則把 Figma context 帶到 Cursor、VS Code、Windsurf、Claude Code 等工具。Code Connect 的價值在於把 Figma 元件與實際 codebase 連起來，讓 AI coding 工具知道應該用哪個 React component，而不是只照截圖重做一份。
設計師先拼 UI，工程師再接程式碼與元件
- 設計師用 First Draft 或既有 Library 建立 UI 初稿。
- 設計師把按鈕、卡片、表單、狀態改成正式元件。
- PM 與設計師確認流程、空狀態、錯誤狀態與文案。
- 工程師在 Dev Mode 檢查尺寸、變數、CSS、狀態與標註。
- 若團隊有 Code Connect，讓 Figma 元件對應實際程式碼元件。
- Cursor 或其他 AI coding 工具依 MCP 取得設計上下文，再產生可審查的實作草稿。
- 工程師負責重構、測試、無障礙、效能與 production code 品質。
台灣團隊常見使用情境
台灣團隊使用 Figma AI，最常見價值是縮短提案、Demo、改稿與內部溝通時間。接案設計師、SaaS 團隊、品牌行銷與 PM 都能用，但交付標準要分清楚。
| 情境 | 推薦功能 | 效益 | 風險 |
|---|---|---|---|
| 接案提案 | First Draft、Rewrite | 快速提出兩到三個版面方向 | 客戶可能誤以為初稿就是成品 |
| SaaS PM Demo | Figma Make、First Draft | 快速驗證流程與管理後台資訊架構 | 容易忽略資料權限與錯誤狀態 |
| 品牌行銷活動頁 | First Draft、Edit Image、Rewrite | 加速 Landing Page 和活動素材初稿 | 品牌視覺容易不一致 |
| 老闆臨時改稿 | Make changes、Rewrite、Shorten | 快速產生可討論版本 | 若沒有變更紀錄，決策會反覆 |
接案設計師：先用 First Draft 做提案方向
接案設計師可以用 First Draft 先做提案方向，但報價與交付說明要分清楚。AI 產出的初稿適合拿來討論資訊架構、風格方向與客戶偏好，不適合承諾「這就是最後設計」。比較成熟的做法是提供初稿、設計方向說明、後續細修範圍與元件替換計畫。
SaaS 團隊：PM 快速做 Demo，設計師再修成可交付稿
SaaS 團隊可以讓 PM 先用 Figma Make 做 Dashboard、Form、Empty State 或 onboarding Demo，設計師再接手整理成可交付設計稿。這種分工能減少「PM 用文字講半天，設計師還是不知道要什麼」的溝通成本。
Figma AI 要錢嗎？哪些功能可能需要權限或方案
Figma AI 多數功能與 paid plans、Seat、團隊 AI 開關、編輯權限及 AI credits 有關。實際可用範圍會依方案、角色、Beta 狀態與管理員設定變動。
截至 2026 年 5 月，官方文件說明 AI tools 可在 paid plans 使用，Full seat 在 Figma Design、Figma Sites、FigJam、Slides 的 AI 工具權限最完整；Dev 與 Collab seat 在部分產品中可用，但不一定能在 Figma Design 使用 AI。AI credits 則依方案與 Seat 每月配置，Figma Make 這類 agentic AI 功能會依模型、任務複雜度與上下文消耗 credits。
| 項目 | 可能條件 | 團隊要確認什麼 |
|---|---|---|
| First Draft | Figma Design、paid plans、可編輯權限 | 使用者是否有 Full seat 或可用權限 |
| Figma Make | Full seat on paid plans 較完整，其他 Seat 可能可試用 | 是否能建立、分享、發布 Make 檔案 |
| 圖片與文字 AI | paid plans、可編輯權限、AI credits | 是否會消耗 credits，是否有使用上限 |
| Dev Mode | Full 或 Dev seat 的付費方案 | 工程師是否能檢視設計、變數與交付資訊 |
| Code Connect | 通常更偏 Organization、Enterprise 與 Dev 或 Full seat 工作流 | 是否已建立設計元件與 codebase 對應 |
| Beta 或新入口 | 可能逐步推出，例如 2026 年 5 月後的 agent beta | 不同帳號看到的入口可能不同，不要寫死操作畫面 |
Figma AI 的限制與品質控管
Figma AI 的限制主要在品牌一致性、版權、可用性、程式碼品質與 Design System 汙染。AI 生成稿必須經過設計、內容、工程與法務風險檢查後，才適合進入正式交付。
| 風險 | 可能發生什麼 | 控管方式 | 負責角色 |
|---|---|---|---|
| 品牌一致性 | 顏色、字體、按鈕樣式與品牌語氣不一致 | 套用品牌規範與元件庫檢查 | 品牌設計師、UI 設計師 |
| 版權風險 | 圖片、字體、第三方素材來源不清 | 確認授權，保留素材來源紀錄 | 設計師、行銷、法務 |
| 可用性 | 流程看似完整，但使用者無法完成任務 | 做 usability review 與情境測試 | PM、產品設計師 |
| 程式碼品質 | Figma Make 或 AI coding 產物不可維護 | 工程 review、測試、重構 | 前端工程師 |
| Design System 汙染 | 一次性 AI 元件被誤放進正式 Library | 建立審核流程與命名規則 | 設計系統負責人 |
AI 生成 UI 不能直接當最終交付
- 檢查主要任務是否能在三到五步內完成。
- 檢查錯誤狀態、空狀態、載入狀態、disabled state 是否齊全。
- 檢查文字長度在手機與桌機版是否會破版。
- 檢查色彩對比、觸控範圍與鍵盤操作需求。
- 檢查命名、元件替換與 Dev Mode 標註是否可交付。
- 檢查 AI 生成內容是否符合 ai design workflow 的審稿節點。
Figma AI 和 Canva、Framer、Uizard、v0、Lovable 差在哪
Figma AI 的定位是設計稿與產品協作中心；Canva 偏品牌素材與簡報，Framer 偏網站發布，Uizard 偏快速 UI 草稿，v0 與 Lovable 偏 AI coding 與產品原型。
| 工具 | 更適合什麼 | 和 Figma AI 的差異 | 搭配建議 |
|---|---|---|---|
| Canva AI | 社群素材、簡報、品牌套版 | 較適合行銷素材，不是產品設計交付中心 | 可參考 Canva AI Magic Design 與 Canva Brand Kit |
| Framer | 快速建立可發布網站 | 網站發佈能力強，但團隊 Design System 協作不一定取代 Figma | 適合行銷頁與原型網站 |
| Uizard | 低保真 UI 草稿與快速概念 | 適合早期想法，不如 Figma 貼近既有設計交付流程 | 可作為前期發散工具 |
| v0 | React UI 與前端介面生成 | 偏工程產物，Figma 偏設計上下文與協作 | 適合工程師依設計稿快速產生實作草稿 |
| Lovable | 從 Prompt 建立可運作產品雛形 | 更接近 AI app builder，不是設計檔案管理與交付工具 | 適合驗證產品想法，但正式 UI 仍要回到設計規範 |
FAQ
Figma 有 AI 功能嗎？
有。Figma AI 包含 First Draft、Figma Make、圖片生成與編輯、去背、提升解析度、改寫文字、翻譯、Replace Content、Rename layers、Add interactions 等功能。不同功能會依方案、Seat、團隊 AI 開關與編輯權限而有差異。
Figma AI 的 First Draft 是什麼？
Figma First Draft 是用 Prompt 快速產出可編輯設計初稿的功能，適合網站、App、Dashboard、表單頁與 Landing Page 的早期探索。它能節省從空白畫布開始的時間，但仍需要設計師檢查品牌、元件、間距與可用性。
First Draft 和 Figma Make 有什麼差別？
First Draft 偏向產生可編輯 UI 初稿，Figma Make 偏向把想法或既有設計稿變成互動原型、web app 或可分享預覽。若要先排版面，用 First Draft；若要做可操作 Demo，用 Figma Make。
Figma AI 可以用中文 Prompt 嗎？
可以用中文 Prompt。建議寫清楚目標使用者、頁面目的、必要區塊、互動流程、品牌語氣與限制條件。只寫「幫我做一個漂亮首頁」通常會得到很普通的模板。
Figma AI 要付費嗎？哪些功能可能需要團隊權限？
多數 Figma AI 功能和 paid plans、Seat、AI credits、團隊 AI 開關與可編輯權限有關。Full seat 通常能使用較完整的設計相關 AI 功能；Dev、Collab、View seat 的可用範圍會受限制。實際狀態應以帳號管理員與 Figma 官方方案頁為準。
Figma AI 生成的設計稿可以直接交給工程師嗎？
不建議直接交付。AI 生成稿應先檢查圖層命名、元件替換、Auto layout、狀態設計、RWD、可讀性與品牌規範。工程師需要的是可實作、可維護、有狀態說明的設計稿，不只是看起來完整的畫面。
Figma AI 可以幫圖片去背或修改圖片嗎？
可以。Figma AI 支援 Remove Background、Make Image、Edit Image、Boost Resolution 等圖片功能，適合去背、延伸背景、移除物件與提升解析度。正式商用前仍要確認素材來源、授權與修圖品質。
Figma AI 可以幫我改寫按鈕文案或翻譯介面文字嗎？
可以。Rewrite、Shorten、Translate 可用於 CTA、錯誤訊息、空狀態、表單說明與多語系預覽。台灣產品建議再人工審稿，避免文字太像英文直翻或不符合品牌語氣。
Figma Make 產出的程式碼可以直接上線嗎？
不建議直接上線。Figma Make 適合產生互動原型與 Demo，程式碼仍需工程師檢查架構、狀態管理、資安、效能、無障礙、測試與維護性。它可以加速討論，不應跳過工程審查。
Figma AI 和 Canva AI、Framer AI、v0 差在哪？
Figma AI 偏產品設計、設計稿、元件庫與交付協作；Canva AI 偏品牌素材與簡報；Framer AI 偏網站建立與發布；v0 偏 React UI 與前端生成。選工具時應看任務是設計交付、行銷素材、網站上線，還是程式碼實作。
台灣接案設計師適合用 Figma AI 嗎？
適合，但要控管客戶期待。接案設計師可以用 First Draft 快速做提案方向，用 Rewrite 調整文案，用 Figma Make 做互動 Demo。不過初稿、精修、品牌規範、RWD 與工程交付應分成不同工作階段。
使用 Figma AI 需要注意版權或品牌一致性嗎？
需要。AI 生成圖片、字體、第三方內容與網路素材可能涉及授權問題；AI 生成 UI 也可能偏離品牌規範。正式使用前應檢查素材來源、品牌色、字體、文案語氣、元件庫與 Design System 規則。