原文作者：Yarden Katz，Figma 产品经理 | 翻译：Michael

用 Codex 和 Figma 构建前端 UI

从今天开始，你可以通过 Figma MCP server，直接在 Codex 中生成 Figma 设计文件。这个 MCP server 的设计目标就是支持双向流动：既可以把正在运行的 UI 带到 Figma 画布中，也可以像把设计带入代码一样轻松地把修改再带回代码中。这样，你就可以在自己最好的想法之上继续构建，而不只是停留在第一个想法上。

Codex 桌面应用是专为 agentic coding（代理式编码）打造的。它提供了一个专注的界面，让你可以在多个项目中并行管理多个 agent，跟踪进度而不丢失上下文，并且能集成外部工具。这种流畅性会让人感到熟悉。在 Figma 中，团队同样也是这样自然地流动协作的。Figma 的画布天生就是为探索和迭代而设计的，它是一个可以让最佳想法逐步成形的空间。通过将 Figma 画布与 Codex 连接起来，这种探索精神就能直接延伸到开发工作流之中，从而解锁一种全新的强大方式，帮助用户构建从原型到生产级应用的一切内容。

从设计开始构建应用

Figma MCP server 的一个核心使用场景，就是从 Figma 文件中获取上下文，并将这些上下文用于代码生成。Figma MCP server 可以从 Figma Design、Make 和 FigJam 文件中捕获信息，并在构建过程中将这些信息传递给 Codex。

要开始使用，先打开你计划用来构建应用的 Figma 文件。然后右键点击一个 frame，选择 “Copy as” 再选择 “Copy link to selection”。

这些 selection URL 会直接链接到 Figma 画布中的某个 frame 或节点。它可以是单个元素，也可以是一组组件，但本质上，它就是 agent 用于代码生成的源数据。选区可以来自 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.

类似这样的提示会引导 agent 调用 Figma MCP server 中的 get_design_context 工具。这个工具会帮助提取 Figma 文件中的关键设计信息，例如布局、样式和组件信息，然后把这些上下文提供给 Codex 进行代码生成。

除了提取设计信息之外，Figma MCP server 中还有许多其他有帮助的工具；如果你想查看完整列表，请务必查阅我们的文档。

从代码回到画布

当你在代码中迭代了一段时间之后，你通常会希望把设计重新带回画布中，以便比较流程、探索不同方案，并验证自己的假设。Figma MCP server 让你可以轻松地把这些界面重新带回 Figma，而不必再从浏览器中手动重建一遍。借助 generate_figma_design 工具，你可以在几秒钟内将一个真实运行中的界面转换成完全可编辑的 Figma frame，把真正可用、可运行的 UI 直接带到画布中，以便做更深入的探索和协作。