# figma

This skill wires Claude to the Figma MCP server: it pulls node context, a screenshot and assets, then turns the frame into code that matches your project.

- skill · `type=skill` · Claude Code · 858 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
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/figma

## What it does

The skill sets the order of operations. `get_design_context` runs first for the exact node, `get_metadata` follows if the response is too large, then `get_screenshot` gives a visual reference. Assets are downloaded only once both the context and the screenshot are in hand.

What comes back is React with Tailwind. The skill treats that as a description of design and behavior rather than final style: utility classes give way to your tokens and components, existing buttons, inputs and typography get reused, and routing plus state management stay as they are. When tokens and the mock disagree, the design system wins and spacing is nudged minimally.

The server is link-based. The client never opens the URL itself, it extracts the node ID, so the link has to point at the exact frame or variant you mean. Setup, environment variables and debugging live in `references/figma-mcp-config.md`; with no MCP server running there is nothing to fetch.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

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

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

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

### Codex

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

### Cursor

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates figma
```

2. **Manually: put the files in place**
- File: `.github/skills/figma/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
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/figma/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

## When to use it
- turn a Figma frame into a project component
- grab a node screenshot for visual comparison
- pull icons and images out of the mock without new packages
- work through an oversized server response via the node map
- check the finished UI against the design

## Example prompts
- build this screen from the Figma frame link
- take the node ID from the link and make a component with our tokens
- compare the finished page against the Figma screenshot

## Similar
- [figma-design-to-code](https://affpapa.org/en/nevibecode/skills/figma-design-to-code.md) — skill · 30 installs
- [figma-create-design-system-rules](https://affpapa.org/en/nevibecode/skills/figma-create-design-system-rules.md) — skill · 2900 installs
- [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
- [pp-figma](https://affpapa.org/en/nevibecode/skills/pp-figma.md) — skill · 726 installs
- [sync-figma-token](https://affpapa.org/en/nevibecode/skills/sync-figma-token.md) — skill · 676 installs

## Other versions with the same name
- [figma · heygen-com](https://affpapa.org/en/nevibecode/skills/heygen-com-figma.md) — 334000 installs

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