OpenAI and Figma Launch Real-Time Design to Code Integration via MCP

OpenAI and Figma have announced a technical partnership that bridges the gap between design and development using the Model Context Protocol (MCP). The new Figma MCP server allows the Codex desktop application to interact directly with Figma files. This integration facilitates a seamless transfer of UI designs into working code and enables live code captures to be sent back to Figma as editable layers.

The Codex desktop application serves as a dedicated environment for managing AI agents during the coding process. By installing the Figma MCP server, these agents gain the ability to read layout data, styles, and components from Figma Design or FigJam files. Developers can copy a link to a specific Figma frame and prompt Codex to implement the design using their existing codebase.

A distinct feature of this release is the bidirectional roundtrip workflow that moves beyond simple code generation. The tools allow developers to render their application UI and capture it directly back into Figma as editable layers. This ensures that the design file stays in sync with the actual production code, allowing designers to manipulate the live implementation's layout.

During the capture process, a specialized toolbar appears in the browser to assist the user. Developers can choose to capture the entire screen or select specific elements to send back to the canvas for further iteration. This functionality helps teams validate assumptions by comparing implemented code against the original design vision in a shared creative space.

The collaboration is built on the Model Context Protocol, an open standard designed to connect AI models to external tools safely. More information regarding the technical implementation can be found at the OpenAI Developer Blog. This architecture allows the Codex agent to act as an orchestrator across the entire product development lifecycle.