figma-implementation-agent — Codex subagent: setup and workflow
Converts Figma nodes into production code with visual parity. The agent checks design screenshots and swaps raw styling for project tokens.
.codex/agents/figma-implementation-agent.tomlWhat figma-implementation-agent does
This subagent turns selected Figma nodes into production code. It begins by fetching the design context and a fresh screenshot through the Figma MCP workflow. That visual check happens before writing any source files.
The workflow avoids dumping raw Tailwind classes into the repository. Instead, it inspects your existing components and swaps generated values for local design tokens. If technical constraints or accessibility rules force a difference, the agent lists those divergences clearly.
Without an active Figma MCP connection, the agent fails to fetch the necessary node screenshots and context data. Once finished, it structures its response into five parts: processed nodes, implementation steps, applied edits, parity checks, and verification tests.
What it helps with
- convert Figma design nodes into codebase components
- replace raw utility classes with local design tokens
- document accessibility compromises and styling discrepancies
- generate verification plans and parity checks for UI changes
Example prompts for the agent
- Implement node 102:44 from Figma using our shared button components
- Turn the navigation header from Figma into code and verify design parity
- Translate the modal node from Figma and list any accessibility trade-offs
How to install figma-implementation-agent
Manually: put the files in place
.codex/agents/figma-implementation-agent.tomlCodex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/
Manually: put the files in place
.claude/agents/figma-implementation-agent.mdFor all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention
Manually: put the files in place
.cursor/agents/figma-implementation-agent.mdCursor also reads .claude/agents/
Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean
Questions about figma-implementation-agent
How to install figma-implementation-agent in Codex?
Create the agent configuration file at .codex/agents/figma-implementation-agent.toml inside your repository.
What does figma-implementation-agent do?
It inspects design nodes and visual screenshots using Figma MCP, then writes code that matches the layout while reusing existing components and tokens.
Why does this agent require Figma MCP?
The subagent relies on get_design_context and get_screenshot calls to examine node data and visual appearance before generating any code.
