# Figma MCP Server

Connects Figma design context, variables, and components directly to AI coding agents to generate code and update canvas elements.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 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/mcp/figma-mcp-server

## What it does

The server runs remotely at `https://mcp.figma.com/mcp` over HTTP. It supplies coding assistants with design context from selected frames, including layer trees, variables, and auto layout properties. Through Code Connect, agents map Figma elements directly to real components in your codebase.

Canvas writes work on the remote server. During beta, creating native frames, components, and variables remains free of charge. When images are missing, the agent can call `generate_image` to add placeholders after confirming Figma AI credit usage.

Accounts on the Starter plan or with View seats hit a hard cap of 6 read tool calls per month. Without a Dev or Full seat, active coding against designs will stall almost immediately.

## Requirements
- Remote server: `https://mcp.figma.com/mcp`
- Works with: Figma

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http mcp https://mcp.figma.com/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add figma-mcp-server --url https://mcp.figma.com/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "figma-mcp-server": {
            "url": "https://mcp.figma.com/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "figma-mcp-server": {
            "type": "http",
            "url": "https://mcp.figma.com/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http figma-mcp-server https://mcp.figma.com/mcp
```

## When to use it
- extract variables, components, and auto layout settings from selected frames
- generate frontend code reusing existing codebase components via Code Connect
- create and update native frames, components, and variables on the Figma canvas
- generate placeholder images in Figma designs with `generate_image`

## Example prompts
- Inspect the selected login frame in Figma and implement it in React.
- Connect our existing button component to the Figma design using Code Connect.
- Build a product card frame on the Figma canvas with auto layout.

## Similar
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Appllama](https://affpapa.org/en/nevibecode/mcp/appllama.md) — MCP server · ★ 3046
- [TypeUI](https://affpapa.org/en/nevibecode/mcp/typeui.md) — MCP server · ★ 2159
- [Arc UI](https://affpapa.org/en/nevibecode/mcp/arc-ui.md) — MCP server · ★ 968

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