AI 摘要：本文详细介绍了 Figma 的 Dev Mode MCP Server（目前处于开放测试阶段）的功能、使用方法和最佳实践。Dev Mode MCP Server 通过 Model Context Protocol 提供了一个标准接口，使 AI 代理能够与 Figma 设计文件交互，直接将设计转化为代码，并提取设计上下文和组件信息。文章涵盖了如何启用服务器、配置客户端、提示工具使用以及优化设计文件和提示以获得更好的代码生成效果，旨在帮助开发者和设计团队更高效地进行设计到代码的工作流程。

功能与适用范围：
• Dev Mode MCP Server 目前为开放测试版，适用于 Professional、Organization 和 Enterprise 计划的 Dev 或 Full 座位用户。
• 需使用支持 MCP Servers 的代码编辑器（如 VS Code、Cursor、Windsurf、Claude Code）以及 Figma 桌面应用。
• 主要功能包括从 Figma 帧生成代码、提取设计上下文（如变量、组件、布局数据）以及通过 Code Connect 提高代码输出质量和一致性。

使用步骤：
• 步骤 1：启用 MCP Server - 在 Figma 桌面应用中通过 Preferences 启用 Dev Mode MCP Server，服务器本地运行于 http://127.0.0.1:3845/sse 。
• 步骤 2：设置 MCP 客户端 - 根据不同代码编辑器（如 VS Code、Cursor、Windsurf、Claude）配置 MCP 服务器连接，涉及在设置中添加服务器 URL 并确保连接成功。
• 步骤 3：提示 MCP 客户端 - 通过选择 Figma 中的帧或层，或使用链接，提供设计上下文给 AI 客户端，并通过提示生成代码或提取信息。

工具与用法建议：
• get_code - 用于生成代码，支持 React + Tailwind 默认输出，可通过提示自定义框架（如 Vue、HTML+CSS、iOS）或使用特定组件。
• get_variable_defs - 返回所选内容中使用的变量和样式（如颜色、间距、字体），帮助生成代码时引用设计令牌。
• get_code_connect_map - 提供 Figma 节点 ID 与代码库中对应组件的映射，确保设计到代码的无缝转换。
• get_image - 截取所选内容的屏幕截图以保留布局保真度，可在设置中启用或使用占位符。

Dev Mode MCP Server 设置：
• 提供额外的偏好设置，如启用 get_image 工具、使用占位符、启用 Code Connect 以重用代码库组件。

MCP 最佳实践：
• 结构化 Figma 文件 - 使用组件、变量、语义化命名、自动布局和注解以提供清晰的设计意图，确保生成的代码一致且符合设计系统。
• 编写有效的提示 - 清晰的提示可指导 AI 输出符合框架、文件结构或特定路径的代码，示例包括指定框架（如 SwiftUI、Chakra UI）或组件路径。
• 触发特定工具 - 如结果不理想，可在提示中明确指定工具（如 get_code 或 get_variable_defs ）以获取更准确的上下文。
• 添加自定义规则 - 设置项目级指导规则（如布局优先级、文件组织、命名模式）以保持输出一致性，减少重复提示。
• 分解大型选择 - 将大屏幕拆分为小组件或逻辑块以提高生成速度和可靠性，避免上下文过多导致的错误或不完整响应。

注意事项：
• 由于处于测试阶段，功能和设置可能不完整，可能遇到 bug 或性能问题。
• 用户可通过 Figma 内的反馈表单提供意见，帮助改进功能。