# Figma-Context-MCP

MCP server that feeds layout data and styles from Figma to your coding assistant. Turn design links into code without pasting screenshots.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 16062
- Author: GLips
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/GLips/Figma-Context-MCP
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/figma-context-mcp

## What it does

This server runs the `figma-developer-mcp` package via `npx` to connect your coding assistant to the Figma API. Instead of sending raw JSON node trees, it strips redundant properties and forwards clean layout and style data. The model context stays focused.

You paste a link to a frame or group into the agent chat. The assistant fetches node attributes through the MCP connection and writes UI code in your target framework.

Without a valid `FIGMA_API_KEY`, the server cannot retrieve documents. Generate a personal access token in Figma before adding the server to your editor config.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `FIGMA_API_KEY` — keys and tokens: ask the human for the values, never commit them or put them in shared files.
- Works with: Figma

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add figma-context-mcp -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcp
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add figma-context-mcp --env FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcp
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "figma-context-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp"
            ],
            "env": {
                "FIGMA_API_KEY": "<FIGMA_API_KEY>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "figma-context-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp"
            ],
            "env": {
                "FIGMA_API_KEY": "<FIGMA_API_KEY>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e FIGMA_API_KEY=<FIGMA_API_KEY> figma-context-mcp npx -y figma-developer-mcp
```
Replace <…> with your own values

## When to use it
- implement UI components directly from Figma links
- extract layout dimensions and styling without manual inspection
- generate frontend code from a specific frame or group

## Example prompts
- Build a responsive React header using the design at this Figma link
- Read the styling and padding from this Figma frame link to update our CSS
- Generate a login form component based on this Figma group

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091

---
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