Codex and Figma: Closing the loop between canvas and code
Figma's MCP server is emerging as a bridge between design intent and agentic coding. The newest integration targets Codex, OpenAI's agentic coding environment, allowing teams to move in both directions: pull design context from Figma files into a coding session, then push a running interface back onto the canvas for collaborative refinement.
The Figma MCP server enables this roundtrip through two primary tools—get_design_context and generate_figma_design—and it works across Figma Design, Figma Make, and FigJam files. The flow is designed to let a team start a build wherever it is most natural, whether that's a design artifact or a codebase, and iterate without having to manually resync the two.
Starting a build from a Figma frame
The most direct path into the integration starts on the canvas. After opening the Figma file that contains the intended UI, you grab a selection link: right-click on a frame (or any node, from a single element to a collection of components) and choose Copy as > Copy link to selection.
That URL points the agent at the exact source data it should use for code generation. Back in Codex, you open a new or existing project and issue a prompt that references the design, for example: Help me implement this Figma design in code, use my existing design system components as much as possible.
Codex responds by invoking the get_design_context tool. That call extracts the information an LLM needs for design-informed code generation—layouts, styles, component data—and feeds it to the agent so the resulting UI matches the intended structure and look.
Pushing running code onto the canvas
The integration is designed to support iteration in the opposite direction as well. After making changes in code, you can bring a live render into Figma without recreating screens by hand. The generate_figma_design tool converts a running, interactive interface into fully editable Figma frames.
To use it, you first render your application locally or host it on a publicly accessible web server. Then ask Codex to generate a new Figma Design file. The agent will walk through four steps:
- Create a new Figma file or target an existing one.
- Choose the workspace where the file should live.
- Set up the application for UI capture.
- Open a fresh browser session of the app.
Once the app reloads, a capture toolbar appears at the top of the page. It offers three actions:
- Entire screen: Sends the current full render to the Figma file.
- Select element: Captures a specific component or element rather than the whole viewport.
- Open file: Jumps to the Figma file to inspect the newly generated design layers.
When you're done capturing, you can either open the file directly or return to Codex, where the agent will hand you the URL to the newly created Figma file.
Refining the UI, then sending it back
Once the interface is represented as Figma frames, the design team has the full canvas toolkit available. Useful moves at this stage include swapping in real design system components, applying styles and color variables, adjusting responsive layouts, annotating states and interactions, and exploring several visual variations in parallel.
When that round of refinement is complete, the changes can be pulled back into code using the same get_design_context flow described above. The agent reads the altered file and generates updated code, which keeps the two representations in sync.
This two-way connection is what makes the loop useful: the workflow treats Figma and Codex as complementary surfaces, recognizing that some design problems are better explored on a canvas and some are better solved in code. The MCP server is now available for installation directly in the Codex desktop application, with further documentation and the full list of available tools in the developer docs.
