Figma

Matt Wolfe

Figma has taken a significant step forward in merging the realms of design and code through its integration with both Claude Code and OpenAI’s Codex desktop application. This innovative approach introduces an MCP server feature that enables a seamless bidirectional workflow between code and the design canvas.
With this integration, developers can initially work with code and then transition effortlessly to Figma’s canvas for visual exploration and refinement. This flexibility is reflected in the ability to convert rendered browser states directly into fully editable Figma layers, thus supporting a versatile, non-linear workflow.
The collaboration with Anthropic facilitates a process where Claude Code can transform production code into editable Figma designs. By utilizing a simple prompt, developers can export live web pages into Figma files, conduct design modifications collaboratively, and then synchronize these updates back into the codebase. The MCP server’s roundtrip capability ensures that context is preserved, allowing for smooth transitions between the coding environment and design space.
In conjunction with OpenAI’s Codex, Figma’s beta MCP server further enhances this flexibility. Developers have the option to derive design context—like layouts, styles, and components—from Figma files and utilize Codex for code generation. Conversely, they can capture running UIs and import them back into Figma using the <code>generate_figma_design</code> tool.
This groundbreaking workflow not only supports iterative design and development but also encourages side-by-side design comparisons, variation testing, and shared decision-making. It signifies a major shift from traditional linear design-then-code workflows to a more dynamic, multi-directional process that emphasizes using the right tool at each stage of product development.

Collections

Figma has introduced an MCP server integration that enables bidirectional workflows between design and code. Working with both Claude Code and OpenAI's Codex, developers can convert live browser states into editable Figma layers, export production code into Figma designs, and sync design changes back to the codebase. The roundtrip capability preserves context across transitions, supporting iterative, non-linear design-development workflows including variation testing and side-by-side comparisons.

Seamless Collaboration: Figma and Claude Code Integration for Modern Design Workflows