figma-ui-mcp GitHub Details, Stars and Alternatives | OpenRepoFinder
TranHoaiHung / repository
figma-ui-mcp
AI can draw UI directly on the Figma canvas via JavaScript, and read existing designs back as structured data. Works with Claude Code, Cursor, VS Code, and Windsurf. No API KEY required.
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
100
Community adoption25% weight
45
Maintenance state20% weight
100
License clarity10% weight
100
Project information10% weight
75
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
figma-ui-mcp
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.
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.
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_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.
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.
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.
Download and unzipplugin.zip anywhere on your machine
Open Figma Desktop (required — web app cannot access localhost)
Go to Plugins → Development → Import plugin from manifest...
Select manifest.json from the unzipped folder
Run Plugins → Development → Figma UI MCP Bridge
The plugin UI shows a green dot when the MCP server is connected.
Updating to a newer version
# Step 1 — get the new version + plugin path
npx figma-ui-mcp@latest --version
# figma-ui-mcp v2.5.12 — plugin: /.../.npm/_npx/.../figma-ui-mcp/plugin
# Step 2 — restart Claude / your IDE so the MCP server reloads
# Step 3 — re-link the Figma plugin (manual, one-time per update)
# Figma Desktop → Plugins → Development → Manage plugins in development
# Remove old "Figma UI MCP Bridge" → "+" → Import plugin from manifest...
# Select manifest.json from the plugin path printed in Step 1
# Step 4 — verify
# Ask your AI: "figma_status"
# pluginVersion in the response should match the npm version above
The Figma plugin does not auto-update — re-linking (Step 3) is required whenever the plugin changes.