Figma

Figma MCP 服务指南

Figma MCP 服务可将 Figma 直接融入你的工作流，为根据 Figma 设计文件生成代码的 AI Agent 提供重要的设计信息和上下文。

说明

Figma MCP 服务中用于读取 Figma 数据的工具受速率限制。某些工具（例如写入 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 原生内容。借助合适的技能，Agent 可以将你的设计系统作为事实来源，在 Figma 文件中构建和更新画框、组件、变量和自动布局。

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

• 生成占位图像：当源图像、捕获的图像或库图像不可用时，Agent 可以在征得许可并说明 Figma AI 积分使用情况后使用 generate_image。生成的图像会通过 upload_assets 上传并应用到设计中。

• 根据选定的画框生成代码

  选择一个 Figma 画框并将其转换为代码。这非常适合构建新流程或迭代应用功能的产品团队。

• 提取设计上下文

  将变量、组件和布局数据直接导入 IDE。这对设计系统和基于组件的工作流尤其有用。

• 借助 Code Connect 更智能地编写代码

  通过复用实际组件来提升输出质量。Code Connect 可确保生成的代码与代码库保持一致。

  详细了解 Code Connect →

• 根据网页生成 Figma 设计 （正在逐步推出）

  直接通过 AI 编码 Agent 捕获、导入或转换网页，并将其制作成 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。

说明

你必须在账户中启用 GitHub Copilot，才能在 VS Code 中使用 MCP。

如需了解更多信息，请参阅 VS Code 官方文档。

Cursor

在 Cursor 中设置 Figma MCP 服务的推荐方式是安装 Figma 插件，其中包含 MCP 服务设置以及适用于常见工作流的 Agent Skills。

在 Cursor 的 Agent 聊天中输入以下命令来安装插件：

/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，然后在 CLI 中执行以下命令，通过 Figma 进行身份验证：

/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 服务提供了一组工具，帮助大模型转换 Figma 中的设计。连接后，你可以提示 MCP 客户端访问特定的设计节点。

要向 AI 客户端提供 Figma 设计上下文：

1. 复制 Figma 中某个画框或图层的链接。
2. 提示客户端帮助你实现所选 URL 对应的设计。

说明

客户端无法导航到所选 URL，但会提取 node-id，供 MCP 服务识别要返回相关信息的对象。

工具和技能

Figma 在开发者文档中维护了 Figma MCP 服务提供的工具列表。

你还可以在 Figma 帮助中心了解 受支持的 Agent 使用的 Figma 插件技能。根据 Agent 的不同，你可能还会看到 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）
• 使用自动布局传达响应式设计意图。

提示

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

例如，如果你得到的是原始代码而不是令牌，可以尝试这样说：

• “获取此画框中使用的变量名称和值。”

添加自定义规则

设置项目级指导，确保输出一致，就像为新开发者准备的入职说明。这些内容包括：

• 首选布局基元
• 文件组织方式
• 命名模式
• 不要硬编码的内容

你可以使用 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

只需添加一次，就能大幅减少重复提示的需要，并确保队友或 Agent 始终遵循相同的预期。

请查阅 IDE 或 MCP 客户端的文档，了解如何构建规则，并通过尝试找到最适合团队的做法。清晰、一致的指导往往能带来更优质、更易复用的代码，也能减少来回沟通。

拆分大型选区

将屏幕拆分成较小的部分（例如组件或逻辑区块），以获得更快、更可靠的结果。

大型选区会拖慢工具、导致错误或产生不完整的回复，尤其是在模型需要处理的上下文过多时。建议改为：

1. 为较小的区块或单个组件（例如 Card、Header、Sidebar）生成代码
2. 如果感觉速度很慢或卡住了，请缩小选区

这有助于控制上下文规模，让结果更可预测，对你和模型都有好处。

如果输出中有些内容看起来不太对，通常可以重新检查基础环节：Figma 文件的结构、提示词的写法，以及发送了哪些上下文。遵循上述最佳实践会有很大帮助，通常也能带来更一致、更易复用的代码。

将 Make 上下文引入你的 Agent

Make + MCP 集成让你更轻松地将原型从设计转化为生产成果。通过 MCP 将 Make 项目直接连接到 Agent，你可以提取资源并在代码库中复用。这能降低将原型扩展为实际应用时的阻力，并确保设计意图在实现过程中得到忠实贯彻。

通过此集成，你可以：

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

工作原理

说明

此集成利用 MCP 的资源功能，让你的 Agent 能够直接从 Make 项目获取上下文。此功能仅适用于支持 MCP 资源的客户端。

从 Make 获取资源的步骤

1. 提示 Agent 获取上下文，并提供有效的 Make 链接
2. 接收 Make 项目中可用文件的列表
3. 按提示下载你想获取的文件

工作流示例

目标： 在生产代码库中实现一个弹出组件，使其符合 Make 中定义的设计和行为。

1. 将 Make 项目链接分享给 Agent。
2. 向 Agent 输入提示词：“我想从这个 Make 文件中获取弹出组件的行为和样式，并使用我的弹出组件来实现。”

你的 Agent 会从 Make 获取相关上下文，并指导你扩展现有的弹出组件，实现原型中的功能和样式。

图标指南

如需展示此仓库中的任何图标，请参阅 Figma 品牌使用指南。