Skip to content
All tool news

Tool desk · Updated daily

Tool news·Figma·

Figma Launches Codex MCP Server for Bidirectional Design-to-Code Workflows.

Figma introduces Codex via MCP server, enabling teams to sync designs and code in both directions for faster prototyping and implementation.

CW

Create With tool desk

1 source checked · 3 min read · 3 sections

ShareLinkedIn
Figma Launches Codex MCP Server for Bidirectional Design-to-Code Workflows

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 checked

How 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.

Worth passing on?

ShareLinkedIn

Go deeper on Figma

Related reading, watching and going.

Everything on Figma →

The briefing

25 Aug 2026

Claude Code + Figma Console MCP: Side-by-Side Flow

How Claude Code + open-source Figma Console MCP creates a side-by-side design flow that draws straight into your Figma file—no credits or rate limits.

Read →

The briefing

21 Apr 2026

Claude Design vs Figma Make vs Google Stitch: AI Design Tested

We tested Claude Design against Figma Make and Google Stitch to see which AI design tool wins. Plus: Buildprint launches for Bubble, Lovable's security issue, and what's new in vibe coding.

Read →

The briefing

17 Mar 2026

Top Tips for Vibe Coding Real Apps with Lovable in 2026

Master Lovable's React and Tailwind approach to vibe coding. Learn strategic prompting, tech stack choices, and community tips for building real apps fast.

Read →
34 min

Podcast

My Daughter Built a Website Business, Claude Design First Look & Going All-In on Cloudflare

James and Kieran discuss practical AI-powered development through real-world examples, including a seven-year-old building a website business with Claude Code voice mode, Anthropic's new Claude Design tool, API security challenges in the AI agent era, and Cloudflare's expanding AI infrastructure offerings. The episode covers hands-on experiences with vibe coding, emerging design tools, and the evolving landscape of AI-assisted development.

Watch now ↗

Tutorial

From Figma design to native mobile app with @karlafernandes and @CreateWithHQ

This hands on session shows how to convert a Figma design into a native mobile app workflow using Bravo Studio with guidance from Karla Fernandes and Create With. Viewers learn the end to end steps from preparing Figma files to mapping components, testing on device, and preparing for release.

Watch now ↗

Latest tool news

What else changed this week.

All tool news

The Create With Briefing

Don't watch forty changelogs. Read one email.

Every Tuesday: the tool changes worth knowing, real business use cases, and what's on near you. Free, unsubscribe any time.