Figma Ui MCP

Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "figma-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-ui-mcp"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

figma-ui-mcp

Claude Code to Figma · Antigravity to Figma · Cursor to Figma · Any MCP IDE to Figma

_{✅ Tested: Claude Code, Antigravity | 🔧 Compatible: Cursor, VS Code, Windsurf, Zed (any MCP stdio client)}

Bidirectional Figma MCP bridge — let AI assistants (Claude Code, Cursor, Windsurf, Antigravity, VS Code Copilot, or any MCP-compatible IDE) draw UI directly on Figma canvas and read existing designs back as structured data, screenshots, or code-ready tokens. No Figma API key needed — works entirely over localhost.

Requires Figma Desktop — the plugin communicates with the MCP server over localhost HTTP polling. Figma's web app does not allow localhost network access, so Figma Desktop is required.

Code

Claude ──figma_write──▶ MCP Server ──HTTP (localhost:38451)──▶ Figma Plugin ──▶ Figma Document
Claude ◀─figma_read──── MCP Server ◀──HTTP (localhost:38451)── Figma Plugin ◀── Figma Document

How the localhost bridge works

The MCP server starts a small HTTP server bound to localhost:38451. The Figma plugin (running inside Figma Desktop) uses long polling — the server holds requests up to 8s until work arrives, flushing immediately when new ops are queued (near-realtime latency <100ms). All traffic stays on your machine — nothing is sent to any external server.

Multi-instance support (v2.3.0+): Multiple Figma files/tabs can connect simultaneously. Each plugin instance sends a sessionId, and the bridge routes operations to the correct session. Use the optional sessionId param in figma_write/figma_read to target a specific file.

Features

Direction	Tool	What it does
Write	`figma_write`	Draw frames, shapes, text, prototypes via JS code
Read	`figma_read`	Extract node trees, colors, typography, screenshots
Info	`figma_status`	Check plugin connection + active sessions
Docs	`figma_docs`	Get full API reference + examples
Rules	`figma_rules`	Generate design system rule sheet — tokens, typography, components

What's new in v2.5

Feature	Description
`get_design_context`	AI-optimized payload for a node — flex layout, token-resolved colors (`var(--name)`), typography with style names, component instances with variant properties. Best single call for design→React/Vue/Swift code.
`get_component_map`	List every component instance in a frame with `componentSetName`, `variantLabel`, properties, and `suggestedImport` path. Scaffold import statements in one call.
`get_unmapped_components`	Find component instances that have no description in Figma (no code mapping yet). Prompts AI to ask user for correct import paths.
`figma_rules` tool	New top-level MCP tool — aggregates color tokens, typography styles, variables (all modes), and component catalog into a single markdown rule sheet. Equivalent to official Figma MCP's `create_design_system_rules`. Call once at session start.
`get_css` operation	`figma_read get_css { nodeId }` → ready-to-use CSS string (flex, typography, fill, border, shadow, opacity, transform). One call, paste into code.
Resolved variables	`get_node_detail` now resolves `boundVariables` IDs → `{ name, resolvedType, value }`. No more manual ID lookup.
Resolved style refs	`fillStyleId` / `textStyleId` now include `fillStyle: { name, hex }` and `textStyle: { name, fontSize, fontFamily }`.
Instance overrides detail	`overrides: [{ id, overriddenFields: ["fills","characters",...] }]` — full diff vs mainComponent, not just count.
`componentSetName` + `variantLabel`	INSTANCE nodes now expose set name (`"Button"`) and variant label (`"State=Primary, Size=Large"`) separately.
`insertIndex` for create	`figma.create({ ..., insertIndex: 2 })` — insert node at exact position in parent, not always at end.
Typography tokens	`setupDesignTokens({ fontSizes, fonts, textStyles })` — 1 call bootstrap full typography system with variable-bound text styles. Multi-mode (Compact/Comfortable/Large) supported.
`applyTextStyle`	Apply a local text style to a TEXT node by name in 1 call — auto-loads font.
STRING variables for fonts	`applyVariable` now binds `fontFamily`, `fontStyle`, `characters` (swap Inter → SF Pro via 1 variable).
Effects	`effects: [{ type: "DROP_SHADOW" \| "INNER_SHADOW" \| "LAYER_BLUR" \| "BACKGROUND_BLUR", ... }]` on any node.
Gradient fills	`fill: { type: "LINEAR_GRADIENT" \| "RADIAL_GRADIENT", angle, stops }` in create/modify.
Individual corner radii	`topLeftRadius`, `topRightRadius`, `bottomLeftRadius`, `bottomRightRadius` on FRAME/RECT.
8-digit hex + rgba alpha	`fill: "#FFFFFF80"` or `"rgba(255,255,255,0.5)"` — alpha auto-applied to paint opacity.
SVG arc (A) + commas	VECTOR `d` paths accept `A` arc command (auto-converted to cubic Bézier) and commas.
Icon libraries	7 free open-source libraries, iOS-filled first: Ionicons → Fluent → Bootstrap → Phosphor → Tabler Filled → Tabler Outline → Lucide.
Instance overrides	`figma.instantiate({ overrides: { "LayerName": { text, fill, fontSize } } })` — override props per-layer.
Batch delete	`figma.delete({ ids: [...] })` — delete multiple nodes in 1 round-trip.
Prototyping	`setReactions` — click/hover/press → navigate/overlay/swap with Smart Animate.
Scroll behavior	`setScrollBehavior` — HORIZONTAL / VERTICAL / BOTH overflow.
Variants & instance swap	`setComponentProperties` / `swapComponent` — variants + instance swap.
Component property definitions (v2.5.24)	`addComponentProperty` + `bindComponentProperty` — create TEXT / BOOLEAN / INSTANCE_SWAP properties on master components. Instance text overrides now actually re-measure auto-layout (button grows to fit longer label).
Multi-instance	Multiple Figma tabs connect simultaneously via sessions.

Full version history: see CHANGELOG.md.

Quick Start

Step 1 — Add the MCP server to your AI client

Choose your platform:

Claude Code (CLI)

bash

# Project scope (default)
claude mcp add figma-ui-mcp -- npx figma-ui-mcp

# Global scope (all projects)
claude mcp add --scope user figma-ui-mcp -- npx figma-ui-mcp

Claude Desktop

Edit config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Cursor

Edit .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):

config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

VS Code / GitHub Copilot

Edit .vscode/mcp.json (project) or add to settings.json (global):

config.json

{
  "mcp": {
    "servers": {
      "figma": {
        "command": "npx",
        "args": ["-y", "figma-ui-mcp"]
      }
    }
  }
}

Windsurf

Edit ~/.codeium/windsurf/mcp_config.json:

config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Antigravity (Google)

Open "..." dropdown at the top of the agent panel
Click "Manage MCP Servers" → "View raw config"
Add to mcp_config.json:

config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

From source (any client)

bash

git clone https://github.com/TranHoaiHung/figma-ui-mcp
cd figma-ui-mcp
npm install
# Then point your MCP client to: node /path/to/figma-ui-mcp/server/index.js

⚠️ IMPORTANT: After adding the MCP server, you MUST restart your IDE / AI client (quit and reopen). The MCP server only loads on startup — simply saving the config file is not enough. This applies to Claude Code, Cursor, VS Code, Windsurf, and Antigravity.

Step 2 — Install the Figma plugin

⬇ Download plugin.zip — no git clone needed

Read the full README →View source on GitHub →

Related MCP Servers

View all in Multimedia Process View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

243

Stargazers on the source repository.

Last commit

3d ago

Most recent push to the default branch.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Figma Ui MCP

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "figma-ui-mcp": { "command": "npx", "args": ["-y","figma-ui-mcp"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/figma-ui-mcp?style=directory)](https://allmcps.com/mcp/figma-ui-mcp)

HTML Embed

<a href="https://allmcps.com/mcp/figma-ui-mcp"><img src="https://allmcps.com/api/badge/figma-ui-mcp?style=directory" alt="Figma Ui MCP on AllMCPs" /></a>

Technical Specs & Signals

CategoryMultimedia Process

4/8 checks healthy over the last 45d

45Quality signal: Fair · 45/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools15/30

Adoption & activity9/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 6d ago via OSV.dev · figma-ui-mcp (npm)

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 🎥 Multimedia Process →Best MCP servers for Multimedia & Media Processing →Best Figma MCP servers →Alternatives to Figma Ui MCP →Install in Claude Desktop Install in Cursor Install in VS Code Setup guides for all 13 MCP clients

Figma Ui MCP

Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "figma-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-ui-mcp"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

figma-ui-mcp

Claude Code to Figma · Antigravity to Figma · Cursor to Figma · Any MCP IDE to Figma

_{✅ Tested: Claude Code, Antigravity | 🔧 Compatible: Cursor, VS Code, Windsurf, Zed (any MCP stdio client)}

Requires Figma Desktop — the plugin communicates with the MCP server over localhost HTTP polling. Figma's web app does not allow localhost network access, so Figma Desktop is required.

Code

Claude ──figma_write──▶ MCP Server ──HTTP (localhost:38451)──▶ Figma Plugin ──▶ Figma Document
Claude ◀─figma_read──── MCP Server ◀──HTTP (localhost:38451)── Figma Plugin ◀── Figma Document

How the localhost bridge works

Features

Direction	Tool	What it does
Write	`figma_write`	Draw frames, shapes, text, prototypes via JS code
Read	`figma_read`	Extract node trees, colors, typography, screenshots
Info	`figma_status`	Check plugin connection + active sessions
Docs	`figma_docs`	Get full API reference + examples
Rules	`figma_rules`	Generate design system rule sheet — tokens, typography, components

What's new in v2.5

Feature	Description
`get_design_context`	AI-optimized payload for a node — flex layout, token-resolved colors (`var(--name)`), typography with style names, component instances with variant properties. Best single call for design→React/Vue/Swift code.
`get_component_map`	List every component instance in a frame with `componentSetName`, `variantLabel`, properties, and `suggestedImport` path. Scaffold import statements in one call.
`get_unmapped_components`	Find component instances that have no description in Figma (no code mapping yet). Prompts AI to ask user for correct import paths.
`figma_rules` tool	New top-level MCP tool — aggregates color tokens, typography styles, variables (all modes), and component catalog into a single markdown rule sheet. Equivalent to official Figma MCP's `create_design_system_rules`. Call once at session start.
`get_css` operation	`figma_read get_css { nodeId }` → ready-to-use CSS string (flex, typography, fill, border, shadow, opacity, transform). One call, paste into code.
Resolved variables	`get_node_detail` now resolves `boundVariables` IDs → `{ name, resolvedType, value }`. No more manual ID lookup.
Resolved style refs	`fillStyleId` / `textStyleId` now include `fillStyle: { name, hex }` and `textStyle: { name, fontSize, fontFamily }`.
Instance overrides detail	`overrides: [{ id, overriddenFields: ["fills","characters",...] }]` — full diff vs mainComponent, not just count.
`componentSetName` + `variantLabel`	INSTANCE nodes now expose set name (`"Button"`) and variant label (`"State=Primary, Size=Large"`) separately.
`insertIndex` for create	`figma.create({ ..., insertIndex: 2 })` — insert node at exact position in parent, not always at end.
Typography tokens	`setupDesignTokens({ fontSizes, fonts, textStyles })` — 1 call bootstrap full typography system with variable-bound text styles. Multi-mode (Compact/Comfortable/Large) supported.
`applyTextStyle`	Apply a local text style to a TEXT node by name in 1 call — auto-loads font.
STRING variables for fonts	`applyVariable` now binds `fontFamily`, `fontStyle`, `characters` (swap Inter → SF Pro via 1 variable).
Effects	`effects: [{ type: "DROP_SHADOW" \| "INNER_SHADOW" \| "LAYER_BLUR" \| "BACKGROUND_BLUR", ... }]` on any node.
Gradient fills	`fill: { type: "LINEAR_GRADIENT" \| "RADIAL_GRADIENT", angle, stops }` in create/modify.
Individual corner radii	`topLeftRadius`, `topRightRadius`, `bottomLeftRadius`, `bottomRightRadius` on FRAME/RECT.
8-digit hex + rgba alpha	`fill: "#FFFFFF80"` or `"rgba(255,255,255,0.5)"` — alpha auto-applied to paint opacity.
SVG arc (A) + commas	VECTOR `d` paths accept `A` arc command (auto-converted to cubic Bézier) and commas.
Icon libraries	7 free open-source libraries, iOS-filled first: Ionicons → Fluent → Bootstrap → Phosphor → Tabler Filled → Tabler Outline → Lucide.
Instance overrides	`figma.instantiate({ overrides: { "LayerName": { text, fill, fontSize } } })` — override props per-layer.
Batch delete	`figma.delete({ ids: [...] })` — delete multiple nodes in 1 round-trip.
Prototyping	`setReactions` — click/hover/press → navigate/overlay/swap with Smart Animate.
Scroll behavior	`setScrollBehavior` — HORIZONTAL / VERTICAL / BOTH overflow.
Variants & instance swap	`setComponentProperties` / `swapComponent` — variants + instance swap.
Component property definitions (v2.5.24)	`addComponentProperty` + `bindComponentProperty` — create TEXT / BOOLEAN / INSTANCE_SWAP properties on master components. Instance text overrides now actually re-measure auto-layout (button grows to fit longer label).
Multi-instance	Multiple Figma tabs connect simultaneously via sessions.

Full version history: see CHANGELOG.md.

Quick Start

Step 1 — Add the MCP server to your AI client

Choose your platform:

Claude Code (CLI)

bash

# Project scope (default)
claude mcp add figma-ui-mcp -- npx figma-ui-mcp

# Global scope (all projects)
claude mcp add --scope user figma-ui-mcp -- npx figma-ui-mcp

Claude Desktop

Edit config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Cursor

Edit .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):

config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

VS Code / GitHub Copilot

Edit .vscode/mcp.json (project) or add to settings.json (global):

config.json

{
  "mcp": {
    "servers": {
      "figma": {
        "command": "npx",
        "args": ["-y", "figma-ui-mcp"]
      }
    }
  }
}

Windsurf

Edit ~/.codeium/windsurf/mcp_config.json:

config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Antigravity (Google)

Open "..." dropdown at the top of the agent panel
Click "Manage MCP Servers" → "View raw config"
Add to mcp_config.json:

config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

From source (any client)

bash

git clone https://github.com/TranHoaiHung/figma-ui-mcp
cd figma-ui-mcp
npm install
# Then point your MCP client to: node /path/to/figma-ui-mcp/server/index.js

⚠️ IMPORTANT: After adding the MCP server, you MUST restart your IDE / AI client (quit and reopen). The MCP server only loads on startup — simply saving the config file is not enough. This applies to Claude Code, Cursor, VS Code, Windsurf, and Antigravity.

Step 2 — Install the Figma plugin

⬇ Download plugin.zip — no git clone needed

Read the full README →View source on GitHub →

Related MCP Servers

View all in Multimedia Process View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

243

Stargazers on the source repository.

Last commit

3d ago

Most recent push to the default branch.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Figma Ui MCP

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "figma-ui-mcp": { "command": "npx", "args": ["-y","figma-ui-mcp"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/figma-ui-mcp?style=directory)](https://allmcps.com/mcp/figma-ui-mcp)

HTML Embed

<a href="https://allmcps.com/mcp/figma-ui-mcp"><img src="https://allmcps.com/api/badge/figma-ui-mcp?style=directory" alt="Figma Ui MCP on AllMCPs" /></a>

Technical Specs & Signals

CategoryMultimedia Process

4/8 checks healthy over the last 45d

45Quality signal: Fair · 45/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools15/30

Adoption & activity9/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 6d ago via OSV.dev · figma-ui-mcp (npm)

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.