Figma and OpenAI Codex Now Talk in Both Directions

Figma and OpenAI announced a partnership today that connects Codex directly to Figma’s design platform through the Figma MCP server. The integration works in both directions: designers can hand off frames to Codex for code generation, and developers can capture running UIs and send them back to the Figma canvas as fully editable design layers.

This arrives one week after Figma launched a similar integration with Anthropic’s Claude Code, making Figma the connective tissue between the two biggest AI coding tools on the market right now.

What the Integration Actually Does

The whole thing runs on Figma’s MCP (Model Context Protocol) server. MCP is an open standard that lets AI tools connect to external applications and pull structured data from them. Think of it as a standardized API layer between your AI coding assistant and Figma’s design environment.

Two MCP tools power the integration:

get_design_context pulls layout information, styles, component data, and variables from Figma Design, Figma Make, and FigJam files. When you paste a Figma frame URL into Codex and ask it to build the design, this tool extracts everything the agent needs: colors, fonts, spacing, component hierarchy, and any Code Connect mappings your team has set up.

generate_figma_design goes the other direction. It takes a live, running interface (local dev server or public URL) and converts it into fully editable Figma frames. The result lands on your canvas with real layers, not a flattened screenshot.

Canvas to Code: The Design Handoff

The workflow starts in Figma. You open your design file, right-click a frame, select “Copy as” then “Copy link to selection.” That URL contains all the context Codex needs.

Open Codex, paste the URL, and write something like: “Help me implement this Figma design in code, use my existing design system components as much as possible.”

Codex calls get_design_context through the MCP server, pulls the layout data, styles, and component structure, and generates production code. It understands your design system if you’ve set up Code Connect, which maps Figma components to their code equivalents. The output isn’t generic HTML. It references your actual component library.

Figma’s Yarden Katz, a Product Manager on the team, wrote the announcement. The Codex desktop application handles the agent side, providing what OpenAI describes as a focused interface for managing multiple agents in parallel across projects.

Code to Canvas: The Reverse Trip

This is the part that’s genuinely new. After you’ve iterated in code, you can bring your design back into the canvas to compare flows, explore alternatives, and validate your assumptions with the broader team.

Here’s the process:

Render your application UI locally or on a public web server
Ask Codex to generate a new Figma Design file
Pick a workspace and destination file
A browser toolbar appears with capture options

The toolbar gives you three choices: capture the entire screen, select a specific element, or open the generated Figma file directly. The captured UI arrives as editable Figma frames, not rasterized images. You can move layers around, swap in design system components, update styles, add annotations, and explore variations.

Loredan Crisan, Figma’s Chief Design Officer, put it this way: “With this integration, teams can build on their best ideas, not just their first idea, by combining the best of code with the creativity, collaboration, and craft that comes with Figma’s infinite canvas.”

Why Bidirectional Matters

Most design-to-code tools only go one way. You design something, generate code, and that’s it. Any changes happen in code, and the design file becomes a stale artifact within hours.

The bidirectional flow here means you can go back. Build a feature in Codex, send it to Figma, have your design team explore three variations on the canvas, then push the winning version back to code. The design file stays a living document through the development process, not just a spec that gets thrown over the wall.

Dylan Field, Figma’s CEO, has been framing this around what he calls “escaping tunnel vision.” His argument: the design canvas is better for navigating lots of possibilities than prompting in an IDE. Code is great for building. The canvas is great for seeing, comparing, and deciding. Now you don’t have to choose.

The Claude Code Connection

Figma launched the same MCP server integration with Claude Code on February 18, about a week before this Codex announcement. The Figma MCP server works with Claude Code, Codex, Cursor, VS Code, and over a dozen other MCP-compatible clients.

The MCP approach means Figma isn’t picking sides. Any AI tool that speaks MCP can plug into the same design data pipeline. But the fact that Figma partnered with both OpenAI and Anthropic within a single week signals that this design-code bridge is becoming table stakes for AI coding tools.

Figma was also one of the first partners to launch a ChatGPT app back in October 2025, so the OpenAI relationship isn’t new.

Setup and Requirements

Desktop MCP server: Runs locally through the Figma desktop app. You need a Dev or Full seat on any paid Figma plan. Open Figma preferences, turn on “Dev Mode MCP Server,” and it runs at http://127.0.0.1:3845/sse. Add the server to Codex with a single terminal command.

Remote MCP server: Hosted at https://mcp.figma.com/mcp, available on all seats and plans. This is what enables the code-to-canvas generate_figma_design tool, which currently works with Codex and Claude Code only.

Free Figma accounts get six MCP tool calls per month. Paid plans have higher limits.

Alexander Embiricos, who leads the Codex product at OpenAI, said the integration “makes Codex powerful for a much broader range of builders and businesses because it doesn’t assume you’re ‘a designer’ or ‘an engineer’ first.”

Codex by the Numbers

OpenAI shared some stats alongside the announcement. Over one million people use Codex weekly. The Codex macOS app, which launched earlier this month, hit one million downloads in its first week. Codex usage overall has grown more than 400% since the start of 2026.

Those numbers explain why Figma wants tight integration here. A million weekly users generating UI code is a lot of potential Figma customers who might now loop design back into their workflow.

What This Means for the Design-Code Gap

For years, the design-to-development handoff has been one of the most friction-filled parts of building software. Designers make something in Figma, developers rebuild it in code, and the two drift apart almost immediately.

AI coding tools were making this worse in some ways. Developers could skip the design phase entirely, prompting their way to a UI that worked but didn’t match any design system. The result: faster code, worse consistency.

This integration tries to solve that by keeping Figma in the loop even when AI is writing the code. If Codex can read your design tokens, reference your component library, and send results back to the canvas for review, the design system stays relevant instead of getting bypassed.

Whether teams actually adopt the full bidirectional workflow or just use the canvas-to-code direction remains to be seen. But the infrastructure is there now, and it works with the two most popular AI coding assistants on the market.