从今天起，您可以在 Codex 中使用 Figma MCP 服务器生成 Figma 设计文件。该 MCP 服务器支持双向转换：既能将运行中的界面导入 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 画框，把真实可用的界面直接导入画布，开展更深入的探索与协作。
首先，您需要渲染应用的界面。这既可以在本地完成，也可以通过可公开访问的 Web 服务器完成。然后，请 Codex 帮您生成一个新的 Figma 设计文件。
接下来，Codex 会引导您完成以下步骤：
- 决定是创建新的 Figma 文件，还是使用现有文件。
- 确定将文件放在哪个工作空间。
- 配置应用，为界面捕获做好准备。
- 在新的浏览器会话中打开您的应用。
应用重新加载后，您会在页面顶部看到一个新的工具栏，其中包含以下选项：
整个屏幕： 捕获当前显示的整个屏幕的渲染内容，并将其发送到 Figma 文件。
选择元素： 选择页面上的特定组件或元素进行捕获
打开文件： 打开 Figma 文件，查看新生成的设计图层
捕获完所有想要传入 Figma 的信息后，您可以选择打开文件，或返回 Codex。Codex 会为您准备好 Figma 文件的 URL。
往返之间：一个 MCP 的故事
现在，您已经构建了应用并准备好了设计文件，可以开始迭代了。您可以在这里充分利用 Figma 画布的各项功能，包括：
- 添加设计系统组件
- 将样式、字体和颜色改为使用变量
- 调整布局并添加说明性标注
- 设计各种交互和空状态
- 协作探索并设计多种方案
完成界面优化后，您可以按照本文开头介绍的步骤，通过 MCP 服务器将这些改动带回应用。
将代码与画布连接起来后，您就能在实现与探索之间自如切换。这种往返迭代的过程，让 Figma MCP 服务器与 Codex 结合的真正潜力得以发挥：您可以从任何一端开始，在不牺牲速度的前提下，打造有价值、高质量的应用体验。
如需进一步了解 Figma MCP 服务器，请参阅我们的文档，或直接在 Codex 桌面应用中安装 Figma MCP 服务器，开始使用。