![\"figma-ui-mcp](\"assets/logo-v6.png\"){kind=logo}
\n\n \n
\n ![\"npm](\"https://img.shields.io/npm/v/figma-ui-mcp?color=blue\")
![\"MCP](\"https://img.shields.io/badge/MCP-Registry-purple\"){kind=icon}
![\"License:](\"https://img.shields.io/badge/License-MIT-yellow.svg\"){kind=icon}
\n ![\"GitHub](\"https://img.shields.io/github/stars/TranHoaiHung/figma-ui-mcp?style=social\")
\n Claude Code to Figma · Antigravity to Figma · Cursor to Figma · Any MCP IDE to Figma\n
\n\n\n ✅ Tested: Claude Code, Antigravity | 🔧 Compatible: Cursor, VS Code, Windsurf, Zed (any MCP stdio client)\n
\n\n**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.\n\n> **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**.\n\n```\nClaude ──figma_write──▶ MCP Server ──HTTP (localhost:38451)──▶ Figma Plugin ──▶ Figma Document\nClaude ◀─figma_read──── MCP Server ◀──HTTP (localhost:38451)── Figma Plugin ◀── Figma Document\n```\n\n### How the localhost bridge works\n\nThe 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.\n\n**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.\n\n---\n\n## Features\n\n| Direction | Tool | What it does |\n|-----------|------|-------------|\n| Write | `figma_write` | Draw frames, shapes, text, prototypes via JS code |\n| Read | `figma_read` | Extract node trees, colors, typography, screenshots |\n| Info | `figma_status`| Check plugin connection + active sessions |\n| Docs | `figma_docs` | Get full API reference + examples |\n| Rules | `figma_rules` | Generate design system rule sheet — tokens, typography, components |\n\n### What's new in v2.5\n\n| Feature | Description |\n|---------|-------------|\n| **`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. |\n| **`get_component_map`** | List every component instance in a frame with `componentSetName`, `variantLabel`, properties, and `suggestedImport` path. Scaffold import statements in one call. |\n| **`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. |\n| **`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. |\n| **`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. |\n| **Resolved variables** | `get_node_detail` now resolves `boundVariables` IDs → `{ name, resolvedType, value }`. No more manual ID lookup. |\n| **Resolved style refs** | `fillStyleId` / `textStyleId` now include `fillStyle: { name, hex }` and `textStyle: { name, fontSize, fontFamily }`. |\n| **Instance overrides detail** | `overrides: [{ id, overriddenFields: [\"fills\",\"characters\",...] }]` — full diff vs mainComponent, not just count. |\n| **`componentSetName` + `variantLabel`** | INSTANCE nodes now expose set name (`\"Button\"`) and variant label (`\"State=Primary, Size=Large\"`) separately. |\n| **`insertIndex` for create** | `figma.create({ ..., insertIndex: 2 })` — insert node at exact position in parent, not always at end. |\n| **Typography tokens** | `setupDesignTokens({ fontSizes, fonts, textStyles })` — 1 call bootstrap full typography system with variable-bound text styles. Multi-mode (Compact/Comfortable/Large) supported. |\n| **`applyTextStyle`** | Apply a local text style to a TEXT node by name in 1 call — auto-loads font. |\n| **STRING variables for fonts** | `applyVariable` now binds `fontFamily`, `fontStyle`, `characters` (swap Inter → SF Pro via 1 variable). |\n| **Effects** | `effects: [{ type: \"DROP_SHADOW\" \\| \"INNER_SHADOW\" \\| \"LAYER_BLUR\" \\| \"BACKGROUND_BLUR\", ... }]` on any node. |\n| **Gradient fills** | `fill: { type: \"LINEAR_GRADIENT\" \\| \"RADIAL_GRADIENT\", angle, stops }` in create/modify. |\n| **Individual corner radii** | `topLeftRadius`, `topRightRadius`, `bottomLeftRadius`, `bottomRightRadius` on FRAME/RECT. |\n| **8-digit hex + rgba alpha** | `fill: \"#FFFFFF80\"` or `\"rgba(255,255,255,0.5)\"` — alpha auto-applied to paint opacity. |\n| **SVG arc (A) + commas** | VECTOR `d` paths accept `A` arc command (auto-converted to cubic Bézier) and commas. |\n| **Icon libraries** | 7 free open-source libraries, iOS-filled first: **Ionicons** → Fluent → Bootstrap → Phosphor → **Tabler Filled** → Tabler Outline → Lucide. |\n| **Instance overrides** | `figma.instantiate({ overrides: { \"LayerName\": { text, fill, fontSize } } })` — override props per-layer. |\n| **Batch delete** | `figma.delete({ ids: [...] })` — delete multiple nodes in 1 round-trip. |\n| **Prototyping** | `setReactions` — click/hover/press → navigate/overlay/swap with Smart Animate. |\n| **Scroll behavior** | `setScrollBehavior` — HORIZONTAL / VERTICAL / BOTH overflow. |\n| **Variants & instance swap** | `setComponentProperties` / `swapComponent` — variants + instance swap. |\n| **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). |\n| **Multi-instance** | Multiple Figma tabs connect simultaneously via sessions. |\n\nFull version history: see [CHANGELOG.md](CHANGELOG.md).\n\n---\n\n## Quick Start\n\n### Step 1 — Add the MCP server to your AI client\n\nChoose your platform:\n\n