codexplugin

Guide / figma to code codex

Figma to code with Codex

Install the Figma plugin, add implement-design skills, and verify with a frame-to-UI prompt.

00 — Intro

Design-to-code with Codex works best when design context and implementation rules travel together. The official Figma codex plugin brings frames and specs into the agent. Skills like figma-implement-design encode the 1:1 fidelity workflow so Codex does not improvise spacing and typography.

You do not need every Figma-related skill on day one. Start with the plugin plus implement-design, then add design-system rules or a general frontend playbook when the repo already has tokens and components.

01 — Shortlist

  1. 01
    FigmaPlugin

    Official design-to-code workflows powered by the Figma integration

  2. 02
    Figma Implement DesignSkill

    Translate Figma designs into production code with 1:1 visual fidelity

  3. 03
    Frontend DesignSkill

    Production-grade frontend playbook for hierarchy, spacing, and polish

  4. 04
    Figma Design System RulesSkill

    Author AGENTS.md rules for implementing against your Figma design system

  5. 05
    Figma Code ConnectSkill

    Map Figma components to codebase components with Code Connect

02 — Recommended order

  1. 01

    Install the Figma plugin and authorize access to your files.

  2. 02

    Point Codex at a frame URL (or desktop selection if you use figma-desktop MCP).

  3. 03

    Install figma-implement-design for the structured implement workflow.

  4. 04

    Optionally add frontend-design or design-system rules for repo conventions.

  5. 05

    Verify by asking Codex to implement one component and compare it to the screenshot.

03 — Install & verify

Copy a command, run it, restart Codex, then try the verify prompt.

FigmaPlugindesign

Required base layer. Without it, Codex lacks reliable frame context for implementation.

$ npx codex-marketplace add openai/plugins/plugins/figma --plugin

Verify

“Pull design specs from the selected Figma frame”

Full detail page
Figma Implement DesignSkilldesign

Primary skill when the deliverable is code in your repo. Follow get_design_context → screenshot → implement → validate.

$ npx codex-marketplace add openai/skills/skills/.curated/figma-implement-design --skill

Verify

“Implement this Figma frame with pixel-accurate spacing and typography”

Full detail page
Frontend DesignSkilldesign

Add when the frame is sparse or you need broader UI judgment beyond strict Figma translation.

$ npx codex-marketplace add am-will/codex-skills/skills/frontend-design --skill

Verify

“Build this screen to match the Figma layout with clean spacing”

Full detail page
Figma Design System RulesSkilldesign

Useful for teams that want repeatable agent rules mapped to published components and tokens.

$ npx codex-marketplace add openai/skills/skills/.curated/figma-create-design-system-rules --skill

Verify

“Draft design-system rules for this Figma library so future implementations stay consistent”

Full detail page
Figma Code ConnectSkilldesign

Use when you already have a component library and want stable design-to-code links.

$ npx codex-marketplace add openai/skills/skills/.curated/figma-code-connect-components --skill

Verify

“Propose Code Connect mappings for the primary button and input components”

Full detail page

04 — FAQ

Can Codex edit the Figma file itself?

Most day-to-day flows pull specs into code. Canvas write paths exist in related Figma skills — check the plugin and skill READMEs for create/edit capabilities on your plan.

What if the UI still looks off after implement?

Ask Codex to list gaps versus the frame screenshot (spacing, type scale, states), then fix one section at a time. Re-fetch design context if the node is large or truncated.

Is there a shorter setup checklist?

Yes — the Design → code use-case guide covers the minimum install path. This page is the fuller Figma shortlist.

Figma → code setup guideAll guidesSearch catalog