Figma

Figma MCP Server 指南

Figma MCP 伺服器將 Figma 直接帶入您的工作流程，為從 Figma 設計檔生成程式碼的 AI 代理程式提供重要的設計資訊與上下文。

[!NOTE] 從 Figma 讀取資料的 Figma MCP 伺服器工具適用速率限制。部分工具（例如寫入 Figma 檔案的工具）不受速率限制。

使用 Starter 方案或付費方案中 View 或 Collab 席次的用戶，每月最多可進行 6 次工具呼叫。

擁有 Dev 或 Full 席次 且使用 Professional、Organization 或 Enterprise 方案 的用戶，適用每分鐘速率限制，與 Tier 1 Figma REST API 的限制相同。與 Figma 的 REST API 一樣，Figma 保留變更速率限制的權利。

如需完整的 Figma MCP 伺服器文件，請參閱我們的開發者文件。使用 Figma MCP 伺服器及相關資源（包括這些技能），即表示您同意 Figma 開發者條款。這些技能目前以 Beta 功能形式提供。

功能

• 寫入畫布（僅限遠端伺服器）：直接從您的 MCP 用戶端建立和修改原生 Figma 內容。具備適當技能時，代理程式可以使用您的設計系統作為唯一事實來源，在您的 Figma 檔案中建立和更新框架、元件、變數及自動佈局。

  注意： 我們正在快速改善 Figma 對 AI 代理程式的支援。寫入畫布功能最終將成為依使用量計費的付費功能，但目前於 Beta 期間免費提供。

• 生成佔位圖片：當來源、擷取或資料庫圖片無法使用時，代理程式可以在詢問許可並揭露 Figma AI 點數使用情況後，使用 generate_image。生成的圖片會以 upload_assets 上傳並套用至設計。

• 從選取的框架生成程式碼

  選取 Figma 框架並將其轉換為程式碼。非常適合正在建構新流程或迭代應用程式功能的產品團隊。

• 擷取設計上下文

  直接將變數、元件和佈局資料匯入您的 IDE。這對於設計系統和基於元件的工作流程特別有用。

• 使用 Code Connect 更聰明地撰寫程式碼

  透過重複使用您的實際元件來提升輸出品質。Code Connect 讓生成的程式碼與您的程式碼庫保持一致。

  進一步了解 Code Connect →

• 從網頁生成 Figma 設計 （逐步推出中）

  直接從您的 AI 編碼代理程式擷取、匯入或將網頁轉換為 Figma 設計。

安裝與設定

連線至 Figma MCP 伺服器

不同的 MCP 用戶端需要略微不同的設定。請依照下方針對您特定用戶端的說明，連線至 Figma MCP 伺服器。

VS Code

1. 使用快捷鍵 ⌘ Shift P 搜尋 MCP:Add Server。
2. 選取 HTTP。
3. 在搜尋列中貼上伺服器網址 https://mcp.figma.com/mcp，然後按下 Enter。
4. 當系統提示輸入伺服器 ID 時，輸入 figma。
5. 選擇要將此伺服器新增至全域或僅限目前工作區。確認後，您會在 mcp.json 檔案中看到類似這樣的設定：

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. 使用 ⌥⌘B 或 ⌃⌘I 開啟聊天工具列，並切換至 Agent 模式。
7. 開啟聊天後，輸入 #get_design_context 以確認 Figma MCP 伺服器工具可用。如果未列出任何工具，請重新啟動 VS Code。

[!NOTE] 您必須在帳戶上啟用 GitHub Copilot，才能在 VS Code 中使用 MCP。

如需更多資訊，請參閱 VS Code 官方文件。

Cursor

在 Cursor 中設定 Figma MCP 伺服器的建議方式是安裝 Figma 外掛程式，其中包含 MCP 伺服器設定以及常用工作流程的 Agent Skills。

在 Cursor 的代理程式聊天中輸入以下指令來安裝外掛程式：

/add-plugin figma

此外掛程式包含：

• Figma MCP 伺服器的 MCP 伺服器設定
• 用於實作設計、透過 Code Connect 連接元件以及建立設計系統規則的技能
• 從 Figma MCP 伺服器正確處理資產的規則

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

在 Claude Code 中設定 Figma MCP 伺服器的建議方式是安裝 Figma 外掛程式，其中包含 MCP 伺服器設定以及常用工作流程的 Agent Skills。

執行以下指令，從 Anthropic 的官方外掛程式市集安裝外掛程式。

claude plugin install figma@claude-plugins-official

進一步了解 Anthropic 的 Claude Code 外掛程式 和 Agent Skills。

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

執行以下指令安裝 Gemini CLI 的 Figma 擴充功能：

gemini extensions install https://github.com/figma/mcp-server-guide

安裝後，執行 gemini 以 Figma 身分驗證，然後在 CLI 中執行以下指令：

/mcp auth figma

解除安裝擴充功能：

gemini extensions uninstall figma

其他編輯器

其他支援 Streamable HTTP 的程式碼編輯器和工具也可以連線至 Figma MCP 伺服器。

如果您使用不同的編輯器或工具，請查閱其文件以確認是否支援基於 Streamable HTTP 的通訊。如果支援，您可以使用以下設定手動新增 Figma MCP 伺服器：

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

提示您的 MCP 用戶端

Figma MCP 伺服器引入了一組工具，可協助 LLM 翻譯 Figma 中的設計。連線後，您可以提示 MCP 用戶端存取特定的設計節點。

若要為您的 AI 用戶端提供 Figma 設計上下文：

1. 複製 Figma 中框架或圖層的連結。
2. 提示您的用戶端協助您在選取的 URL 實作設計。

[!NOTE] 您的用戶端無法瀏覽至選取的 URL，但它會擷取 MCP 伺服器識別要傳回哪個物件資訊所需的 node-id。

工具與技能

Figma 在開發者文件中維護了 Figma MCP 伺服器提供的工具清單。

您也可以在 Figma 說明中心中進一步了解 支援的代理程式 隨附的 Figma 外掛程式技能。視代理程式而定，您可能也會看到 connector、extension 或 power 等詞彙；這些包含相同的技能組合。

此儲存庫也包含未隨附於 Figma 外掛程式的獨立工作流程技能：

• workflow-skills/video-interaction-mapper：將 UI 錄製內容轉換為帶有註解的 Figma 分鏡腳本
• workflow-skills/generate-project-plan：將 PRD（加上選用的程式碼庫基礎資訊）轉換為 FigJam 專案計畫看板

MCP 最佳實務

生成程式碼的品質取決於多個因素。有些由您控制，有些則取決於您使用的工具。以下是一些獲得乾淨、一致輸出的建議。

結構化您的 Figma 檔案以獲得更好的程式碼

為您的設計意圖提供最佳上下文，讓 MCP 和您的 AI 助理能夠生成清晰、一致且與您的系統對齊的程式碼。

• 使用元件處理任何重複使用的項目（按鈕、卡片、輸入欄位等）
• 透過 Code Connect 將元件連結至您的程式碼庫。這是獲得一致元件重複使用的最佳方式。若無此功能，模型只能猜測。
• 使用變數處理間距、顏色、圓角和排版。
• 以語意化方式命名圖層（例如 CardContainer，而非 Group 5）
• 使用自動佈局來傳達響應式意圖。

[!TIP] 在生成程式碼前，先在 Figma 中調整框架大小，確認其行為符合預期。

• 使用註解和開發資源來傳達難以僅從視覺中捕捉的設計意圖，例如某個元素應如何運作、對齊或回應。

撰寫有效的提示以引導 AI

MCP 為您的 AI 助理提供結構化的 Figma 資料，但您的提示決定結果。良好的提示可以：

• 讓結果與您的框架或樣式系統對齊
• 遵循檔案結構和命名慣例
• 將程式碼新增至特定路徑（例如 src/components/ui）
• 在現有檔案中新增或修改程式碼，而非建立新檔案
• 遵循特定的佈局系統（例如 grid、flexbox、absolute）

範例：

• "從此框架生成 iOS SwiftUI 程式碼"
• "為此佈局使用 Chakra UI"
• "使用 src/components/ui 元件"
• "將此新增至 src/components/marketing/PricingCard.tsx"
• "使用我們的 Stack 佈局元件"

將提示視為給團隊成員的簡報。清晰的意圖會帶來更好的結果。

在需要時觸發特定工具

MCP 支援不同的工具，每個工具為您的 AI 助理提供不同類型的結構化上下文。有時，助理不會自動選取正確的工具，尤其是在可用工具越來越多的情況下。如果結果不理想，請嘗試在提示中明確指定。

• get_design_context 提供您 Figma 選取內容的結構化 React + Tailwind 表示。這是您的 AI 助理可以根據提示翻譯成任何框架或程式碼風格的起點。
• get_variable_defs 擷取您選取內容中使用的變數和樣式（顏色、間距、排版等）。這有助於模型在生成的程式碼中直接引用您的 token。

例如，如果您取得的是原始程式碼而非 token，請嘗試類似以下內容：

• "取得此框架中使用的變數名稱和值。"

新增自訂規則

設定專案層級的指導方針以保持輸出一致——就像為新開發者準備的入門筆記。例如：

• 偏好的佈局原語
• 檔案組織方式
• 命名模式
• 不應硬編碼的內容

您可以使用 MCP 用戶端用於指令檔案的任何格式來提供這些內容。

範例：

確保一致的優質輸出

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

一般品質規則

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

只需設定一次，即可大幅減少重複提示的需求，並確保團隊成員或代理程式一致遵循相同的期望。

請務必查閱您的 IDE 或 MCP 用戶端文件，了解如何結構化規則，並嘗試找出最適合您團隊的方式。清晰、一致的指導方針通常能帶來更好、更可重複使用的程式碼，並減少來回溝通。

拆分大型選取內容

將畫面拆分為較小的部分（例如元件或邏輯區塊），以獲得更快、更可靠的結果。

大型選取內容可能會拖慢工具速度、導致錯誤或產生不完整的回應，尤其是當模型需要處理的上下文過多時。請改為：

1. 為較小的區段或個別元件生成程式碼（例如 Card、Header、Sidebar）
2. 如果感覺緩慢或卡住，請縮小選取範圍

這有助於讓上下文保持可管理，並讓結果對您和模型都更具可預測性。

如果輸出中的某些內容看起來不太對勁，通常可以回歸基本面：Figma 檔案的結構方式、提示的撰寫方式，以及傳送的上下文內容。遵循上述最佳實務可以帶來很大的不同，並通常能產生更一致、可重複使用的程式碼。

為您的代理程式帶來 Make 上下文

Make + MCP 整合讓您更輕鬆地將原型從設計階段推進到生產階段。透過 MCP 將 Make 專案直接連接到您的代理程式，您可以提取資源並在程式碼庫中重複使用。這減少了將原型擴展為實際應用程式時的阻力，並確保設計意圖能忠實地貫徹到實作中。

透過此整合，您可以：

• 直接從 Make 取得專案內容（單一檔案或整個專案）
• 提示使用現有程式碼元件，而非從零開始
• 使用真實資料擴展原型，以更快驗證並將設計推向生產

運作方式

[!NOTE] 此整合利用 MCP 的資源功能，讓您的代理程式能直接從 Make 專案取得內容。僅在支援 MCP 資源的用戶端上可用。

從 Make 取得資源的步驟

1. 提示您的代理程式取得內容，提供有效的 Make 連結
2. 接收來自 Make 專案的可用檔案清單
3. 在提示時下載您要取得的檔案

範例工作流程

目標： 在您的生產程式碼庫中實作一個彈出視窗元件，使其符合 Make 中定義的設計與行為。

1. 與您的代理程式分享 Make 專案連結。
2. 提示代理程式：「我想從這個 Make 檔案取得彈出視窗元件的行為和樣式，並使用我的彈出視窗元件來實作它。」

您的代理程式將從 Make 取得相關內容，並引導您使用原型的功能與樣式來擴展現有的彈出視窗元件。

圖示指南

如需顯示此儲存庫中包含的任何圖示，請參閱 Figma 品牌使用指南。