使用 Codex 和 Figma 构建前端 UI

从今天起，你可以使用 Figma MCP 服务器通过 Codex 生成 Figma 设计文件。该 MCP 服务器旨在支持双向流动，既能将可用的 UI 带到 Figma 画布上，也能同样轻松地将其带回代码中，这样你就能在最佳想法的基础上继续构建，而不仅仅是停留在最初的想法上。

Codex 桌面应用程序是专为智能体编码而打造的。它提供了一个专注的界面，用于跨项目并行管理多个智能体、在不丢失上下文的情况下跟踪进度，以及集成外部工具。这种流畅的体验令人熟悉。在 Figma 中，团队同样可以轻松协作。画布专为探索和迭代而设计。这是一个让最佳想法得以成形的空间。通过将 Figma 画布与 Codex 连接起来，这种探索精神直接延伸到开发工作流中——为用户解锁了一种强大的全新方式，用于构建从原型到生产应用的一切内容。

从设计开始构建应用

Figma MCP 服务器的核心用例之一是从 Figma 文件中检索上下文，并在代码生成中使用该上下文。Figma MCP 服务器可以从 Figma Design、Make 和 FigJam 文件中捕获信息，并将其作为构建过程的一部分传递给 Codex。

要开始使用，请打开你打算用来构建应用的 Figma 文件。右键点击选择一个框架，然后选择“复制为”和“复制所选内容的链接”。

这些选择 URL 直接链接到 Figma 画布上的框架或节点。它们可以是单个元素，也可以是一组组件，但本质上它是智能体用于代码生成的源数据。选择可以来自 Figma Design、Make 或 FigJam 文件。获得 URL 后，打开 Codex 并选择新建项目或现有项目。在这里，你可以用如下提示词指示 Codex：

help me implement this Figma design in code, use my existing design system components as much as possible.

这样的提示词会指示智能体调用 Figma MCP 服务器中的 get_design_context 工具。该工具帮助从 Figma 文件中提取关键设计信息，如布局、样式和组件信息，然后将该上下文提供给 Codex 进行代码生成。

除了提取设计信息外，Figma MCP 服务器中还有许多其他有用的工具；完整列表请务必查看我们的文档。

从代码到画布

在代码中迭代之后，你会希望将设计带回画布，以比较流程、探索替代方案并验证你的假设。Figma MCP 服务器可以轻松地将这些界面带回 Figma，而无需从浏览器手动重新创建。借助 generate_figma_design 工具，你可以在几秒钟内将实时运行的界面转换为完全可编辑的 Figma 框架——将真实、可用的 UI 直接带到画布上，以便进行更深入的探索和协作。

首先，你需要渲染应用的 UI。这可以在本地完成，也可以通过公开可用的 Web 服务器完成。然后，请求 Codex 帮助你生成一个新的 Figma 设计文件。

Codex 随后会引导你完成以下步骤：

决定是创建新的 Figma 文件还是使用现有文件。
确定将文件放置在哪个工作区。
为 UI 捕获设置应用。
打开应用的新浏览器会话。

当应用重新加载时，你会看到页面顶部出现一个新工具栏，包含以下选项：

整个屏幕：捕获当前显示的整个屏幕的渲染结果并将其发送到 Figma 文件。

选择元素：选择页面上要捕获的特定组件或元素

打开文件：打开 Figma 文件以检查你的新设计图层

在捕获了所有你想要传输到 Figma 的信息后，你可以选择打开文件或返回 Codex。Codex 会为你准备好 Figma 文件的 URL。

往返之旅，一个 MCP 的故事

既然你已经构建了应用并设置了设计文件，现在就可以开始迭代了。在这里，你可以充分利用 Figma 画布所提供的功能，包括：

添加设计系统组件
将样式、字体和颜色更新为变量
调整布局并添加注释说明
制作各种交互和空状态
协作进行多种变体和探索

完成 UI 的优化后，你可以按照本篇博客开头概述的相同步骤，通过 MCP 服务器将这些更改拉回你的应用程序中。

当代码与画布相连时，你可以在执行与探索之间流畅切换。这一往返流程释放了 Figma MCP 服务器与 Codex 结合的真正力量——即从任意起点出发，打造有意义、高质量的应用体验，同时不牺牲速度。

欲了解有关 Figma MCP 服务器的更多信息，请查阅我们的文档，或直接在 Codex 桌面应用程序中安装 Figma MCP 服务器以开始使用。