Figma 開放 AI Agent 改設計稿：use_figma MCP 完整指南 | Figma Opens Canvas to AI Agents: use_figma MCP Guide
By Kit 小克 | AI Tool Observer | 2026-03-31
🇹🇼 Figma 開放 AI Agent 改設計稿：use_figma MCP 完整指南
use_figma MCP 是 Figma 於 2026 年 3 月 24 日發布的 MCP Server，讓 Claude Code、Cursor、GitHub Copilot 等 AI Agent 獲得對 Figma 畫布的寫入權限。這不是「AI 看截圖猜設計」，而是 Agent 直接在你的真實 Figma 檔案裡動手改。
use_figma 能做什麼？
透過 Model Context Protocol，AI Agent 連上 use_figma 後可以：
- 在 Figma 中建立、修改元件（Components），並使用你既有設計系統的樣式
- 套用設計 token 與變數（Variables）
- 依據自然語言需求，生成多個畫面的 UI flow
- 批次重命名圖層、套用 brand token 到數百個元件
Skills 框架：用 Markdown 控制 AI 行為
use_figma 最值得注意的設計是「Skills」系統：設計師或工程師可以用 Markdown 文件定義 Agent 應如何操作 Figma，完全不需要寫程式碼。例如：
- 「建立卡片元件時，永遠使用 surface-02 顏色 token」
- 「不可修改 Master Components」
- 「所有新 frame 命名規則：feature/page/component」
這讓非工程師也能設定 AI 的行為邊界，有效防止 Agent 亂改設計系統。
真實使用案例
早期測試者分享的使用情境：
- 產品經理描述新功能，Claude Code 根據既有設計系統在 Figma 生成初稿
- 工程師在 IDE 告訴 Copilot：「根據這個 API response，建立對應的 UI flow」
- 設計師一句話，Agent 把 200 個按鈕元件全部套用新 brand token，10 秒完成
限制也很明確：複雜的 Auto Layout 處理仍不穩定，Agent 偶爾會誤解 constraint 設定，不建議直接套用到正式設計稿，先在副本測試比較保險。
如何開始使用 use_figma？
目前 use_figma 是免費 Beta 版，需要 Figma Professional 或 Organization 方案。設定步驟：
- 在 Claude Code 或 Cursor 的 MCP 設定中加入 Figma MCP Server
- 授權 Figma 帳號連線
- 建立 Skills Markdown 文件，定義你的設計規範
未來 Figma 會改為按使用量計費，趁現在免費多試試。
設計師要失業了嗎？
不太可能。use_figma 擅長重複性、系統化的任務：套用 token、生成元件變體、批次更新。真正需要設計師的地方——用戶研究洞察、品牌決策、跨部門溝通——AI 目前還差得遠。更可能的未來是：不懂設計工具的 PM 和工程師能更直接參與設計流程，但設計師的核心判斷力依然不可替代。
好不好用，試了才知道。
🇺🇸 Figma Opens Canvas to AI Agents: use_figma MCP Guide
On March 24, 2026, Figma launched use_figma — a Model Context Protocol (MCP) server that gives AI agents write access to your live Figma canvas. Not screenshot analysis, not generated mockups: actual edits to your real design files, using your actual design system.
What Can use_figma Actually Do?
Once connected via MCP, agents like Claude Code, Cursor, GitHub Copilot, or OpenAI Codex can:
- Create and edit components using your existing design system tokens and styles
- Apply variables and design tokens across frames
- Generate multi-screen UI flows from a plain-language description
- Batch-rename layers and apply brand token updates to hundreds of components at once
The Skills Framework: Governance via Markdown
The most underappreciated part of use_figma is its Skills system. Teams can define agent behavior through plain Markdown files — no plugin code required. Examples of what you can specify:
- Always use the surface-02 color token when creating card components
- Never modify Master Components
- All new frames follow naming convention: feature/page/component
This lets non-engineers set guardrails for AI behavior without touching code — a surprisingly thoughtful approach to design system governance.
Real-World Use Cases from Early Testers
- A PM describes a new feature in plain language; Claude Code generates a Figma draft using the team's existing component library
- An engineer in VS Code tells Copilot: "Given this API response shape, build the corresponding UI flow in Figma"
- A designer asks the agent to apply a new brand token to 200 button variants across the file — done in seconds
It's not flawless. Complex Auto Layout handling remains unreliable, and agents occasionally misinterpret constraint settings. Test on a file copy before using on production designs.
How to Get Started with use_figma
use_figma is currently free beta, requiring a Figma Professional or Organization plan. Setup:
- Add Figma's MCP server to your MCP-compatible AI tool (Claude Code, Cursor, etc.)
- Authorize your Figma account
- Create a Skills Markdown file defining your team's design conventions
Figma will introduce usage-based pricing later. Now is the time to experiment at no cost.
What This Means for Designers
use_figma is the Copilot moment for design tools. Repetitive, system-driven tasks — token application, component variant generation, initial wireframing — are now genuinely automatable. But the work that defines great design: user research synthesis, brand judgment, cross-functional communication, the calls that require real contextual understanding — that remains human territory.
The more likely outcome isn't designer displacement, but a shift in who participates in design. PMs and engineers who previously couldn't touch Figma without breaking things now have a workable path in. Whether that's good or bad depends on your team.
You won't know until you try it.
Sources / 資料來源
- Figma Blog: The Figma canvas is now open to agents
- Muzli: What Figma MCP means for designers
- Bitovi: A first look at use_figma in action
延伸閱讀 / Related Articles
- Clearview AI 誤判：無辜婦女坐牢 108 天，人臉辨識的真實風險 | Clearview AI False Match: Innocent Woman Jailed 108 Days
- ChatGPT 讓 Cloudflare 偷讀你的資料：打字前已收集 55 項資訊 | ChatGPT Lets Cloudflare Collect 55 Data Points Before You Type
- Claude Code Bug：背景自動執行 git reset --hard 靜默刪除你的程式碼 | Claude Code Bug: Background git reset --hard Silently Deletes Your Code
AI 工具觀察站 — 每日精選 AI Agent 與工具趨勢
AI Tool Observer — Daily curated AI Agent & tool trends
留言
張貼留言