新型工具由Figma发布，增强AI将设计准确转换为代码的能力

Figma 最近推出了一款名为开发模式模型上下文协议（MCP）服务器的新工具，旨在帮助 AI 更精准地将设计转化为代码。以下是该工具的详细介绍：

核心功能

• 直接访问设计数据：MCP 服务器允许 AI 模型直接访问 Figma 设计文件中的详细数据，例如精确的数字、颜色、字体和布局信息，而不仅仅是依赖图像文件进行视觉猜测。这大大提高了 AI 转换设计为代码的准确性和效率。

• 精简设计上下文：该工具能够去除冗余信息，仅提供代码生成所需的简洁数据。

• 支持特定节点提取：可以提取整个文件或指定框架、组的信息。

• 无缝对接 AI 编码工具：与 Cursor 等 AI 编码工具集成，让 AI 根据设计直接生成 HTML、CSS 等代码。

使用方法

1. 安装与启动：使用 NPM、PNPM、YARN 或 Bun 等工具快速启动服务器。

2. 配置：通过环境变量或命令行参数进行配置。

3. 连接到 AI 工具：将 MCP 服务器连接到 Cursor 等工具，并通过工具的设置页面完成配置。

4. 使用：在 AI 工具的界面中粘贴 Figma 文件或特定节点的链接，请求 AI 根据设计生成代码。

优势与意义

• 减少视觉猜测：AI 可以获取设计中的精确信息，从而减少因视觉猜测导致的误差。

• 降低开发工作量：减少了大语言模型（LLM）的使用，降低了 AI 编码工具将设计转化为功能性应用所需的工作量。

• 提升开发效率：通过 AI 工具直接生成代码，减少了开发人员在重复性任务上的时间。

• 促进协作：设计师和开发者可以围绕同一 Figma 文件协作，减少沟通成本。

未来更新

Figma 表示，未来几个月内将发布一系列 MCP 服务器的更新，包括远程服务器功能和更深层的代码库集成。此外，Figma 还计划在 6 月 12 日推出 Figma Sites Code Layers 功能，提供将设计转化为交互式网站体验的 AI 工具。

相关工具

除了 MCP 服务器，Figma 近期还推出了其他相关工具和服务，例如：

• Figma Make：通过 AI 技术实现了从设计稿到代码的自动化生成，支持实时更新与协作、多平台开发以及可定制的代码输出。

• Codia AI Code：一款 Figma 插件，利用 AI 技术将设计稿快速转换为可用的代码，支持多种开发框架，转换速度快，识别精准。

• Visual Copilot：由 Builder Velocity 发布的工具，能够将 Figma 设计即时转换为 React、Vue 等多种框架的代码，支持多设备响应式设计和代码重用。

Figma 的这些新工具和服务标志着设计与开发之间的界限正在逐渐模糊，AI 工具将为设计师和开发者提供更为便利的工作方式，推动产品设计的效率提升和质量改进。