figma/mcp-server-guide

# Figma MCP Server 指南 Figma MCP 服务器通过向从 Figma 设计文件生成代码的 AI 代理提供重要的设计信息和上下文，将 Figma 直接引入您的工作流程中。 有关 Figma MCP 服务器的完整文档集，请参阅我们的[开发者文档](https://developers.figma.com/docs/figma-mcp-server/)。使用 Figma MCP 服务器及相关资源（包括这些技能），即表示您同意 [Figma 开发者条款](https://www.figma.com/legal/developer-terms/)。这些技能目前作为 Beta 功能提供。 ## 功能 - **写入画布**（仅限远程服务器）：直接从您的 MCP 客户端创建和修改原生 Figma 内容。借助合适的技能，代理可以使用您的设计系统作为事实来源，在您的 Figma 文件中构建和更新 frame、component、variable 和 auto layout。 **注意：** 我们正在快速改进 Figma 对 AI 代理的支持。写入画布功能最终将成为一项基于用量的付费功能，但在 Beta 期间目前免费提供。 - **根据选定的 frame 生成代码** 选择一个 Figma frame 并将其转换为代码。非常适合构建新流程或迭代应用功能的产品团队。 - **提取设计上下文** 将 variable、component 和布局数据直接拉取到您的 IDE 中。这对于设计系统和基于组件的工作流程特别有用。 - **利用 Code Connect 更智能地编码** 通过复用您的实际组件来提高输出质量。Code Connect 使您生成的代码与代码库保持一致。 [了解更多关于 Code Connect 的信息 →](https://help.figma.com/hc/en-us/articles/23920389749655-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。 #### Cursor 在 Cursor 中设置 Figma MCP 服务器的推荐方法是安装 Figma Plugin，其中包含 MCP 服务器设置以及用于常见工作流程的 Agent Skills。 在 Cursor 的 agent chat 中输入以下命令来安装该插件： ``` /add-plugin figma ``` 该插件包括： - Figma MCP 服务器的 MCP 服务器配置 - 用于实现设计、通过 Code Connect 连接组件以及创建设计系统规则的技能 - 用于正确处理来自 Figma MCP 服务器资源的规则

手动设置

1. 打开 **Cursor → Settings → Cursor Settings**。 2. 转到 **MCP** 选项卡。 3. 点击 **+ Add new global MCP server**。 4. 输入以下配置并保存： ``` { "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp" } } } ``` 有关更多信息，请参阅 [Cursor 官方文档](https://docs.cursor.com/context/model-context-protocol)。

#### Claude Code 在 Claude Code 中设置 Figma MCP 服务器的推荐方法是安装 Figma Plugin，其中包含 MCP 服务器设置以及用于常见工作流程的 Agent Skills。 运行以下命令从 Anthropic 官方插件市场安装该插件。 ``` claude plugin install figma@claude-plugins-official ``` 了解更多关于 Anthropic 的 [Claude Code Plugins](https://claude.com/blog/claude-code-plugins) 和 [Agent Skills](https://claude.com/blog/skills)。

手动设置

1. 打开终端并运行： ``` claude mcp add --transport http figma https://mcp.figma.com/mcp ``` 2. 使用以下命令检查 MCP 设置并管理服务器： - 列出所有已配置的服务器 claude mcp list - 获取特定服务器的详细信息 claude mcp get my-server - 移除服务器 claude mcp remove my-server 有关更多信息，请参阅 [Anthropic 官方文档](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/tutorials#set-up-model-context-protocol-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 中 frame 或 layer 的链接。 2. 提示您的客户端帮助您实现所选 URL 处的设计。 ## 工具和使用建议 ### `get_design_context` **支持的文件类型：** Figma Design, Figma Make 使用此工具通过 MCP 服务器获取您 Figma 选区的设计上下文。默认输出为 **React + Tailwind**，但您可以通过提示进行自定义： - 更改框架 - "Generate my Figma selection in Vue." - "Generate my Figma selection in plain HTML + CSS." - "Generate my Figma selection in iOS." - 使用您的组件 - "Generate my Figma selection using components from src/components/ui" - "Generate my Figma selection using components from src/ui and style with Tailwind" 您可以在提示之前粘贴指向 Figma 中 frame 或 component 的链接。 [了解如何设置 Code Connect 以实现更好的组件复用 →](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect) ### `generate_figma_design`（仅限特定客户端，仅限远程） **支持的文件类型：** Figma Design 捕获、导入网页或将其转换为 Figma 设计。您可以将实时 UI 界面作为设计层发送到新的或现有的 Figma 文件，或发送到剪贴板。 - "Start a local server for my app and capture the UI in a new Figma file" - "Capture the login page to [Figma file URL]" ### `get_variable_defs` **支持的文件类型：** Figma Design 返回您选区中使用的 variable 和 style——如颜色、间距和排版。 - 列出所有使用的 token - "Get the variables used in my Figma selection." - 关注特定类型 - "What color and spacing variables are used in my Figma selection?" - 获取名称和值 - "List the variable names and their values used in my Figma selection." ### `get_code_connect_map` **支持的文件类型：** Figma Design 检索 Figma 节点 ID 与其代码库中对应代码组件之间的映射。具体来说，它返回一个对象，其中每个键是一个 Figma 节点 ID，值包含： - `codeConnectSrc`：组件在代码库中的位置（例如，文件路径或 URL）。 - `codeConnectName`：组件在代码库中的名称。 此映射用于将 Figma 设计元素直接连接到其 React（或其他框架）实现，从而实现无缝的设计到代码工作流程，并确保设计的每个部分都使用正确的组件。如果 Figma 节点已连接到代码组件，此功能可帮助您识别并在项目中使用确切的组件。 ### `add_code_connect_map` **支持的文件类型：** Figma Design 在 Figma 节点 ID 与代码库中的对应代码组件之间创建映射。这通过将特定设计元素链接到其代码实现来提高设计到代码的工作流程质量。 ### `get_code_connect_suggestions` **支持的文件类型：** Figma Design 检测并建议 Figma 组件与代码库中的代码组件之间的 Code Connect 映射。与 `send_code_connect_mappings` 配合使用以确认建议。 ### `send_code_connect_mappings` **支持的文件类型：** Figma Design 在通过 `get_code_connect_suggestions` 审查建议后，确认并完成 Code Connect 映射。 ### `get_screenshot` **支持的文件类型：** Figma Design, FigJam 对您的选区进行截图以保留布局的精确度。除非您正在管理 token 限制，否则请保持开启。 ### `create_design_system_rules` **支持的文件类型：** 不需要文件上下文 使用此工具创建规则文件，为代理提供生成高质量前端代码所需的上下文。规则文件有助于使输出与您的设计系统和技术栈保持一致，提高准确性并确保代码量身定制以满足您的需求。 运行该工具后，将输出保存到相应的 `rules/` 或 `instructions/` 目录，以便您的代理可以在代码生成期间访问它。 ### `get_metadata` **支持的文件类型：** Figma Design 返回包含基本属性（如 layer ID、名称、类型、位置和大小）的选区 XML 表示形式。您可以对生成的大纲使用 `get_design_context`，以仅检索所需设计的样式信息。 这对于 `get_design_context` 生成具有大上下文大小的输出的超大型设计非常有用。它也适用于多个选区或未选择任何内容时的整个页面。 ### `get_figjam` **支持的文件类型：** FigJam 此工具以 XML 格式返回 FigJam 图表的元数据，类似于 `get_metadata`。除了返回 layer ID、名称、类型、位置和大小等基本属性外，它还包括节点的截图。 ### `generate_diagram` **支持的文件类型：** 不需要文件上下文 从 Mermaid 语法生成 FigJam 图表。代理可以从自然语言描述生成图表，而无需您编写 Mermaid 语法。支持流程图、甘特图、状态图和序列图。 - "Create a flowchart for the user authentication flow using the Figma MCP generate_diagram tool" - "Generate a sequence diagram for the payment processing system" ### `whoami`（仅限远程） **支持的文件类型：** 不需要文件上下文 此工具返回已通过 Figma 身份验证的用户的身份，包括： - 用户的电子邮件地址 - 用户所属的所有计划 - 用户在每个计划上拥有的席位类型 ### `use_figma`（仅限远程） **注意：** 我们正在快速改进 Figma 对 AI 代理的支持。这最终将成为一项基于用量的付费功能，但在 Beta 期间目前免费提供。 **支持的文件类型：** Figma Design, FigJam 用于写入 Figma 的通用工具。使用它来创建、编辑、删除或检查 Figma 文件中的任何对象：page、frame、component、variant、variable、style、text、image 等。 在相关时，代理将首先检查您的设计系统中是否有现有组件可供复用，然后再从头开始创建任何内容。 `use_figma` 工具最好配合 `figma-use` 技能调用。 **您可以要求它：** - **创建或修改设计** - `add a new frame to my Figma file` - `update the button component to use the correct fill color` - **设置 design token、variable 或 style** - `create a color variable collection from my design tokens` - `set up spacing tokens in my Figma file` - **构建或更新 component 和 variant 系统** - `generate variants for the card component` - `sync my Figma components with my latest code changes` - **修复布局或视觉问题** - `fix the auto-layout spacing on the nav component` - `update the typography styles to match the design spec` ### `search_design_system` **支持的文件类型：** Figma Design 搜索所有连接的设计库以查找与文本查询匹配的 component、variable 和 style。返回匹配的资源，以便代理可以复用现有的设计系统元素，而不是从头创建新元素。 **您可以要求它：** - **查找组件** - `search for a button component in my design system` - `find a card component I can use for this layout` - **查找 token** - `search for the primary color variable in my design system` - `find spacing tokens in my design libraries` - **按类型筛选** - `search for icon styles in my design system` ### `create_new_file` **支持的文件类型：** 不需要文件上下文 在您的草稿文件夹中创建一个新的空白 Figma Design 或 FigJam 文件。如果您属于多个计划，系统会询问您要在哪个团队或组织中创建文件。 **您可以要求它：** - **创建新的设计文件** - `create a new Figma file called "Homepage Redesign"` - **创建新的 FigJam 文件** - `create a new FigJam board for our project planning session` # MCP 最佳实践 生成代码的质量取决于几个因素。有些由您控制，有些由您使用的工具控制。以下是一些获得干净、一致输出的建议。 ## 构建您的 Figma 文件结构以获得更好的代码 为您的设计意图提供最佳上下文，以便 MCP 和您的 AI 助手生成清晰、一致且符合您系统的代码。 - 对任何复用的内容（按钮、卡片、输入框等）**使用 component** - 通过 Code Connect **将 component 链接到您的代码库**。在代码中获得一致组件复用的最佳方式。没有它，模型只能靠猜测。 - 对间距、颜色、圆角和排版**使用 variable**。 - **语义化命名 layer**（例如 `CardContainer`，而不是 `Group 5`） - **使用 Auto layout** 传达响应式意图。 - **使用注释和开发资源**传达难以从视觉效果中捕捉的设计意图，例如某物应如何表现、对齐或响应。 ## 编写有效的提示词来引导 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** 提供结构化的 **React + Tailwind** 形式的 Figma 选区表示。这是一个起点，您的 AI 助手可以根据您的提示词将其翻译成任何框架或代码风格。 - **get_variable_defs** 提取您选区中使用的 variable 和 style（颜色、间距、排版等）。这有助于模型在生成的代码中直接引用您的 token。 例如，如果您得到的是原始代码而不是 token，请尝试如下操作： - "Get the variable names and values used in this frame." ## 添加自定义规则 设置项目级指导以保持输出一致——就像给新开发者的入职培训说明一样。这些内容包括： - 首选的布局原语 - 文件组织 - 命名模式 - 不应硬编码的内容 您可以使用 MCP 客户端用于指令文件的任何格式提供此内容。 **示例：** #### 确保持续良好的输出 ``` ## Figma MCP 集成规则 These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change. ### 必要流程（请勿跳过） 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. ### 实施规则 - 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 服务器规则 - 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 **获取项目上下文**（单个文件或整个项目） - **提示使用现有代码组件**而不是从头开始 - **使用真实数据扩展原型**以更快地验证设计并将其投入生产 ### 工作原理 #### 从 Make 获取资源的步骤 1. **提示您的代理获取上下文**，方法是提供有效的 Make 链接 2. **从您的 Make 项目接收可用文件列表** 3. **在提示时下载您想要获取的文件** ### 示例工作流程 **目标：** 在您的生产代码库中实现一个与 Make 中定义的设计和行为相匹配的弹出组件。 1. 与您的代理分享您的 Make 项目链接。 2. 提示代理：_"I want to get the popup component behavior and styles from this Make file and implement it using my popup component."_ 您的代理将从 Make 获取相关上下文，并指导您使用原型的功能和样式扩展现有的弹出组件。 # 图标指南 有关显示此存储库中包含的任何图标，请参阅 [Figma 品牌使用指南](https://www.figma.com/using-the-figma-brand)。

标签：AI编程, Canvas API, Code Connect, Figma, Figma Beta, IDE插件, MCP服务器, Model Context Protocol, SOC Prime, Subfinder, UI设计, 产品开发, 代码生成, 多模态安全, 开发工具, 渗透测试工具, 自动化设计, 设计系统, 设计自动化, 设计转代码