v2.0.0 · 最後更新 2026-04-08 · 適用對象：設計師 + 前端工程師 · 涵蓋範圍：官方文件、社區回饋、實務經驗
Figma MCP（Model Context Protocol）讓 AI 編碼工具（Claude Code、Cursor、VS Code Copilot 等）直接讀取 Figma 設計資料，實現 design-to-code 自動化。
| 工具 | 類別 | 用途 | 備註 |
|---|---|---|---|
get_design_context | 讀取 | 主要工具。取得選取節點的結構化設計資料，預設 React + Tailwind | 大型設計可能超 token 上限 |
get_screenshot | 讀取 | 截取選取範圍截圖 | 僅靜態圖片 |
get_metadata | 讀取 | XML 格式稀疏結構（ID、名稱、類型、位置、尺寸） | 不含樣式細節，適合概覽 |
get_variable_defs | 讀取 | 取得 variables/styles（顏色、間距、字型） | 僅已定義的 variables |
get_code_connect_map | 讀取 | 取得 Figma node 與程式碼元件的映射 | 需先設定 Code Connect |
get_code_connect_suggestions | 讀取 | 自動偵測建議 Code Connect 映射 | -- |
search_design_system | 讀取 | 搜尋已連結的設計庫 | -- |
get_figjam | 讀取 | FigJam 圖表的 XML + 截圖 | 僅限 FigJam |
use_figma | 寫入 | 建立/編輯/刪除 frames、components、variables 等 | 僅 Remote server |
generate_figma_design | 寫入 | 擷取網頁轉為 Figma 設計 | 僅 Remote server |
create_new_file | 寫入 | 在 Drafts 建立新 Figma/FigJam 檔案 | -- |
generate_diagram | 寫入 | Mermaid 語法產生 FigJam 圖表 | -- |
add_code_connect_map | 映射 | 建立 Code Connect 映射 | -- |
send_code_connect_mappings | 映射 | 確認完成映射 | -- |
create_design_system_rules | 映射 | 建立規則檔指導 agent | -- |
whoami | 其他 | 回傳使用者身份與方案資訊 | 僅 Remote server |
| 特性 | Remote Server | Desktop Server |
|---|---|---|
| 端點 | https://mcp.figma.com/mcp | http://127.0.0.1:3845/sse |
| 模式 | 基於連結（link-based） | 基於選取（selection-based） |
| 需要桌面 App | 否 | 是 |
| Write to canvas | 支援 | 不支援 |
use_figma | 支援 | 不支援 |
whoami | 支援 | 不支援 |
| 座位要求 | 所有方案皆可用 | Dev/Full seat + 付費方案 |
不要在同一項任務中混用多個 Figma MCP 伺服器（例如同時啟用 Official MCP + GLips Figma-Context-MCP 處理同一個轉檔請求），會導致 AI 產生不一致輸出。兩者本身可以並存於同一個 MCP client 設定中——不同伺服器的 tool 各自帶命名空間，不會互相覆蓋或衝突；真正會出問題的是同時拿兩邊工具處理同一個任務，讓 AI 收到兩種格式/精度不同的資料而互相打架。建議依任務性質擇一：需要寫入 canvas 用官方，只做唯讀轉檔、想省 token 用 Framelink。
get_variable_defs）重點：MCP 只能讀靜態結構，所有互動行為必須透過替代方案補充。
來源：官方文件 + GitHub Issues 彙整
| 方案 | 座位類型 | 限制 |
|---|---|---|
| Starter | View / Collab / Dev / Full | 6 次工具調用 / 月 |
| Professional | Dev 或 Full 座位 | 15 次 / 分鐘 |
| Organization | Dev 或 Full 座位 | 20 次 / 分鐘 + 200 次 / 天 |
| Enterprise | 任何座位 | 600 次 / 天 |
add_code_connect_map、generate_figma_design、whoami 不計入限制# 方法 1：Plugin 安裝
claude plugin install figma@claude-plugins-official
# 方法 2：手動新增
claude mcp add --transport http figma https://mcp.figma.com/mcp/add-plugin figmaCmd+Shift+P > MCP: Add Serverhttps://mcp.figma.com/mcpfigmaNEW 支援雙向工作流：設計 → 代碼 → 設計迭代，可將渲染的 UI 發送回 Figma 作為可編輯框架。
GitHub Blog: Figma MCP ↗
| 工具 | 支援狀態 | 備註 |
|---|---|---|
| Windsurf | 支援 | 標準 MCP 設定 |
| Warp | 支援 | 標準 MCP 設定 |
| Codex NEW | 支援 | 將運行中 UI 帶入 Figma，探索細化後帶回 Codex |
| Factory | 支援 | 標準 MCP 設定 |
| Firebender | 支援 | 標準 MCP 設定 |
| Augment | 支援 | 標準 MCP 設定 |
get_design_context取得結構化設計資料get_metadata若太大，先取概覽再針對特定 nodeget_screenshot取得視覺參考當 get_design_context 回傳資料太大時：
get_metadata 取得整體結構概覽get_design_contextget_design_context 回傳的是參考，不是最終程式碼對 MCP 友善的 Figma 檔案應遵循：
| 項目 | 做法 | 原因 |
|---|---|---|
| 命名 | 語義化（CardContainer、ProductImage） | MCP 用 layer 名稱生成 class/component 名 |
| 命名 | 避免（Frame1268、Group 42） | 產生無意義的程式碼 |
| Layout | 全面使用 Auto Layout | MCP 能精確讀取 flex 規則 |
| Variables | 使用 Variables（spacing、color、radius、typography） | 自動提取為 design tokens |
| Components | 使用 Components，連結 Code Connect | 建立設計到程式碼的映射 |
| Annotations | 加入 Annotations 描述互動行為 | 補充 MCP 讀不到的互動資訊 |
| 嵌套 | 避免 5+ 層深的 Auto Layout 嵌套 | 層級太深會增加 token 用量 |
| 檔案大小 | 保持 100MB 以下 | 避免效能問題 |
--color-primary）Bad: bg-[#FF5733] ← hard-coded 色值
Good: bg-primary ← MCP 看到你的 --color-primary variable
Bad: p-[24px] ← hard-coded 間距
Good: p-6 ← 對應 Figma spacing variable來源：官方文件 + 社區最佳實踐
Figma 沒有 breakpoints / media queries 概念。 MCP 無法讀取任何 RWD 資訊。
| 方式 | 做法 |
|---|---|
| Prompt 指定 | 在 prompt 中明確列出斷點規則 |
| Custom Rules | 在 create_design_system_rules 中定義斷點行為 |
| Annotations | 在 Figma 中用 annotation 標注 RWD 行為 |
| 單斷點設計 | 只設計 1440px base，其餘由工程推導（對 MCP 最友好） |
375px — 手機（base）
480px — 大手機
768px — 平板
1024px — 小桌面
1280px — 桌面
1440px — 大桌面MCP 讀不到 prototype 的互動與動畫設定，需透過以下方式補充：
| 方式 | 說明 | 適合場景 |
|---|---|---|
| Annotations | 在 Figma 用 annotation 描述動畫規格 | 設計師主導 |
| Prompt 描述 | 在 prompt 中明確描述動畫需求 | 快速溝通 |
| Code Connect | 搭配自訂 instructions 定義元件的互動行為 | 有設計系統 |
| Custom Rules | 在規則檔定義動畫慣例 | 團隊統一標準 |
| FigJam 流程圖 | MCP 可讀 FigJam 圖表，用來做互動流程圖 | 複雜流程 |
| 手動補充 | 接受靜態結構，手動加入 CSS/JS 互動 | 最後手段 |
hover: opacity 0.9, 150ms ease-in-out
click: scale(0.98), 100ms
scroll: fade-in from bottom, 300ms, threshold 0.2- 如果回傳 localhost 來源的圖片/SVG，直接使用該 URL 下載
- 不要匯入新的 icon packages，所有素材應來自 Figma payload
- 不要在有 localhost 來源時建立 placeholder| 技術棧 | 支援程度 |
|---|---|
| React + Tailwind | 預設、品質最佳 |
| Vue | 可透過 prompt 切換 |
| Plain HTML + CSS | 可透過 prompt 切換 |
| iOS (SwiftUI) | 可透過 prompt 切換 |
| Chakra UI | 可透過 prompt 切換 |
| 其他 | 非 React+Tailwind 品質可能較不穩定 |
切換方式：在 prompt 中指定目標框架即可。
| 特性 | Figma MCP | Figma Dev Mode |
|---|---|---|
| 用途 | 餵設計資料給 LLM/Agent | 開發者手動檢視和複製程式碼 |
| 使用方式 | 自動化（Claude Code、Cursor、VS Code Copilot、Windsurf、Codex、Warp 等 9+ 工具） | 開發者人工查看 |
| Tokens | 透過 get_variable_defs | 手動檢視 |
| Code Connect | 支援 | 支援 |
| Annotations | 可讀取 | 可檢視 |
建議：搭配使用。Dev Mode 給人看，MCP 給 AI。
| 工具 | 特色 | 適合場景 |
|---|---|---|
| Figma Official MCP 推薦 | 最完整、Code Connect、write to canvas | 企業級、有設計系統 |
| GLips/Figma-Context-MCP (Framelink) | 開源 MIT、2 個唯讀工具、描述性輸出精簡 payload、免 seat 門檻 | 個人/團隊快速原型、token 成本敏感、無企業帳號可用 |
| Figma Console MCP (southleft) | 87+ 工具、深度設計系統管理 | 設計系統重度使用者 |
| Kombai | 專精 UX to code，更高精度 | 高精度 UI 還原 |
| Anima | 支援 breakpoints、RWD | 需要 RWD 支援 |
兩者是目前討論度最高的一組 Figma MCP 選項。官方 Dev Mode MCP Server 由 Figma 直接維運，功能最完整；Framelink（GitHub GLips/Figma-Context-MCP，npm 套件 figma-developer-mcp）則是單一開發者 GLips 維護的開源 MIT 授權社群專案，約 15k GitHub star（不同來源 14.4k–15.4k，屬同期近似值），framelink.ai 是文件品牌站，不是獨立公司。GitHub ↗
| 面向 | Framelink | 官方 Figma Dev Mode MCP Server |
|---|---|---|
| 部署 | 本機 npx 執行（stdio；v0.8.0 起亦支援 HTTP） | Remote（https://mcp.figma.com/mcp，免桌面 App）或 Desktop（需 Dev/Full 付費 seat） |
| 認證 | Figma Personal Access Token，任何帳號可用 | OAuth 瀏覽器流程，綁定 Figma 帳號/seat |
| 資料來源 | Figma 公開 REST API，社群自行簡化 | Figma 內部管線，不僅止於公開 REST API |
| 工具數量 | 2 個，唯讀：get_figma_data、download_figma_images | 一整組：get_design_context、get_code、get_variable_defs、get_code_connect_map、get_screenshot、use_figma、generate_figma_design 等 |
| 寫入能力 | 不支援（純唯讀） | 支援（use_figma，2026-03-24 起廣泛上線，可建立/編輯 canvas 節點、變數、元件、auto layout） |
| 輸出哲學 | 描述性（descriptive）——結構化 JSON/tree 描述 layout/間距/顏色/元件名稱，不產生現成程式碼 | 規定性（prescriptive）——get_code 可直接吐 React+Tailwind，常帶任意計算值如 leading-[22.126px]，同時支援 Code Connect |
結論先講：Framelink 目前不支援讀取 Figma Variables（如上表「工具數量」欄位所見，這正是官方 get_variable_defs 工具存在、Framelink 完全沒有對應項目的地方）——get_figma_data 回傳給 AI agent 的是解析後的靜態數值（如 hex 色碼、px 數字），不含變數 ID、變數名稱或綁定關係。
get_figma_data、download_figma_images），無相關功能描述。README ↗ / 官方文件 ↗boundVariables（例如 VariableID:1116:94605），但 Framelink 的簡化層（README 自稱壓縮資料量近 90%）在輸出前把這段資訊剝除，simplified 輸出只剩算出來的最終值。來源 ↗border-radius-token）而非解析值（12px），維護者判定不做——這是目前唯一可找到的維護者明確立場訊號。來源 ↗(a) Framelink 自身簡化邏輯主動丟棄 boundVariables，即使原始 Figma API（GET /v1/files/:key 或 nodes 端點）回應本身已含這個屬性（含 variableId，任何方案的 token 皆可讀到這層 ID 對應關係）；(b) 但要把 variableId 解析成人讀得懂的名稱、集合、跨模式（mode）實際數值，須另外呼叫 GET /v1/files/:key/variables/local 或 /variables/published——官方文件明寫僅開放 Enterprise 組織正式成員使用，一般方案 token 本來就叫不動。換句話說，即使 Framelink 改進簡化邏輯只解決 (a)，多數非 Enterprise 用戶仍受制於 (b)，一樣只能拿到 ID、拿不到名稱與實際數值。Figma REST API 文件 ↗ / Variables Endpoints 文件 ↗
結論先講：Framelink 對 componentProperties 的支援歷經多次修補，目前仍不完整——BOOLEAN 與 TEXT 屬性已修復，但 VARIANT（變體）與 INSTANCE_SWAP（實例替換）兩種屬性類型的支援尚未落地。
componentProperties 裁切問題的原始回報：使用者比對 MCP 輸出與 Figma REST API 直呼，發現輸出完全缺少該欄位（含 VARIANT/BOOLEAN/TEXT），維護者 GLips 承認自己還沒認真處理過元件這塊。Issue #74 ↗推論（非 issue/PR 原文直接陳述）：查證者讀取目前原始碼 src/transformers/component.ts（最後改動即 PR #340，2026-04-08，repo 最新 push 為 2026-07-03，此檔未再變動）發現，核心簡化函式寫死只過濾 BOOLEAN 與 TEXT 兩種類型，程式碼註解直寫「僅針對 Phase 1 擷取 BOOLEAN 和 TEXT 屬性」。由此推論：目前版本 VARIANT（變體）與 INSTANCE_SWAP（實例替換）類型的 componentProperties 仍會被整條過濾丟棄、不出現在任何輸出欄位；repo 內查無對應的後續追蹤 issue，代表這個缺口目前無公開議題在盯。
get_design_context 回應達 351,378–657,311 tokens，超過部分客戶端 25,000–80,000 tokens 上限而爆量。來源 ↗ / 官方對應文件 ↗get_code 遇 annotation 節點必掛、Code Connect 授權失敗會靜默退化成截圖猜測，但客戶端 UI 仍顯示「成功」。論壇原文 ↗ / 案例紀錄 ↗LogRocket（2025-11-11）是查證來源中唯一不支持「Framelink 更好」的一篇：主張官方伺服器搭配規範良好的 Auto Layout 時可達「90%+ 間距/padding 準確度」，形容為「近乎像素級」，完全沒有給 Framelink 精度優勢；另有來源提到 Framelink 並非像素級，預期準確度落在 70–90%。LogRocket 原文 ↗
延伸閱讀：完全跳脫 Figma 生態的路徑還有 Penpot MCP（開源 Figma 替代平台官方 MCP，2026-02-03 併入主 monorepo）與 OpenPencil（2026-02-27 上線）。Smashing Magazine ↗ / OpenPencil ↗
| 問題 | 解法 |
|---|---|
| Windows local server 連不上 | 改用 Remote server |
| macOS ARM + Node 20：sharp/libvips 錯誤 | 更新依賴或用 Remote server |
| Figma app cloud connector 損壞 | 重裝 Figma 或改用 Desktop MCP |
generate_figma_design 在 CLI 不存在 | 改用 web 介面或桌面 App |
Cannot read properties of undefined (reading 'children') | 檢查檔案結構，避免深層嵌套 |
| HTTP 405 錯誤 | 驗證 token 和網路存取 |
| 升級 seat 後限制未生效 | 重啟編輯器或等待同步 |
| Token 大小溢出 | 用 get_metadata 先掃描，再針對特定 node 用 get_design_context |
| 功能 | 說明 |
|---|---|
| Write to canvas | AI 可直接建立/修改 Figma 設計資產 |
| 雙向工作流 | Push rendered UI to canvas，再 pull 回 code |
| Extended collections | 多品牌設計系統支援 |
| Skills system | Markdown-based skill files，指導 agent 行為 |
| Figma Make 支援 | Make 檔案可透過 MCP 存取 |
| Make Kits | 可重用 kit packages，結合 library components + guidelines |
| Make Attachments | 直接附加檔案（PDF/code/images/CSV）至 Make prompt |
| AI Administration | 管理員購買 AI credits（訂閱制或 pay-as-you-go） |
AI Agent 現在可以直接寫入 Figma 文件，創建和修改設計。這是 Figma MCP 從「只讀」邁向「讀寫」的里程碑。
use_figma — 透過 Plugin API 執行 JavaScript，建立/更新 frames、components、variants、variables、auto layoutgenerate_figma_design — 擷取渲染的網頁 UI 轉為 Figma 可編輯 layersSkills 是 Markdown 文件，教 Agent 特定 Figma 工作流程。無需 Plugin 開發或編碼，任何人都可以編寫。
/figma-use 基礎 Skill + Figma 官方和社群範例create_design_system_rules 工具使用效果更佳GitHub Copilot 用戶可連接 Figma MCP server，實現完整的設計 → 代碼 → 設計迭代循環。
| 工具 | 發布日 | 功能 |
|---|---|---|
| Claude Code | 2/17 | 輸入「Send this to Figma」，瀏覽器渲染狀態自動轉為 Figma 圖層 |
| Codex | 2/26 | 將運行中的 UI 帶入 Figma，探索、細化後帶回 Codex |
Figma MCP 現在支援完整的雙向 round-trip 工作流：
設計系統作者可建立可重用 kit packages，確保每次 Make 生成都以設計系統為基礎。
可直接將現有檔案加入 Make prompt，支援兩種用途：
| 方案 | 座位類型 | 限制 |
|---|---|---|
| Starter | View / Collab / Dev / Full | 6 次工具調用 / 月 |
| Professional | Dev 或 Full 座位 | 15 次 / 分鐘 |
| Organization | Dev 或 Full 座位 | 20 次 / 分鐘 + 200 次 / 天 |
| Enterprise | 任何座位 | 600 次 / 天 |
add_code_connect_map、generate_figma_design、whoami 不計入限制Figma 收購 Weavy 後重新品牌化為 Figma Weave，定位為 AI 生成媒體工作流引擎。
Config 2026 把 MCP 從「設計→碼」單向工具，擴張成跨 Figma 全產品的 agent 觸角，並新增多個素材／動畫／影片工具。
| 工具 | 用途 | 何時用 |
|---|---|---|
download_assets | 從 Figma 匯出 JPG/SVG/PDF 素材 | 要把圖示／插圖／向量落地成檔案時 |
get_motion_context Figma Motion | 把動畫 frame 動態轉結構化 context 餵 coding agent | 要把 Figma 動畫實作成程式碼（CSS/React）時 |
Shader 效果/填色（list/get shader effects・fills） | 讀 AI 生成 shader 視覺，可匯出 JS/WGSL | 要把 shader 移植到 Figma Make 或自家平台時 |
export_video | 動畫匯出 MP4/WebM/Animated SVG/GIF | 要產動態預覽／上稿素材時 |
Config 2026 起 MCP 觸角跨出 Figma Design：
use_figma 可在 Figma Slides 建立／更新簡報MCP server 現以上傳的本地字型真實渲染，不再用 web-safe 近似，品牌字型對稿更準。
Config 2026 強化行動設計帶入（Xcode/SwiftUI 方向）。工具邊界以官方文件為準。
行動設計（Xcode/SwiftUI）工具邊界以官方文件為準：developers.figma.com/docs/figma-mcp-server/ ↗
一鍵把設計圖層轉成可互動程式碼圖層，可複製與團隊迭代。
在專案的 CLAUDE.md 或 .cursor/rules 中加入以下規則，提升 MCP 使用品質：
## Figma MCP 規則
- Figma MCP server 提供 assets endpoint 可取得圖片和 SVG
- 如果回傳 localhost 來源的圖片/SVG，直接使用該 URL
- 不要匯入新的 icon packages，所有素材應來自 Figma payload
- 不要在有 localhost 來源時建立 placeholder
- 使用 get_design_context 作為主要工具
- 若回傳資料太大，先用 get_metadata 掃描結構
- 設計資料是參考，必須適配專案的技術棧和元件庫
- 優先複用專案已有的元件，不要從零生成
- Figma 的 Auto Layout 對應 CSS Flexbox
- Variables 對應 CSS Custom Properties / Tailwind tokens
- Annotations 包含互動行為描述，務必閱讀並實作點擊任意卡片即可複製工具名稱。