Codex Design vs Figma code layers.
Figma code layers and Codex Design aim at the same gap: seeing real, running UI on a canvas next to your designs. Figma brings code into Figma, where your team already designs. Codex Design brings a canvas into Codex, where your code is already written. Here is how they differ and when each is the better choice.
Updated November 7, 2026 · 6 min read
The short answer
If your team designs in Figma, code layers are the natural next step: they turn your frames into running prototypes on the same canvas, and teammates can comment on them. If you build with Codex, Codex Design keeps the design step next to the code, with no AI credits of its own and nothing to hand off.
- Choose Figma code layers if your designs and design system live in Figma, your team reviews work in Figma files, and you want interactive prototypes beside the static frames.
- Choose Codex Design if you already use Codex, want to compare several directions side by side before building, and want the result in your own codebase.
What each tool is
Figma code layers hold real, running code on the Figma canvas, so a design can become a live, interactive prototype next to the frames it came from. Figma announced them at Config in June 2026 and opened the beta on all plans on October 15, 2026. You can start one from selected frames, from a webpage captured with Figma’s Chrome extension, from a connected GitHub repository, from a coding tool through Figma’s MCP server, or from an empty layer and a prompt to Figma’s agent. They sit alongside Figma Specs, Markdown documents on the canvas that hold the context for a design.
Codex Design is our independent plugin for Codex. It adds a local canvas where Codex places the screens it designs as live HTML pages, next to mockup images and your references. Select an element to change its font, color, or spacing in a sidebar, or keep refining by asking Codex. Your canvas projects are stored on your computer.
Side by side
| Figma code layers | Codex Design | |
|---|---|---|
| What it makes | Running, interactive prototypes on the Figma canvas, from frames, a website, a repository, or a prompt | Website and app mockups as live HTML pages, plus mockup images |
| Where it runs | Inside Figma, on desktop, web, and mobile | Inside Codex, with the canvas on your computer (macOS and Linux) |
| Who does the AI | Figma’s agent, or a coding tool connected through Figma’s MCP server | Codex itself, with your Codex plan and model |
| Code | Can start from a connected GitHub repository; Figma’s announcement doesn’t describe exporting the code | HTML pages in a local project; Codex then builds the chosen design in your code |
| Pricing | Open beta; uses Figma AI credits, about 250+ to create a code layer from frames. Full seats get 500 to 4,250 credits a month by plan | Free for one canvas project; Pro is $5 a month for unlimited projects. Codex usage is separate |
| Best for | Teams that design and review in Figma | Codex users who want to compare and refine UI directions before they build |
Free code layer use on paid Figma plans ended on November 4, 2026; since then, code layer tasks use AI credits like Figma’s other agent features, and the credits don’t roll over. Starter plans and View seats have a daily limit of 150 credits, below the cost of creating one code layer from frames. Credit amounts are Figma’s own estimates, and complex tasks cost more. This comparison reflects both products’ official sites and docs as of November 7, 2026.
When to choose Figma code layers
- Your designs already live in Figma. Select frames and ask the agent to turn them into a code layer, without leaving the file.
- Your team reviews in Figma. Code layers sit on the same canvas as everything else, so comments, duplicates, and side-by-side versions work the way your team already works.
- You want to start from a real site or repository. Capture a live page with the Chrome extension, or clone a lightweight prototyping codebase from GitHub and build on it.
- You want specs next to the design. Figma Specs keep requirements and context on the canvas, and the agent can turn a Spec into a code layer.
When to choose Codex Design
- You already build with Codex. The canvas sits inside the agent that writes your code, so there is no handoff between design and build. Ask Codex to implement the direction you picked in your existing project.
- You want to explore before you commit. Codex Design is built for putting several directions side by side on one canvas and comparing them, next to your references and mockup images.
- You want to choose your own model. Codex Design uses whatever model your Codex is set to. See how GPT-6.1 Terra and Sol compare for UI design.
- You don’t want another credit system. Codex Design has no AI credits of its own. One canvas project is free and Pro is $5 a month; Codex usage counts against your Codex plan.
- You want your work on your own machine. Canvas projects are stored locally, not in a hosted file.
Frequently asked questions
Are Figma code layers free?
Not anymore on paid plans. They were free to create and edit through November 4, 2026; now they use Figma AI credits, about 250 or more to create a code layer from frames, from the same monthly pool as Figma Make and the Figma agent.
Can Codex work with Figma code layers?
Codex can connect to Figma’s MCP server, which lets coding tools read and write Specs and create code layers on the canvas. Codex Design takes the other route: it keeps the canvas inside Codex, so you don’t need a Figma file at all.
Is Codex Design a Figma code layers alternative?
For designing with real, running UI, yes, if you build with Codex. Both put live interfaces on a canvas. Figma code layers fit teams whose design work and reviews happen in Figma; Codex Design fits people who design and build in Codex and want the result in their own codebase.