# figma-implementation-agent

Converts Figma nodes into production code with visual parity. The agent checks design screenshots and swaps raw styling for project tokens.

- subagent · `type=agent` · Codex, ChatGPT · ★ 7604
- Author: Figma · official OpenAI repository
- License: LicenseRef-Figma-Developer-Terms · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/figma/agents/figma-implementation-agent.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/agents/figma-implementation-agent

## What it 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.

## Requirements
- Works with: Figma

## Install

### Codex (native platform)

**Manually: put the files in place**
- File: `.codex/agents/figma-implementation-agent.toml` — Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

### Claude Code

**Manually: put the files in place**
- File: `.claude/agents/figma-implementation-agent.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

### Cursor

**Manually: put the files in place**
- File: `.cursor/agents/figma-implementation-agent.md` — Cursor also reads .claude/agents/

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/figma/agents/figma-implementation-agent.md

## When to use it
- 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
- 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

## Similar
- [ui-ux-designer](https://affpapa.org/en/nevibecode/agents/ui-ux-designer.md) — subagent · 27069 installs
- [ui-designer](https://affpapa.org/en/nevibecode/agents/voltagent-community-ui-designer.md) — subagent · 1979 installs
- [ui-designer](https://affpapa.org/en/nevibecode/agents/ui-designer.md) — subagent · 1979 installs
- [mobile-app-developer](https://affpapa.org/en/nevibecode/agents/mobile-app-developer.md) — subagent · 1552 installs
- [ux-researcher](https://affpapa.org/en/nevibecode/agents/ux-researcher.md) — subagent · 703 installs
- [accessibility-tester](https://affpapa.org/en/nevibecode/agents/accessibility-tester.md) — subagent · 346 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 596 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md