# implement-from-figma

Converts Figma components and frames directly into project code. It pulls design context, inspects layouts, and checks visual parity.

- command · `type=command` · 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/commands/implement-from-figma.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/commands/implement-from-figma

## What it does

The command inspects the target Figma link to extract the `node-id`. If no URL is provided, it attempts to use the active selection from the `figma-desktop` MCP server. It calls `get_design_context` and `get_screenshot` to retrieve layout data and reference images.

Assets are fetched directly via MCP. The tool avoids swapping real icons for generic placeholders or external icon libraries. Code is written following local project conventions and existing reusable components.

After generating code, local verification highlights any parity gaps. For broad UI overhauls spanning multiple files, the workflow escalates directly to `figma-implementation-agent`.

## Requirements
- Works with: Figma

## Install

### Codex (native platform)

**Manually: put the files in place**
- File: `~/.codex/prompts/implement-from-figma.md` — Call it with /prompts:implement-from-figma. Codex marks this format deprecated in favour of skills

### Claude Code

**Manually: put the files in place**
- File: `.claude/commands/implement-from-figma.md` — Call it with /implement-from-figma. For all projects use ~/.claude/commands/

### GitHub Copilot

**Manually: put the files in place**
- File: `.github/prompts/implement-from-figma.prompt.md`

### Gemini CLI

**Manually: put the files in place**
- File: `.gemini/commands/implement-from-figma.toml` — Gemini stores commands as TOML: the prompt text goes into the prompt field

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/commands/implement-from-figma.md

## When to use it
- turn Figma frames or components into project code
- retrieve production visual assets without placeholder replacements
- verify UI parity against layout screenshots
- pass multi-file front-end refactoring to figma-implementation-agent

## Example prompts
- /implement-from-figma <figma_url> target="src/components/Header.tsx" mode="component"
- Implement the screen from <figma_url> into the app using mode screen
- /implement-from-figma target="src/Button.tsx"

## Similar
- [figma-implement-design](https://affpapa.org/en/nevibecode/skills/openai-figma-implement-design.md) — skill · 6700 installs
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [figma-create-design-system-rules](https://affpapa.org/en/nevibecode/skills/figma-create-design-system-rules.md) — skill · 2900 installs
- [figma](https://affpapa.org/en/nevibecode/skills/figma.md) — skill · 858 installs
- [figma-integration](https://affpapa.org/en/nevibecode/skills/figma-integration.md) — skill · 718 installs
- [figma-build](https://affpapa.org/en/nevibecode/skills/figma-build.md) — skill · 1300 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 528 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