Until recently, designing in Figma and writing code were two separate worlds. You design, explain to a developer, they translate - and something always gets lost along the way. OpenAI's Codex connects the two: point at a design, get code.
The most important thing before you start: Codex is a desktop app - not a website, not a plugin. Download, install, and work. Right now it's free for anyone with a ChatGPT account (including the free one), with a monthly usage quota. No payment needed to get started.
All three do similar things, but Codex is the most accessible starting point. A free ChatGPT account is enough - no credit card needed to try it. Claude Code requires a paid subscription from day one, Cursor limits quickly. With Codex you'll know whether it fits your workflow before spending a thing.
Step 1 - Download and install
Download for Mac
Click the button to download the .dmg file. Once downloaded - open it, drag Codex to the Applications folder, and launch.
Download for Windows
On Windows you download via the Microsoft Store. Click the button, the Store opens directly on the Codex page - click Get.
Signing in after installation
Launch Codex for the first time - a sign-in screen appears. Choose Sign in with ChatGPT and connect with your existing account. That's it. No API key needed, nothing else to configure.
The Codex interface - chat with the AI on the left, code and diff on the right
Step 2 - What MCP is and why it matters
MCP (Model Context Protocol) is an open standard that lets AI apps talk to external tools. Think of it like a USB connection - the AI app on one side, your tools on the other.
Figma released the Figma MCP Server, which lets Codex read your designs directly: layout, colors, components, variables - everything, without exporting anything manually. Read Figma's official guide ←
Step 3 - Connecting Figma to Codex
Via the Skills tab
In the top-right corner of Codex there's a Skills button. Click it, find Figma in the list, and click Install. An OAuth window opens - click "Allow access" and approve. Done.
Via Settings
Click the settings icon in the bottom-left corner - or Cmd+, on Mac. Go to MCP Servers. Figma appears in the recommended servers list - click Install and complete the authentication.
Either way, Figma connects through OAuth - approve once and Codex remembers the connection.
Step 4 - From Figma to code
Back to Figma. Select the frame or component you want to implement, right-click and choose Copy link to selection.
The link must point to the specific element - not the whole file. Right-click on the frame itself, not on the page. That's the most common mistake at the start.
Back to Codex, open a new conversation, and paste the link with an instruction - for example:
[Figma link]
Use the existing components in the project. Keep the exact colors and sizes.
Codex reads the design through the MCP, understands layout, colors, sizes - and writes code. There's also a detailed guide with all the specifics on OpenAI's site: Figma designs to code ←
Codex working on code - Windows version
Bonus - from code back to Figma
It works in reverse too. If you have a running interface you want to bring into Figma, Codex can capture it and create an editable frame directly on the canvas. Get there with a simple prompt: "create a Figma design from this interface". More about the partnership ←
Quick comparison
| Tool | Free trial | Figma connection | Desktop app |
|---|---|---|---|
| Codex | ✓ ChatGPT account is enough | ✓ Built-in MCP | ✓ |
| Claude Code | ✗ Paid from day 1 | ✓ MCP | ✓ |
| Cursor | Partial | ✓ Plugin | ✓ |
These tools aren't perfect yet - the code that comes out isn't always production-ready, and sometimes details need fixing. But the leap from "no code" to "a base to work from" happens in minutes. And in those minutes, the gap between design and development closes a little more.