# figma

Connects design files to AI agents to read layout data, variables, and components. Turns selected frames into code and syncs your repository using Code Connect.

- plugin · `type=plugin` · Claude Code, GitHub Copilot · ★ 2113
- Author: figma
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/figma/mcp-server-guide
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/plugins/figma

## What it does

This plugin connects coding agents directly to the Figma MCP server at `https://mcp.figma.com/mcp`. It inspects layers, reads design tokens, and extracts auto layout rules straight into the editor. When paired with Code Connect, the agent reuses existing workspace components instead of writing fresh markup. It can also create placeholder graphics via `generate_image`, prompting for approval before using Figma AI credits.

Rate limits depend strictly on your Figma license. Users on the Starter plan or with View seats get only 6 read tool calls per month. That makes a Dev or Full seat on a paid tier necessary for everyday development. Modifying native canvas elements is free during the current beta, though Figma plans to meter it later.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

**Plugin marketplace**
In the agent chat (not a shell):
```text
/plugin install figma@claude-plugins-official
```
In the agent chat (not a shell):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
In the agent chat (not a shell):
```text
/plugin install figma-test@claude-community
```
In the agent chat (not a shell):
```text
/plugin marketplace add anthropics/claude-plugins-official
```

### GitHub Copilot

**Command from the source**
```bash
copilot plugin install figma@awesome-copilot
```

## When to use it
- generate front-end code from a selected canvas frame
- extract design tokens and theme variables into the IDE
- match existing codebase components with designs via Code Connect
- render missing image placeholders using AI credits

## Example prompts
- Turn the selected Figma frame into a front-end component
- Extract design tokens and typography variables from this file
- Check Code Connect mappings for our navigation bar

## Similar
- [example-skills](https://affpapa.org/en/nevibecode/plugins/example-skills.md) — plugin · ★ 183839
- [impeccable](https://affpapa.org/en/nevibecode/plugins/impeccable.md) — plugin · ★ 88212
- [hyperframes](https://affpapa.org/en/nevibecode/plugins/hyperframes.md) — plugin · ★ 72481
- [playground](https://affpapa.org/en/nevibecode/plugins/playground.md) — plugin · ★ 44635
- [frontend-design](https://affpapa.org/en/nevibecode/plugins/frontend-design.md) — plugin · ★ 44635
- [visual-explainer](https://affpapa.org/en/nevibecode/plugins/visual-explainer.md) — plugin · ★ 10630

## Other versions with the same name
- [figma · openai](https://affpapa.org/en/nevibecode/plugins/figma-figma.md) — ★ 7596

From the same set: [figma/mcp-server-guide](https://affpapa.org/en/nevibecode/by/figma/mcp-server-guide.md) — 5 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