Figma

Figma MCP 服务器指南

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

[!NOTE] 对从 Figma 读取数据的 Figma MCP 服务器工具适用速率限制。某些工具（例如写入 Figma 文件的工具）不受速率限制约束。

使用 Starter 套餐或付费套餐中 View 或 Collab 席位的用户，每月最多可进行 6 次工具调用。

在 Professional、Organization 或 Enterprise 套餐 中拥有 Dev 或 Full 席位 的用户适用每分钟速率限制，该限制与 Tier 1 Figma REST API 的限制相同。与 Figma 的 REST API 一样，Figma 保留更改速率限制的权利。

有关 Figma MCP 服务器文档的完整集合，请参阅我们的开发者文档。使用 Figma MCP 服务器及相关资源（包括这些技能）即表示你同意 Figma 开发者条款。这些技能目前作为 Beta 功能提供。

功能特性

• 写入画布（仅限远程服务器）：直接从你的 MCP 客户端创建和修改原生 Figma 内容。借助合适的技能，代理可以使用你的设计系统作为唯一事实来源，在你的 Figma 文件中构建和更新框架、组件、变量和自动布局。

  注意： 我们正在快速改进 Figma 对 AI 代理的支持。写入画布功能最终将成为按使用量付费的功能，但在 Beta 期间目前免费提供。

• 从选中的框架生成代码

  选择一个 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 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）
• 在现有文件中添加或修改代码，而不是创建新文件
• 遵循特定的布局系统（例如网格、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 品牌使用指南。