Back to Details

figma

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma MCP

Figma MCP

Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see 
references/figma-mcp-config.md
.
使用Figma MCP服务器实现Figma驱动的开发。有关设置和调试的详细信息（环境变量、配置、验证），请参阅
references/figma-mcp-config.md
。

Figma MCP Integration Rules

Figma MCP集成规则

These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.
这些规则定义了如何将Figma输入转换为适用于本项目的代码，所有Figma驱动的变更都必须遵守这些规则。

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.
  1. 首先运行get_design_context，获取目标节点的结构化表示。
  2. 如果响应内容过大或被截断，请运行get_metadata获取高级节点映射，然后使用get_design_context重新仅获取所需的节点。
  3. 运行get_screenshot，获取当前要实现的节点变体的可视化参考截图。
  4. 只有在同时获取到get_design_context和get_screenshot之后，才能下载所需资源并开始开发实现。
  5. 将输出内容（通常为React + Tailwind）转换为符合本项目规范、样式和框架的代码。尽可能复用项目的颜色标记、组件和排版样式。
  6. 在标记完成前，对照Figma验证界面的视觉效果和交互行为是否1:1还原。

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.
  • 将Figma MCP的输出（React + Tailwind）视为设计和交互行为的参考，而非最终的代码风格。
  • 在适用情况下，将Tailwind工具类替换为项目首选的工具类/设计系统标记。
  • 复用现有组件（如按钮、输入框、排版组件、图标容器），而非重复实现功能。
  • 始终遵循项目的颜色系统、排版比例和间距标记规范。
  • 遵循仓库中已有的路由、状态管理和数据获取模式。
  • 力求与Figma设计实现1:1的视觉一致性。当出现冲突时，优先遵循设计系统标记，微调间距或尺寸以匹配视觉效果。
  • 对照Figma截图验证最终UI的视觉效果和交互行为。

Asset handling

资源处理

  • 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.
  • Figma MCP服务器提供了一个资源端点，可用于获取图片和SVG资源。
  • 重要提示：如果Figma MCP服务器返回图片或SVG的localhost源，请直接使用该资源地址。
  • 重要提示：请勿导入/添加新的图标包，所有资源都应包含在Figma的返回数据中。
  • 重要提示：如果提供了localhost源，请勿使用或创建占位符。

Link-based prompting

基于链接的提示

  • The server is link-based: copy the Figma frame/layer link and give that URL to the MCP client when asking for implementation help.
  • The client cannot browse the URL but extracts the node ID from the link; always ensure the link points to the exact node/variant you want.
  • 该服务器基于链接工作：请求实现帮助时，复制Figma帧/图层链接并将该URL提供给MCP客户端。
  • 客户端无法浏览URL，但会从链接中提取节点ID；请始终确保链接指向你需要的具体节点/变体。

References

参考资料

  • references/figma-mcp-config.md
    — setup, verification, troubleshooting, and link-based usage reminders.
  • references/figma-tools-and-prompts.md
    — tool catalog and prompt patterns for selecting frameworks/components and fetching metadata.
  • references/figma-mcp-config.md
    — 设置、验证、故障排查及基于链接的使用提示。
  • references/figma-tools-and-prompts.md
    — 工具目录及用于选择框架/组件和获取元数据的提示模板。