Codex 接入 Figma MCP server，支持设计与代码双向转换

从今天起，你可以使用 Figma MCP 服务器从 Codex 生成 Figma 设计文件。该 MCP 服务器旨在支持双向流动，既能将可用的 UI 带到 Figma 画布上，也能同样轻松地将其带回代码中，让你能够基于最好的想法进行构建，而不仅仅是你的第一个想法。

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

从设计开始构建应用

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

要开始使用，请打开你计划用于构建应用的 Figma 文件。右键单击选择一个画框，然后选择“Copy as”和“Copy link to selection”。

这些选择 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 捕获设置应用。
打开应用的新浏览器会话。

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

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

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

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

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

往返之间，一个 MCP 的故事

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

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

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

当代码与画布连接起来时，你可以在执行与探索之间流畅切换。这一往返流程释放了 Figma MCP 服务器与 Codex 结合使用的真正威力——能够从任何地方开始，打造有意义、高质量的应用程序体验，同时不牺牲速度。

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