Figma MCP Server

## Overview

The official Figma MCP Server (1.4k+ stars) brings Figma directly into your AI coding workflow. It provides structured design data — components, variables, layout, and assets — to AI agents generating code from Figma design files.

Available as a **remote Streamable HTTP** server at `https://mcp.figma.com/mcp` — no local installation needed.

## Key Features

- **Generate code from selected frames** — select a Figma frame, paste the link in your IDE, and get code
- **Extract design context** — pull variables, components, and layout data into your IDE
- **Write to the canvas** (beta) — create and modify native Figma content directly from your MCP client
- **Code Connect** — reuse your actual codebase components for consistent code generation
- **Generate Figma designs from web pages** (rolling out) — capture and convert web pages into Figma designs

## Core Tools

| Tool | Purpose |
|---|---|
| `get_design_context` | Structured React + Tailwind representation of a Figma selection |
| `get_variable_defs` | Extract variables and styles (color, spacing, typography tokens) |
| `get_screenshot` | Visual reference of the node variant being implemented |
| `get_metadata` | High-level node map for large selections |
| `use_figma` | Write operations — create/modify content on the canvas |
| `search_design_system` | Search components, variables, and text styles |
| `generate_figma_design` | Create Figma designs from code or web pages |

## Installation

### VS Code

1. `⌘ Shift P` → `MCP: Add Server`
2. Select `HTTP`
3. Paste `https://mcp.figma.com/mcp`
4. Server ID: `figma`

Or add to `.vscode/mcp.json`:

```json
{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

### Cursor

In agent chat: `/add-plugin figma`

### Claude Code

```bash
claude plugin install figma@claude-plugins-official
```

### Other editors

Any editor supporting Streamable HTTP:

```json
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

## Best Practices

### Structure your Figma file

- Use **components** for anything reused (buttons, cards, inputs)
- Link components to your codebase via **Code Connect**
- Use **variables** for spacing, color, radius, and typography
- Name layers semantically (`CardContainer`, not `Group 5`)
- Use **Auto layout** to communicate responsive intent
- Add **annotations** and **dev resources** for behavior that's hard to capture visually

### Write effective prompts

- Specify your framework: "Generate iOS SwiftUI code from this frame"
- Specify your design system: "Use Chakra UI for this layout"
- Specify file paths: "Add this to `src/components/ui/PricingCard.tsx`"
- Specify layout systems: "Use our `Stack` layout component"

### Recommended agent rules

```markdown
## Figma MCP Integration Rules

### Required flow (do not skip)
1. Run get_design_context first for the exact node(s)
2. If truncated, run get_metadata then re-fetch specific nodes
3. Run get_screenshot for visual reference
4. Download any assets needed, then implement
5. Translate output into project conventions and tokens
6. Validate against Figma for 1:1 visual parity

### Asset rules
- If the server returns a localhost source for an image/SVG, use it directly
- Do NOT import new icon packages — all assets come from the Figma payload
- Do NOT create placeholders if a localhost source is provided
```

### Break down large selections

Large selections cause errors or incomplete responses. Generate code for smaller sections (Card, Header, Sidebar) and compose them.

## Rate Limits

- Starter plan / View seats: up to 6 tool calls per month
- Dev or Full seat on paid plans: per-minute limits matching Figma REST API Tier 1
- Write operations (`use_figma`) are exempt from rate limits during beta

## Community Agent Skills

The Figma community maintains open-source agent skills at [figma/community-resources](https://github.com/figma/community-resources). Categories include:

- **Components**: `design-react-api` (propose React API from Figma components), `reconstruct-component-figma` (rebuild as Atomic Design system)
- **Design Systems**: `ds-init-figma` (create complete design system on canvas), `ds-compliance-audit` (audit for token/component compliance)
- **Design Generation**: `bridge-ds` (generate designs bound to your design system)
- **Accessibility**: `apca-compliance-figma` (APCA contrast compliance audit)
- **Design Process**: `screens-to-ia` (generate information architecture from screens)