# figma-implement-design

This skill turns Figma nodes into application UI code while preserving layout, tokens, assets, and visual details. Use it when building components or screens from Figma.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 6700 installs · ★ 28309
- Author: openai · official OpenAI repository
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openai/skills/tree/HEAD/skills/.curated/figma-implement-design/SKILL.md
- Updated: 2026-09-08
- HTML: https://affpapa.org/en/nevibecode/skills/openai-figma-implement-design

## What it does

The skill reads a selected Figma node, fetches its structured design context and screenshot, then maps the result to the project’s code conventions. It covers layout, spacing, typography, colors, component variants, assets, responsive constraints, and existing design-system components. The generated result is treated as design guidance, so project tokens and reusable components remain part of the implementation.

Its workflow extracts `fileKey` and `nodeId`, calls `get_design_context`, captures the reference with `get_screenshot`, downloads returned assets, and validates the finished UI against the design. Large responses can be narrowed with `get_metadata` and separate child-node requests. A connected Figma MCP server is required; remote use needs a URL such as `https://figma.com/design/:fileKey/:fileName?node-id=1-2`, while `figma-desktop` MCP can use the currently selected node.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/skills --skill figma-implement-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/figma-implement-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/figma-implement-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/skills --skill figma-implement-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/figma-implement-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/skills --skill figma-implement-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/figma-implement-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/skills figma-implement-design
```

2. **Manually: put the files in place**
- File: `.github/skills/figma-implement-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/skills --skill figma-implement-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/openai/skills --path skills/.curated/figma-implement-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/figma-implement-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add openai/skills --skill figma-implement-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/skills/tree/HEAD/skills/.curated/figma-implement-design/SKILL.md

## When to use it
- turn a Figma screen into project code
- build a component from a selected design node
- map Figma tokens to an existing design system
- compare implemented UI with a Figma screenshot
- reuse assets returned by the Figma MCP server

## Example prompts
- Implement the component from this Figma URL: `https://figma.com/design/:fileKey/:fileName?node-id=1-2`, using the conventions already present in the project.
- Build the selected Figma node and compare the result with its reference screenshot.
- Translate this design into the existing component library, reusing matching components and adding typed props.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

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