
Figma has launched Codex, a new integration built on the Model Context Protocol (MCP) server architecture that enables roundtrip workflows between its design canvas and code. The update, announced on LinkedIn and demonstrated live with OpenAI, allows teams to move information bidirectionally: bringing code changes into the design environment and reflecting canvas edits back to the codebase.
The move positions Figma to bridge the gap between design and implementation more tightly than ever. Rather than exporting static assets or one-way code snippets, Codex treats the design file and the code as a single source of truth that can be edited from either side.
What Codex Actually Does
Codex uses Figma's MCP server to create a live connection between design files and codebases. Developers can make changes in their editor, and those updates propagate back to the Figma canvas. Conversely, designers can adjust components or layouts in Figma, and Codex syncs those changes to the code.
This bidirectional sync addresses a common pain point: the drift that happens when designers iterate in Figma while developers work in parallel. Instead of repeatedly exporting assets, reconciling differences, or manually updating both environments, teams can work from a shared state.
Figma has been expanding its code integration capabilities over the past year. The company recently launched Slots in open beta to eliminate the need for detaching components, and added support for multiple code files per component in Code Connect. Codex builds on that foundation by enabling real-time, two-way communication.
MCP Server and AI Code Editors
The integration runs on the Model Context Protocol, an open standard that allows AI tools and design platforms to share context. Figma has been steadily expanding MCP support across AI code editors. Last month, the company added compatibility with five new AI editors, including Cursor, Windsurf, and others.
By building Codex on MCP, Figma enables developers to use their preferred AI-powered editors while maintaining a live link to the design system. That means a developer working in Claude or Replit can reference the latest design tokens, components, and layouts without switching tools.
The live session with OpenAI hints at deeper AI integration. Tools like Lovable, Bolt, and v0 have already made AI-driven front-end generation mainstream. Codex could let those workflows stay in sync with Figma rather than diverging into separate codebases.
Implications for Design and Development Teams
Codex changes how teams collaborate. Designers can prototype directly in Figma, knowing their work will translate cleanly to code. Developers can refactor components or adjust responsive breakpoints without worrying about losing design intent. The roundtrip workflow reduces handoff friction and keeps everyone working from the same source.
This approach also has implications for design systems. As we previously covered, AI tools are increasingly generating production-ready interfaces from design prompts. Codex could make those workflows more maintainable by ensuring generated code stays tied to the design system rather than becoming a one-off export.
For teams using Webflow, Framer, or other visual builders, Codex introduces a new model: code and design as a unified, editable layer. Whether this becomes a standard workflow or remains a niche tool for advanced teams will depend on how reliably the sync works in practice and how well it handles complex components, variants, and design tokens.
Figma has not yet published detailed documentation or pricing for Codex. The LinkedIn post promoted a live demo, but the feature's availability, supported editors, and integration requirements remain unclear. Teams interested in testing the integration should monitor Figma's official blog for updates.
Sources
1 checkedHow we cover tool news: Create With's tool desk drafts these reports with AI from the sources listed above and checks them against those sources before publishing.







