# figma-implement-design

Turns a Figma node into code that fits your project: pulls the design context, a screenshot and assets over Figma MCP, then maps them onto your components and tokens.

- skill · `type=skill` · Claude Code · 689 installs
- Author: openai
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/figma-implement-design
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/figma-implement-design

## What it does

The skill lays out a fixed sequence. The agent reads the file key and node ID from a Figma link, or takes the selected layer in the desktop app, and calls `get_design_context` for auto layout, sizing, typography, colours and component structure. `get_screenshot` gives a picture to compare against later, and images or SVGs come straight from the MCP response.

What the server returns is treated as a spec, not as finished code. The default React and Tailwind output gets rewritten against the project's tokens and existing parts, so buttons and wrappers are reused rather than cloned. Large responses are handled by asking `get_metadata` first and then fetching the child nodes that matter.

None of this runs without a Figma MCP connection, and the skill includes a setup step for it: `codex mcp add figma --url https://mcp.figma.com/mcp`, enabling `rmcp_client` in `config.toml`, logging in with `codex mcp login figma` and restarting. That points at Codex tooling, even though the skill ships in a Claude catalogue. Picking a layer instead of pasting a URL only works with `figma-desktop`; the remote server needs a node link.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill creative-design/figma-implement-design
```

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

3. **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

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

### Cursor

**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 davila7/claude-code-templates figma-implement-design
```

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

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/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

### 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/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/figma-implement-design

## When to use it
- build a component from a Figma node link
- read spacing, type and colour values off a frame
- swap MCP Tailwind classes for the project's tokens
- check a finished screen against the Figma screenshot

## Example prompts
- Build the button from the design and reuse our existing components
- Compare the page with the node screenshot and fix the mismatches

## Similar
- [figma-create-design-system-rules](https://affpapa.org/en/nevibecode/skills/figma-create-design-system-rules.md) — skill · 2900 installs
- [implement-from-figma](https://affpapa.org/en/nevibecode/commands/implement-from-figma.md) — command · ★ 7604
- [figma-code-connect-components](https://affpapa.org/en/nevibecode/skills/figma-code-connect-components.md) — skill · 2700 installs
- [figma-build](https://affpapa.org/en/nevibecode/skills/figma-build.md) — skill · 1300 installs
- [qt-figma-token-extraction](https://affpapa.org/en/nevibecode/skills/qt-figma-token-extraction.md) — skill · 439 installs
- [qt-figma-component-generation](https://affpapa.org/en/nevibecode/skills/qt-figma-component-generation.md) — skill · 437 installs

## Other versions with the same name
- [figma-implement-design · openai](https://affpapa.org/en/nevibecode/skills/openai-figma-implement-design.md) — 6700 installs
- [figma-implement-design · nexu-io](https://affpapa.org/en/nevibecode/skills/nexu-io-figma-implement-design.md) — 2800 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 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