Figma to Code skill for Codex

A faithful implementation matches the frame at its design width within a few pixels, uses the project’s existing components and tokens instead of pasted values, behaves sensibly at other widths, and covers the states the design implies. Generated code that looks right but hard-codes #3B82F6 and padding: 23px is a screenshot, not a build.

Setup: getting design data into Codex

Pick the first that works:

Source	How	Notes
Figma remote MCP server	Add to ~/.codex/config.toml, then codex mcp login figma	Needs network and OAuth in a browser
Figma desktop MCP server	Enable it in the desktop app’s Dev Mode, point Codex at http://127.0.0.1:3845/mcp	Desktop app must be open; selection-based
REST API	curl with a personal access token from an env var	Read-only; no design context generation
Screenshot or export only	User attaches PNGs and specs	Measure from the image; ask for key values

# ~/.codex/config.toml
[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"

Check with /mcp in the Codex TUI. The MCP server is network access; in a sandbox with network off, ask the user to approve or to provide exports.

REST fallback (token stays in the environment, never in files or chat):

# node-id in the URL is 12-345; the API uses 12:345
curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=12:345" > .figma/node.json
curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
  "https://api.figma.com/v1/images/$FILE_KEY?ids=12:345&format=png&scale=2"   # returns a URL to download

Before writing code

• Read AGENTS.md, the component directory, the token/theme files and one similar existing screen. Your output must look like it was written by the same team.
• Get the exact frame: a link with node-id, not the whole file. Large frames overflow context; fetch the page outline with get_metadata, then request child frames one at a time.
• Collect from MCP for each target node:
  • get_screenshot: the visual truth to compare against.
  • get_design_context: structure, styles and a reference implementation (React + Tailwind by default). Treat it as a spec, not as code to paste.
  • get_variable_defs: the Figma variables and styles used, with values.
  • get_code_connect_map when Code Connect is set up: which code component each Figma component maps to.

Workflow

- [ ] 1. Fetch screenshot, design context and variables for the frame
- [ ] 2. Map Figma variables and styles to project tokens (table)
- [ ] 3. Map Figma components to existing code components (table)
- [ ] 4. Decompose the frame into sections and new components
- [ ] 5. Implement layout (Auto Layout -> flex/grid), then content, then states
- [ ] 6. Export and optimize assets
- [ ] 7. Compare screenshots at design width; fix deltas
- [ ] 8. Check other widths and states; report gaps

2. Token mapping

Build a table before coding. Every Figma value lands on a token or gets flagged:

Figma	Value	Project token	Status
color/bg/brand	#1D5FD6	--color-bg-action-default	match
spacing/lg	24	space-6 (24px)	match
raw fill	#1E60D5	--color-bg-action-default	near-duplicate, use token
raw padding	23	space-6	off-scale, snap to 24
Heading/H2	Inter 600 28/36	text-2xl font-semibold	size match, check leading

Snap off-scale values (1–2 px away) to the nearest token and say so in the report. Values far from any token mean a missing token; ask before adding one.

3. Component mapping

Figma component	Variant props	Code component
Button	Type=Primary, Size=M, State=Hover	<Button variant="primary" size="md"> (hover is CSS)
Input/With label	Error=True	<TextField invalid errorMessage=...>
Card/Pricing	none	new: PricingCard (compose Card)

Never rebuild an existing component because the Figma layer names differ. Hover, pressed and focus variants in Figma are CSS states, not props.

5. Auto Layout to CSS

Figma	CSS
Horizontal / Vertical	display:flex; flex-direction: row / column
Gap between items	gap
Spacing mode “Auto”	justify-content: space-between
Padding	padding (per side)
Hug contents	width: fit-content or default auto sizing; flex: none in a flex parent
Fill container (main axis)	flex: 1 1 0; min-width: 0
Fill container (cross axis)	align-self: stretch
Fixed width	width only for icons, avatars, controls; otherwise max-width
Wrap	flex-wrap: wrap plus row-gap from counter-axis spacing
Grid auto layout	display:grid; grid-template-columns
Absolute position child	position:absolute inside a position:relative parent
Min/max width	min-width / max-width
Clip content	overflow: hidden

Text conversions:

• Line height in % or px: use unitless ratio (36/28 = 1.286, round to the token). “Auto” means normal.
• Letter spacing in %: divide by 100 and use em (-2% -> -0.02em).
• Text box “fixed height” usually means the designer dragged it; let text flow.
• Text styles map to type tokens; mixed styles in one text layer map to inline elements.

Stroke conversions: inside stroke -> border with box-sizing: border-box; outside -> outline or box-shadow: 0 0 0 1px; center -> pick inside and note the 0.5 px shift. Drop shadows map directly to box-shadow (x, y, blur, spread, color); layer blur maps to filter: blur(), background blur to backdrop-filter: blur().

6. Assets

• Icons: use the project’s icon library if the Figma icon matches by name; otherwise export SVG, run SVGO, and add to the icon set (see icon-systems).
• Images: export at 2x, convert to AVIF/WebP, set width/height to prevent layout shift. Do not ship Figma’s placeholder images as final assets.
• MCP may serve assets from a localhost URL; download them into the repo, never ship references to that URL.

7. Compare

Render at the frame’s width, then compare against the Figma screenshot:

npx playwright screenshot --viewport-size "1440,900" --full-page http://localhost:5173/pricing .shots/pricing-impl.png

Open both images (Codex can view local images) and check, in order: overall structure and section heights, alignment edges, type size and leading, spacing between groups, colors, radii and shadows, icon sizes. For a numeric check, overlay with 50% opacity in the browser or use Playwright’s toHaveScreenshot against an exported reference with a small maxDiffPixelRatio; font rendering differences make exact matches impossible.

8. Beyond the frame

• Designs usually show one width. Derive behavior at 360, 768 and 1280+: what stacks, what wraps, what truncates. If the file has mobile frames, implement those too.
• Implied states: hover, focus-visible, disabled, loading, empty, error, long text.
• If the design breaks accessibility (contrast under 4.5:1, tiny tap targets), implement the accessible version and list the deviation.

Gotchas

• Pasting get_design_context output wholesale: it uses absolute values and generic markup. Rewrite with project components and tokens.
• Requesting a whole page at once: output truncates and quality drops. Go frame by frame.
• Figma fonts not installed in the project: confirm the web font and license; never silently substitute a different family.
• Hidden layers and detached instances in the file produce phantom elements.
• Design width 1440 with a 1200 container: implement the container, not 1440 fixed.
• Desktop MCP server tools act on the current selection; ask the user to select the frame or pass the node-id link.

Output contract

**Frame:** <file name / node-id>  **Route/component:** <path>
**Token mapping:** <n> matched, <n> snapped (list), <n> missing (asked/added)
**Components reused:** Button, TextField, Card. **New:** PricingCard (src/...)
**Assets:** <icons/images added and where>
**Fidelity check:** compared at 1440 px; remaining deltas: <font rendering, ...>
**Responsive behavior chosen:** <what stacks at which width>
**Deviations from design:** <with reasons, e.g. contrast fix>