Figma

Figma MCP Server 指南

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

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

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

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

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

功能

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

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

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

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

• 擷取設計上下文

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

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

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

  深入瞭解 Code Connect →

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

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

安裝與設定

連線至 Figma MCP server

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

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 server 工具可用。如果未列出任何工具，請重新啟動 VS Code。

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

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

Cursor

在 Cursor 中設定 Figma MCP server 的建議方式是安裝 Figma Plugin，其中包含 MCP server 設定以及常見工作流程的 Agent Skills。

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

/add-plugin figma

此外掛程式包含：

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

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

Claude Code

在 Claude Code 中設定 Figma MCP server 的建議方式是安裝 Figma Plugin，其中包含 MCP server 設定以及常見工作流程的 Agent Skills。

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

claude plugin install figma@claude-plugins-official

深入瞭解 Anthropic 的 Claude Code Plugins 和 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 server。

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

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

提示您的 MCP 用戶端

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

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

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

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

工具與技能

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

您也可以在 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）

範例：

• "Generate iOS SwiftUI code from this frame"
• "Use Chakra UI for this layout"
• "Use src/components/ui components"
• "Add this to src/components/marketing/PricingCard.tsx"
• "Use our Stack layout component"

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

在需要時觸發特定工具

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

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

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

• "Get the variable names and values used in this frame."

新增自訂規則

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

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

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

透過此整合，您可以：

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

運作方式

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

從 Make 取得資源的步驟

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

範例工作流程

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

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

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

圖示指南

請參閱 Figma 品牌使用指南 以了解此儲存庫中所含任何圖示的顯示方式。