# figma-ui-mcp

A two-way MCP bridge for Figma: an AI client can draw UI on the canvas and read existing designs as structured data.

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

## What it does

figma-ui-mcp connects an MCP client to Figma Desktop through a local HTTP bridge at `localhost:38451`. The server queues operations, while the Figma plugin applies them to the open document. Design data can travel back as node trees, colors, typography details, or screenshots.

The server exposes `figma_write` for frames, shapes, text, and prototypes created with JavaScript. `figma_read` extracts design data, while `figma_status` checks the plugin connection and active sessions. `figma_docs` provides API help, and `figma_rules` builds a design-system rule sheet. Read operations also cover CSS, components, variants, and resolved variable values when those exist in the file.

Figma Desktop is required because the web app cannot let the plugin reach localhost. A Figma API key is not needed; communication stays on the local machine.

## Requirements
- Needs: Node.js (commands run via npx)
- Works with: Figma

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add figma-ui-mcp -- npx -y figma-ui-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add figma-ui-mcp -- npx -y figma-ui-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "figma-ui-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "figma-ui-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "figma-ui-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "figma-ui-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add figma-ui-mcp npx -y figma-ui-mcp
```

## When to use it
- draw an interface screen in Figma from a prompt
- inspect the structure of an existing design
- extract CSS and design tokens from a node
- check the plugin connection and active sessions

## Example prompts
- Use `figma_write` to draw a profile screen in Figma with frames, text, and buttons.
- Use `figma_read` to inspect the selected frame and return its node tree, colors, typography, and CSS.
- Use `figma_status` to check the Figma plugin connection and active sessions.

## 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
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [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
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

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