Figma

Figma MCP 服务器指南

Figma MCP 服务器通过向从 Figma 设计文件生成代码的 AI 代理提供重要的设计信息和上下文，将 Figma 直接带入您的工作流程。

[!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. 在搜索栏中粘贴服务器 URL 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 技能。

通过在 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 技能。

运行以下命令从 Anthropic 的官方插件市场安装插件。

claude plugin install figma@claude-plugins-official

了解更多关于 Anthropic 的 Claude Code 插件 和 Agent 技能 的信息。

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）
• 在现有文件中添加或修改代码，而不是创建新文件
• 遵循特定的布局系统（例如网格、flexbox、绝对定位）

示例：

• "从此框架生成 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 提取您选区中使用的变量和样式（颜色、间距、排版等）。这有助于模型在生成的代码中直接引用您的令牌。

例如，如果您得到的是原始代码而不是令牌，请尝试类似以下内容：

• "获取此框架中使用的变量名称和值。"

添加自定义规则

设置项目级指导以保持输出一致性——就像为新开发人员准备的入职说明。这些包括：

• 首选布局原语
• 文件组织
• 命名模式
• 不应硬编码的内容

您可以使用 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 项目直接连接到您的代理，您可以提取资源并在代码库中复用它们。这减少了将原型扩展为真实应用时的摩擦，并确保设计意图能够忠实地贯穿到实现中。

借助此集成，您可以：

• 直接获取项目上下文（单个文件或整个项目）
• 提示使用现有代码组件，而不是从头开始
• 使用真实数据扩展原型，更快地验证和生产化设计

工作原理

[!NOTE] 此集成利用 MCP 资源能力，允许您的代理直接从 Make 项目获取上下文。它仅在支持 MCP 资源的客户端上可用。

从 Make 获取资源的步骤

1. 提示您的代理获取上下文，提供有效的 Make 链接
2. 接收可用文件列表，来自您的 Make 项目
3. 下载您想要获取的文件，当提示时

示例工作流

目标： 在您的生产代码库中实现一个与 Make 中定义的设计和行为匹配的弹出组件。

1. 与您的代理分享您的 Make 项目链接。
2. 提示代理："我想从这个 Make 文件中获取弹出组件的行为和样式，并使用我的弹出组件来实现它。"

您的代理将从 Make 获取相关上下文，并指导您使用原型的功能和样式扩展现有的弹出组件。

图标指南

有关此仓库中包含的任何图标的显示，请参阅 Figma 品牌使用指南。