Figma Meets OpenAI Codex: The Design-to-Code Workflow That Removes Handoff Friction

Key Takeaways

• Figma’s MCP server (beta, February 2026) connects the design canvas directly to OpenAI Codex for bidirectional code generation
• Developers pull design context including layouts, components, and tokens from Figma files directly into Codex without manual transcription
• Live UI from a running app can be captured and converted into editable Figma design layers using the capture toolbar
• Figma struck a parallel deal with Anthropic’s Claude Code one week before this OpenAI partnership, signaling an AI-agnostic strategy

The biggest bottleneck in product development has never been writing code or creating designs. It’s been the gap between them. Figma’s new Codex integration, launched in beta on February 25, 2026, closes that gap with a bidirectional MCP server that lets teams move fluidly between the canvas and the codebase. This article breaks down exactly how it works, where it delivers real value, and what limitations teams need to plan for before adopting it.

What the Figma MCP Server Actually Does

The Figma MCP (Model Context Protocol) server acts as a live bridge between Figma’s canvas and AI coding agents, including OpenAI Codex. Unlike older plugin-based solutions that passed static image exports or basic specs, this integration gives Codex full access to design variables, component hierarchies, layout data, and Code Connect information tied to your actual codebase.

The result is code that respects existing repository styles and frameworks automatically. Codex product lead Alexander Embiricos stated the integration “empowers Codex to serve a wider array of builders and businesses, as it doesn’t presume that you identify as a designer or an engineer.”

Also Read Notion 3.3 Custom Agents: Autonomous AI That Works While Your Team Sleeps

Two Core Directions: Design to Code and Code to Canvas

The workflow operates in both directions, and that bidirectionality is the feature that separates this integration from prior automation tools.

Direction 1: Design to Code

To generate code from a Figma file, a developer selects the layer they want in Figma Design, copies the link from the browser address bar, then pastes the URL into Codex and prompts it to implement the design. The MCP server extracts the node ID from the URL and returns design context including layouts, styles, and component information to Codex.

The integration works across Figma Design files, Figma Make, and FigJam boards. Teams can also set up Code Connect to instruct Codex to use existing design system components as building blocks, which keeps generated code consistent with the actual project repository rather than producing generic markup.

Direction 2: Code to Canvas

After iterating in code, developers can send the live UI of their running web app or site back into Figma as editable design layers. The process runs through conversation with the MCP client:

1. Prompt Codex: “Start a local server for my app and capture the UI in a new Figma file.”
2. Follow the steps Codex provides. It opens a browser window or provides a link to follow.
3. Use the capture toolbar to capture pages, elements, and states of the running app.
4. Let Codex know when finished. It returns a link to open the newly created Figma file.

This feature is currently supported only through the remote Figma MCP server with Claude Code and Codex by OpenAI.

Supported Clients: More Than Just Codex

Figma’s MCP server is not exclusive to Codex. The official documentation lists support for multiple clients across both desktop and remote server configurations.

Note that live UI capture (code to canvas) is currently limited to Codex and Claude Code only via the remote server. All other clients support design-to-code context extraction.

Setting Up the Figma MCP Server: Two Connection Methods

The Figma MCP server connects in two ways.

The remote MCP server connects directly to Figma’s hosted endpoint at https://mcp.figma.com/mcp and is the recommended setup. The desktop MCP server runs locally through the Figma desktop app and requires a Dev or Full seat on a paid Figma plan. The remote server is available across all seats and plans.

For Codex specifically, setup is handled through the Codex desktop application, which provides an interface for managing agents across projects. Figma’s official documentation provides specific installation instructions and example prompts for each supported client.

What Skills Add to the Workflow

Beyond raw MCP tool calls, Figma’s server introduces “Skills,” which are agent-level instructions that help AI tools work more effectively with Figma designs. Skills guide agents through multi-step workflows such as connecting Figma design components to code components via Code Connect, generating design system rules aligned to a codebase, and translating designs into production-ready code.

Skills do not replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions teams can apply across projects.

What This Integration Means for Product Teams

Figma’s MCP server with Codex signals a structural change in how cross-functional teams operate. Loredana Crisan, Figma’s chief design officer, stated the integration lets teams “enhance their finest ideas, not just their initial concept, by merging the strengths of coding with the creativity, collaboration, and craftsmanship that Figma’s limitless canvas offers.”

OpenAI Codex reached over one million weekly users after launching as a command-line coding assistant and later expanding into ChatGPT and a MacOS desktop application. Figma was among the first companies to launch an app within ChatGPT in October 2025, establishing a prior relationship before this deeper MCP integration.

Demonstrations have shown Codex extracting Figma links to create prototypes with an accuracy rate of 80 to 90 percent based on design systems, with support for hot reloading and interactive testing. Upcoming Codex model versions are expected to handle longer tasks spanning several hours, which would extend this integration’s usefulness to more complex, multi-screen feature development cycles.

Limitations and Considerations

The live UI capture feature (code to canvas) requires the remote MCP server and is currently only supported for Claude Code and Codex by OpenAI. Teams using other clients such as Cursor or VS Code cannot yet use this reverse workflow. The desktop MCP server also requires a Dev or Full seat on a paid plan, which adds a cost consideration for teams evaluating adoption.

Figma plans to expand the MCP catalog to connect with additional clients beyond the current lineup. User feedback regarding authentication challenges indicates active issues that Figma is working to resolve. Teams should review Figma’s release notes and MCP catalog page for the latest updates before committing to a production workflow built on beta features.

Also Read OpenAI’s Stateful Runtime in Amazon Bedrock Solves the Hardest Problem in Enterprise AI

Frequently Asked Questions (FAQs)