Figma Context MCP — 使用場景, 安裝 & 即時演示

為什麼要用

核心特性

以 token 高效的 YAML/JSON 格式回傳 Figma 資料，而不是原始的龐大 API 回應
解析元件實例及其覆蓋設定
按名稱呈現設計 token（顏色、文字樣式、間距）
導出選定節點的圖片供視覺參考
唯讀 — 永遠不會寫回你的 Figma 檔案

即時演示

實際使用效果

figma.replay ▶ 就緒

0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add figma -- npx -y figma-developer-mcp

一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。

使用場景

實戰用法： Figma Context

從 Figma 框架生成 React/SwiftUI/Tailwind 程式碼

👤 實作設計稿的前端開發者 ⏱ ~30 min intermediate

何時使用： 你有某個畫面/元件的 Figma 框架，想忠實地生成前 80% 的程式碼。

前置條件

Figma 個人存取權碼 — figma.com → Settings → Personal access tokens；作用域限定為 file_read
Figma 檔案網址 — 複製 Figma 檔案的網址；MCP 可以提取檔案金鑰和節點 id

步驟

取得框架資料

取得位於 <貼上含 node-id 的 Figma 網址> 的 Figma 節點。回傳其版面、文字內容、顏色和子節點結構。✓ 已複製

→ 具有實際值的階層式節點資料 — 不是「無法取得」
基於資料生成程式碼

生成完全匹配此設計的 React + Tailwind 元件。使用 Figma 資料中的實際十六進位顏色和像素值，而不是近似值。✓ 已複製

→ 參考實際值的程式碼，例如 bg-[#1A2B3C] 而不是 bg-blue-500
與導出內容交叉驗證

將同一框架導出為 PNG。與你生成的元件的預期渲染比較，並指出任何差異。✓ 已複製

→ 具體的差異（缺少圖示、填充錯誤），而不是「看起來很像」

結果： 像素精確的初稿，你可以精細調整而不用重新構建。

注意事項

自動版面 vs 絕對定位對應到 flex/grid 的方式不同 — 告訴 Claude 當 Figma 框架使用自動版面時優先選擇 flexbox；不使用時選擇絕對定位
向量圖示以 SVG 路徑形式返回，Claude 逐字內嵌 — 讓它分別將圖示提取到 /icons/*.svg 並將其作為元件引用

搭配使用： filesystem · github

將 Figma 設計 token 同步到你的程式碼庫

👤 設計系統維護者 ⏱ ~20 min intermediate

何時使用： 設計師更新了 Figma 中的調色盤/排版，你需要更新 token JSON 以匹配。

步驟

取得發佈的樣式

從 Figma 檔案 <key> 中，列出每個發佈的顏色樣式、文字樣式和效果樣式。按類別分組。✓ 已複製

→ 包含名稱和值的完整 token 列表
與程式碼庫進行差異比較

讀取 /design-tokens/tokens.json。向我展示自上次同步後在 Figma 中哪些 token 改變了（新增、刪除、值改變）。✓ 已複製

→ 每個 token 的舊/新差異
應用並開啟 PR

更新 tokens.json 以匹配 Figma。開啟一個標題為「sync: design tokens YYYY-MM-DD」的 PR，在描述中包含差異。✓ 已複製

→ 開啟包含可審查差異的 PR

結果： 程式碼端的 token 與 Figma 保持同步；不再有「為什麼品牌顏色略有不同」的問題單。

注意事項

重新命名的 token 看起來像刪除+新增 — 讓 Claude 啟發式地檢測重新命名（相同值、相似名稱）並將其提交供人工審查

搭配使用： filesystem · github

從 Figma 檔案提取開發規格（間距、尺寸、文案）

👤 處理沒有 Dev Mode 的 Figma 交接的工程師 ⏱ ~15 min beginner

何時使用： 你沒有 Figma Dev Mode 但需要畫面的像素規格。

步驟

取得畫面

對於 Figma 節點 <id>，給我一個平面列表，列出每個葉節點的絕對位置、尺寸和任何文字內容。✓ 已複製

→ 元素的表格式輸出，包括 x/y/w/h
要求規格文件

將其轉換為開發者友善的規格：分節展示，間距值（邊距/填充）從位置推斷。✓ 已複製

→ 具有具體 CSS 等效值的規格文件
驗證邊界情況

當文字超過設計寬度時會發生什麼？設計是否指定換行行為、截斷或增長？如果未指定，請為設計師標記。✓ 已複製

→ 未解決的問題列表，而不是無聲的假設

結果： 可構建的規格，無需為所有人購買 Dev Mode 授權。

注意事項

設計師使用任意間距（13px、17px）而不是 token 值 — 讓 Claude 四捨五入到最近的 token 值，但記錄偏差，以便設計師可以清理

搭配使用： filesystem

組合

與其他 MCP 搭配，撬動十倍槓桿

figma + filesystem

從 Figma 生成程式碼並直接寫入你的元件檔案

拉取 Figma 節點 <id>。生成完全匹配的 React 元件，使用檔案系統 MCP 寫入 src/components/Card.tsx。✓ 已複製

figma + github

開啟包含新元件和描述中 Figma 連結的 PR 供審查者查看

從 Figma <url> 生成 Card 元件，提交、推送，並開啟包含程式碼更改和來源 Figma 連結的 PR。✓ 已複製

figma + chrome-devtools

構建、在瀏覽器中渲染、截圖，並與 Figma 導出進行視覺比較

構建新元件。在 localhost:3000/preview/card 處渲染。截圖。與 Figma PNG 導出進行視覺比較，並列出任何視覺差異。✓ 已複製

工具

此 MCP 暴露的能力

工具	輸入參數	何時呼叫	成本
get_figma_data	fileKey: str, nodeId?: str, depth?: int	以代理友善的形式拉取框架或整個檔案	1 Figma API call (free tier: 1500/min)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	在本機導出設計資產（圖示、插圖、螢幕截圖）	1 Figma render call per node

成本與限制

運行它的成本

API 配額: Figma 免費計畫：1,500 個請求/分鐘。足以進行互動使用。
每次呼叫 Token 數: 精簡模式將負載保持在每個框架約 1-5k token。完整檔案可能膨脹 — 按 nodeId 限制。
費用: MCP 免費。Figma API 存取對任何 Figma 帳戶免費。
提示: 盡可能始終傳遞 nodeId — 取得整個檔案很浪費。

安全

權限、密鑰、影響範圍

最小權限： file_read

憑證儲存： 個人存取權碼在環境變數 FIGMA_API_KEY 中。永遠不要提交。

資料出站： All calls to api.figma.com

切勿授予： file_write — MCP 不需要它；使用可寫權碼會有意外編輯的風險

個人存取權碼很強大 — 使用限定為唯讀的權碼並定期輪換。
Figma 檔案內容（你的設計）作為上下文傳送到你的 LLM 提供者。如果檔案很敏感，優先選擇節點範圍的取得而不是整個檔案。

故障排查

常見錯誤與修復

403 Forbidden

權碼無法存取該檔案。檢查該檔案是否在你的權碼可見的團隊/工作區中。對於共用社群檔案，請使用其他權碼。

驗證： curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Could not extract file key from URL

使用格式 https://www.figma.com/file/<KEY>/... 或 https://www.figma.com/design/<KEY>/...。如果 URL 解析失敗，明確傳遞 fileKey。

Response is enormous and blows context

傳遞 nodeId 將範圍限制到框架，或 depth: 2 以限制遍歷。

Image export fails with 'unsupported node type'

某些節點類型（節點、切片）無法導出。改為選擇實際框架或元件。

替代方案

Figma Context 對比其他方案

替代方案	何時用它替代	權衡
Figma official Dev Mode MCP (beta)	你有 Figma Dev Mode 並想要官方整合	較新，需要 Dev Mode 訂閱；隨著時間推移 Figma 功能支援更深入
Figma REST API 直接透過 shell	你想要完整的 API 表面（變數、分支、註解）	原始 API 回應龐大且難以被 LLM 消化

Figma Context

為什麼要用

核心特性

即時演示

實際使用效果

安裝

選擇你的客戶端

使用場景

實戰用法： Figma Context

從 Figma 框架生成 React/SwiftUI/Tailwind 程式碼

前置條件

步驟

注意事項

將 Figma 設計 token 同步到你的程式碼庫

步驟

注意事項

從 Figma 檔案提取開發規格（間距、尺寸、文案）

步驟

注意事項

組合

與其他 MCP 搭配，撬動十倍槓桿

工具

此 MCP 暴露的能力

成本與限制

運行它的成本

安全

權限、密鑰、影響範圍

故障排查

常見錯誤與修復

替代方案

Figma Context 對比其他方案

更多

資源