---
title: "Figma 開放 AI Agent 直接操作畫布：use_figma 工具與 Skills 技能系統完整介紹"
slug: figma-use-figma-agents-canvas-skills
url: https://rar.design/posts/figma-use-figma-agents-canvas-skills
published_at: 2026-03-24
modified_at: 2026-03-24
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["figma"]
access: public_access
---

# Figma 開放 AI Agent 直接操作畫布：use_figma 工具與 Skills 技能系統完整介紹

> 從今天起，Claude Code、Codex 等 AI Agent 可以在你的 Figma 檔案裡建立元件、套用 Design System——設計師的角色正在改變

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-03-24

📑 本文目錄一、發生了什麼事？二、use_figma 工具是什麼？三、Skills 技能系統：教 AI 怎麼設計四、兩個工具怎麼搭配？五、9 個官方範例 Skills六、哪些工具支援？七、價格與開放時程八、設計師該怎麼看這件事？九、重點整理十、延伸資源如果你今天打開 Figma 的社群或 X（Twitter），應該會被一則消息洗版——Figma 正式開放 AI Agent 直接在畫布上操作設計。不是幫你寫 code，不是幫你產圖片，而是像一個真正的設計師一樣，在你的 Figma 檔案裡建立元件、套用 Design System、調整 Auto Layout。這不是概念影片，而是今天就能用的 Open Beta。讓我們來看看，Figma 這次到底做了什麼。一、發生了什麼事？Figma 在今天（2026/3/24）發布了一項重大更新：透過全新的 use_figma MCP 工具，AI Agent 現在可以直接在 Figma 畫布上進行設計操作。同時推出「Skills」技能系統，讓你用 Markdown 檔案定義 Agent 的工作方式。簡單來說，過去 AI 生成的設計總是像「外包品」——風格不統一、不認識你的 Design System。現在，AI Agent 可以讀取你的元件庫、變數、樣式，用你團隊建立好的規範來產出設計。這就是這次更新的核心。▲ Figma 官方宣傳圖：AI Agent 在終端機中操作 Figma 畫布▲ Figma 官方影片：Agents, meet the Figma canvas二、use_figma 工具是什麼？use_figma 是 Figma MCP Server 新增的一個工具，讓 Claude Code、OpenAI Codex 等 MCP 客戶端可以直接對 Figma 檔案進行「寫入」操作。它能做到的事包括：🧩 建立與修改元件Agent 可以直接在 Figma 裡建立 Frame、Component、Variables，並套用 Auto Layout🎨 連結 Design System生成的元素會自動連結到你的 Design System，使用你定義好的 Token 和樣式🔄 自我修正迴圈Agent 會截圖檢查產出結果，自動迭代修正不符合預期的部分（Self-healing Loop）📐 跨檔案操作支援 Figma Design、FigJam，未來也會擴展到更多 Figma 功能這跟之前的 MCP 不一樣——之前的 Figma MCP 主要是「讀取」（把 Figma 設計資訊抓到程式碼裡），現在則是真正的「雙向」操作。Agent 不只能看你的設計，還能動手改你的設計。三、Skills 技能系統：教 AI 怎麼設計光有工具還不夠，AI 必須知道「怎麼用」。這就是 Skills 技能系統存在的意義。Skill 就是一份 Markdown 文件，內容定義了 Agent 在 Figma 裡的工作流程：要用哪些工具、按什麼順序、遵守哪些設計規範。聽起來很熟悉對吧？沒錯，這跟 Claude Code 的 CLAUDE.md 概念完全一致——用人類能讀的文件，去引導 AI 的行為。💡 Skills 的運作方式1基礎 Skill：/use-figma所有 Skill 的底層，教 Agent 理解 Figma 的結構、原則與基本操作方式2專業 Skill：各種工作流建立元件庫、產生設計稿、同步 Design Token⋯⋯每個 Skill 專注一件事3自訂 Skill：你的團隊規範任何人都能撰寫 Skill，不需要寫程式碼，用 Markdown 就夠了Anthropic 的 Claude Code 產品負責人 Cat Wu 對此評論：Skills 讓 Claude Code 能直接在設計畫布上工作，確保產出忠於團隊的意圖與判斷。四、兩個工具怎麼搭配？Figma MCP Server 現在有兩個核心工具，它們是互補的： generate_figma_designuse_figma（新）方向Code → CanvasAgent → Canvas做什麼把 HTML / 網頁 UI 轉成可編輯的 Figma 圖層用你的 Design System 建立或修改設計使用時機設計與 code 不同步時，把最新 UI 拉回 Figma從頭建立設計、或基於現有 Design System 擴充結構把 rendered UI 轉成圖層直接操作 Component、Variables、Auto Layout需要 Skills不需要強烈建議搭配兩者的典型搭配流程：用 generate_figma_design 把現有 code 拉進 Figma，然後用 use_figma 修改、擴充，並連結回 Design System。這樣就形成一個完整的 Code ↔ Canvas 雙向循環。五、9 個官方範例 SkillsFigma 首波推出 9 個 Skills，部分由 Figma 官方開發，部分來自社群實踐者：/figma-generate-library從程式碼庫建立 Figma 元件/figma-generate-design使用現有元件和變數建立新設計/create-voice by Uber從 UI 規格生成螢幕閱讀器規格（VoiceOver、TalkBack、ARIA）/cc-figma-component by One North從結構化 JSON 合約生成 Figma 元件/apply-design-system by Edenspiekermann將現有設計連結到 Design System 元件/rad-spacing by Rad Collab套用階層式間距（Hierarchical Spacing），含 Variables 及 fallback/edit-figma-design by Warp用 Warp 和 Oz 編排 Figma 設計工作流/sync-figma-token by Firebender在 Code 和 Figma Variables 之間同步 Design Token，含 drift detection/multi-agent by Augment Code平行執行多個工作流，並在 Augment 中實作設計這些 Skills 都可以在 Figma Community Skills 頁面 找到。最重要的是，任何人都可以自己寫——只要你懂 Figma 的操作邏輯，就能用 Markdown 寫出一份 Skill。六、哪些工具支援？目前支援 use_figma 工具的 MCP 客戶端相當豐富：Claude Code OpenAI Codex Cursor Copilot CLI Copilot in VS Code Augment Factory Firebender Warp以 Claude Code 為例，安裝方式非常簡單。直接用 Figma 官方 Plugin 安裝：// 安裝 Figma Plugin（含 MCP + Skills）claude plugin install figma@claude-plugins-official// 或手動加入 MCP Serverclaude mcp add --transport http figma https://mcp.figma.com/mcp七、價格與開放時程🎉 Beta 期間免費Figma 明確表示這將會是按用量計費（usage-based）的付費功能，但目前 Open Beta 期間完全免費。Remote MCP Server 在所有 Seat 和方案上都可用。Figma 正在研究如何在付費座位中合理計算 agentic 行為的用量。換句話說：趁免費趕快玩。這是很典型的 Figma 策略——先讓大家養成習慣，後續再收費。八、設計師該怎麼看這件事？我知道很多設計師第一反應是焦慮：AI 能直接在 Figma 上設計了，那還需要設計師嗎？需要，而且比以前更需要。原因很簡單——01Skills 要人來寫Agent 的品質取決於 Skills 的品質。誰最懂設計規範？設計師。Skills 就是設計師的新武器——你的專業知識現在可以「程式化」地被執行。02Design System 更重要了過去，Design System 只服務於人類。現在它同時服務 AI。你的元件庫整理得越好，Agent 的產出品質就越高。03判斷力無法被取代AI 模型的輸出是非確定性的（同樣的 Prompt，可以產生不同結果）。誰來決定哪個版本好？哪裡要修？這需要設計師的品味和判斷力。這次更新的本質，是讓設計師從「手動執行者」升級為「系統設計者」。你不再需要手動拉每一個元件，而是定義規則，讓 Agent 幫你大量執行。你的角色從畫圖變成指揮。▲ Code 和 Canvas 的未來是雙向流動的📝 重點整理→Figma 推出 use_figma MCP 工具，AI Agent 可以直接在畫布上建立元件、套用 Design System→Skills 技能系統用 Markdown 定義工作流程，人人都能撰寫，不需要寫 code→與先前的 generate_figma_design 互補，形成完整的 Code ↔ Canvas 雙向循環→首波 9 個 Skills，來自 Figma 官方與 Uber、Edenspiekermann 等社群貢獻者→支援 Claude Code、Codex、Cursor 等 9 個 MCP 客戶端→Beta 期間免費，未來會是按用量計費的付費功能→設計師的角色從「手動執行」轉變為「規則制定」，Design System 和 Skills 成為核心競爭力十、延伸資源🔗 Figma 官方部落格：Agents, Meet the Figma Canvas🔗 Figma MCP Server 使用指南🔗 開發者文件：如何建立 Skill🔗 Figma Community Skills 頁面🔗 Remote MCP Server 安裝教學🔗 Code to Canvas 功能介紹（Claude Code to Figma）線上課程 🎨 UI/UX 設計100 種 Figma 設計的方法｜UI/UX 線上課程想要更好地駕馭 Figma 和 AI Agent 的協作？先把 Figma 的基本功打扎實。這堂課帶你從零到進階，掌握設計系統、元件化思維、Auto Layout 等核心能力。了解課程內容 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →