---
title: "Guide to the Figma MCP Server"
aliases: [figma-mcp-overview, figma-mcp-server-guide]
tags: [figma, mcp, design-to-code, code-to-canvas, claude-code, integrations]
sources: [raw/Guide to the Figma MCP server.md]
created: 2026-05-15
updated: 2026-05-15
---

# Guide to the Figma MCP Server

High-level overview of Figma's MCP server — what it does, how to connect it, and what clients support which features.

## What It Does

The Figma MCP server bridges design and code in both directions:

- **Read designs → code** — extract variables, components, layout data, and generated code from Figma frames
- **Write code → canvas** — create/modify native Figma frames, components, auto layout, and variables via agent prompts
- **Live UI → Figma** — capture running browser UI (localhost, staging, production) as editable Figma layers
- **FigJam / Make access** — pull diagrams, flows, and prototype resources into your dev context
- **Code Connect consistency** — keep generated code aligned to your actual component library

## Two Server Variants

| Variant | How it runs | Key difference |
|---------|-------------|----------------|
| **Remote** (preferred) | Hosted at `https://mcp.figma.com/mcp` | Full feature set: write-to-canvas, code-to-canvas |
| **Desktop** | Via Figma desktop app, local URL | Subset of features; useful for orgs with strict network policies |

Write-to-canvas and code-to-canvas are **remote-only** features.

## Client Support Matrix

| Client | Desktop | Remote | Write to canvas | Code to canvas | Skills/Plugin |
|--------|---------|--------|-----------------|----------------|---------------|
| Claude Code | ✓ | ✓ | ✓ | ✓ | Figma plugin |
| Claude Desktop | ✓ | ✓ | ✓ | ✓ | Figma connector |
| Cursor | ✓ | ✓ | ✓ | ✓ | Figma plugin |
| VS Code | ✓ | ✓ | ✓ | ✓ | Figma plugin |
| Copilot CLI | ✓ | ✓ | ✓ | ✓ | Figma plugin |
| Gemini CLI | ✓ | ✓ | — | — | Extension |
| Codex (OpenAI) | ✓ | ✓ | ✓ | ✓ | Codex Skills |
| Android Studio | ✓ | ✓ | — | — | — |
| Amazon Q | ✓ | — | — | — | — |
| Replit | — | ✓ | — | — | — |

## Skills

Skills are agent-level instruction bundles layered on top of MCP tools. They tell the agent **which tools to call, in what order, and how to apply the results**.

Skills don't add new MCP capabilities — they package recommended workflows. Examples:

- Connect Figma components to code via Code Connect
- Generate design system rules aligned to your codebase
- Translate a selected frame into production-ready code

See [[wiki/claude-code/figma-mcp-skills|figma-mcp-skills]] for the full list of 8 Figma skills.

## Core Usage Patterns

### Get Design Context (link-based)
1. Select a layer in Figma Design
2. Copy the URL from the browser address bar
3. Paste into your MCP client prompt: *"Implement this design"*
4. The client extracts the node ID and calls `get_design_context`

### Send Live UI to Figma (remote only)
1. Prompt: *"Start a local server for my app and capture the UI in a new Figma file"*
2. Client opens browser window; use the capture toolbar to capture pages/states
3. Client creates a Figma file and returns the link

### Write to Canvas
Requires remote server + a Skills prompt. Agent builds/modifies frames using the design system as the source of truth. Currently free during beta; will become usage-based.

## Plans & Access

- **Remote server** — all seats and plans
- **Desktop server** — Dev or Full seat, all paid plans
- Write-to-canvas — free during beta period; will become usage-based

## Key Takeaways

- Remote server is **always preferred** — wider feature set, no desktop app dependency
- Write-to-canvas and code-to-canvas are **remote-only** — check client support matrix first
- Skills reduce guesswork by packaging multi-tool workflows into reusable instructions
- Design context is URL-based — paste a Figma layer URL and the node ID is auto-extracted
- Code Connect keeps generated code consistent with your actual component library

## Related

- [[wiki/claude-code/figma-mcp-setup|figma-mcp-setup]] — installation steps for Claude Code (remote vs desktop)
- [[wiki/claude-code/figma-mcp-skills|figma-mcp-skills]] — all 8 Figma MCP skills and when to use them
- [[wiki/claude-code/figma-mcp-code-connect|figma-mcp-code-connect]] — Code Connect integration details
- [[wiki/claude-code/figma-mcp-code-to-canvas|figma-mcp-code-to-canvas]] — code-to-canvas capture flow
- [[wiki/claude-code/figma-mcp-custom-rules|figma-mcp-custom-rules]] — project-level CLAUDE.md rules for Figma MCP
- [[wiki/claude-code/mcp-integration|mcp-integration]] — general MCP setup in Claude Code

## Sources

- raw/Guide to the Figma MCP server.md
- https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server
