implement-from-figma — Codex command: what it does, how to install
Converts Figma components and frames directly into project code. It pulls design context, inspects layouts, and checks visual parity.
~/.codex/prompts/implement-from-figma.mdWhat implement-from-figma 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.
What it helps with
- 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 for the agent
- /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"
How to install implement-from-figma
Manually: put the files in place
~/.codex/prompts/implement-from-figma.mdCall it with /prompts:implement-from-figma. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.claude/commands/implement-from-figma.mdCall it with /implement-from-figma. For all projects use ~/.claude/commands/
Manually: put the files in place
.github/prompts/implement-from-figma.prompt.mdManually: put the files in place
.gemini/commands/implement-from-figma.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
Questions about implement-from-figma
How to install implement-from-figma in Codex?
Place the prompt configuration file into ~/.codex/prompts/implement-from-figma.md.
What does implement-from-figma do?
It extracts design context and assets from Figma via MCP tools, builds the UI component, and verifies parity against the design.
What parameters does the command support?
You can supply figma_url with a node ID, an optional target file hint, and a mode set to either component or screen.
