MCP serverOfficial registry

Figma Ui

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

by io.github.TranHoaiHungv2.5.29GitHub npm

接入你的智能体

添加此服务器

The publisher's own URL. Not a PlugMCP endpoint.

Server URL

https://mcpvault.io/servers/figma-ui-mcp/health?utm_source=external_badge&utm_medium=referral&utm_campaign=mcp_health_report

Provider

Claude Code

claude mcp add --transport http io.github.tranhoaihung-figma-ui-mcp https://mcpvault.io/servers/figma-ui-mcp/health?utm_source=external_badge&utm_medium=referral&utm_campaign=mcp_health_report

Run in a terminal.

Claude Desktop

{
  "mcpServers": {
    "io.github.tranhoaihung-figma-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcpvault.io/servers/figma-ui-mcp/health?utm_source=external_badge&utm_medium=referral&utm_campaign=mcp_health_report"
      ]
    }
  }
}

claude_desktop_config.json

Step-by-step: add this in Claude

Remote URL or a command on your machine? How the two installs differ

在 PlugMCP 上运行

用我们的密钥与日志托管一份副本。

这是你新建的服务器，不是此条目的官方端点。若要用发布方的 URL 与凭证，请使用上方安装面板。

启动

Related MCP

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.

Features

Direction	Tool	What it does
Write	`figma_write`	Draw frames, shapes, text, prototypes via JS code

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.

Prompt	What happens
`"Draw a mobile login screen with social login buttons"`	Creates a 390×844 frame with email/password inputs, Apple/Google buttons
`"Read the selected frame and describe the design"`	Extracts colors, typography, spacing from your selection
`"Take a screenshot of the current frame"`	Returns an inline image the AI can analyze
`"Create a dark theme dashboard with KPI cards"`	Draws a full dashboard layout with charts and stats
`"Design an e-commerce product card"`	Creates a product card with image, price, rating, CTA
`"Draw a settings page with toggle switches"`	Creates grouped settings with icons and toggles

Layer	Protection
VM sandbox	`vm.runInContext()` — blocks `require`, `process`, `fs`, `fetch`
Localhost only	Bridge binds `localhost:38451`, never exposed to network
Operation allowlist	56 predefined operations accepted (WRITE_OPS + READ_OPS)
Timeout	30s VM execution + 60-90s per plugin operation (adaptive by op type)
Body size limit	5 MB max per request
Session isolation	Multi-instance sessions scoped by Figma file ID

Operation	Description
`figma.create({ type, ... })`	Create FRAME / RECTANGLE / ELLIPSE / LINE / TEXT / SVG / VECTOR / IMAGE
`figma.modify({ id, ... })`	Update node properties (fill, size, text, layout, etc.)
`figma.delete({ id })`	Remove a single node
`figma.delete({ ids: [...] })`	Batch delete multiple nodes in one call
`figma.query({ type?, name?, id? })`	Find nodes by type, name, or ID
`figma.append({ parentId, childId })`	Move node into parent

Prop	Example	Notes
`fill` (solid)	`"#6C5CE7"` or `"#6C5CE780"` (8-digit hex with alpha) or `"rgba(108,92,231,0.5)"`	Alpha auto-extracted into paint opacity
`fill` (gradient)	`{ type: "LINEAR_GRADIENT", angle: 135, stops: [{ pos: 0, color: "#7C3AED" }, { pos: 1, color: "#EC4899" }] }`	Also `RADIAL_GRADIENT`
`stroke`, `strokeWeight`, `strokeOpacity`	Same hex/rgba rules
`cornerRadius` uniform	`12`	All 4 corners
Individual corners	`topLeftRadius: 20, topRightRadius: 20, bottomLeftRadius: 0, bottomRightRadius: 0`	Rounded top sheet pattern
`effects` array	`[{ type: "DROP_SHADOW", color: "#00000026", offset: {x:0,y:8}, radius: 24, spread: 0 }]`	Types: `DROP_SHADOW`, `INNER_SHADOW`, `LAYER_BLUR`, `BACKGROUND_BLUR`
TEXT center	`textAlign: "CENTER"` with explicit `width`	Auto-infers `textAutoResize: "NONE"` so centering works
VECTOR path	`d: "M 150 7 A 143 143 0 1 1 29.26 226.62"`	SVG `A` arc auto-converted to cubic Bézier; commas accepted

Operation	Description
`figma.status()`	Current Figma context info
`figma.listPages()`	List all pages
`figma.setPage({ name })`	Switch active page
`figma.createPage({ name })`	Add a new page

Operation	Description
`figma.clone({ id, x?, y?, parentId? })`	Duplicate a node with optional repositioning
`figma.group({ nodeIds, name? })`	Group multiple nodes
`figma.ungroup({ id })`	Ungroup a GROUP/FRAME
`figma.flatten({ id })`	Flatten/merge vectors into single path
`figma.resize({ id, width, height })`	Resize any node
`figma.set_selection({ ids })`	Programmatically select nodes
`figma.set_viewport({ nodeId?, x?, y?, zoom? })`	Navigate viewport
`figma.batch({ operations })`	Execute up to 50 ops in one call (10-25x faster)

Operation	Description
`figma.listComponents()`	List all components in document
`figma.createComponent({ nodeId, name? })`	Convert FRAME/GROUP → reusable Component
`figma.instantiate({ componentId/Name, parentId, x, y })`	Create component instance
`figma.instantiate({ ..., overrides: { "LayerName": { text, fill, fontSize, visible, ... } } })`	Instantiate with per-layer overrides

Operation	Description
`figma.setupDesignTokens({ colors, numbers, fontSizes, fonts, textStyles, modes })`	Bootstrap complete token system (idempotent) — colors + spacing + typography + text styles + multi-mode in 1 call
`figma.createVariableCollection({ name })`	Create variable collection ("Colors", "Spacing")
`figma.createVariable({ name, collectionId, resolvedType, value })`	Create COLOR/FLOAT/STRING/BOOLEAN variable
`figma.addVariableMode({ collectionId, modeName })`	Add mode (e.g. "dark", "compact")
`figma.renameVariableMode({ collectionId, modeId, newName })`	Rename a mode
`figma.removeVariableMode({ collectionId, modeId })`	Remove a mode
`figma.setVariableValue({ variableId/Name, modeId/Name, value })`	Set per-mode value
`figma.modifyVariable({ variableName, value })`	Change variable value — all bound nodes update
`figma.applyVariable({ nodeId, field, variableId/Name })`	Bind variable to a node property
`figma.applyTextStyle({ nodeId, styleName })`	Apply a local text style to a TEXT node by name (auto-loads font)
`figma.setFrameVariableMode({ nodeId, collectionId, modeName })`	Pin frame to a variable mode (Light/Dark, Compact/Large)
`figma.clearFrameVariableMode({ nodeId, collectionId })`	Reset frame to document default mode
`figma.createPaintStyle({ name, color })`	Create reusable paint style
`figma.createTextStyle({ name, fontFamily, fontSize, ... })`	Create reusable text style (manual — prefer `setupDesignTokens.textStyles`)
`figma.ensure_library()`	Create/get Design Library frame
`figma.get_library_tokens()`	Read library color + text tokens

Operation	Description
`figma.loadImage(url, opts)`	Download image → place on canvas
`figma.loadIcon(name, opts)`	Fetch SVG icon with 7-library fallback (iOS-filled first)
`figma.loadIconIn(name, opts)`	Icon inside centered circle background

Operation	Description
`figma.setReactions({ id, reactions })`	Add prototype interactions (ON_CLICK/ON_HOVER/ON_PRESS → NAVIGATE/OVERLAY/SWAP)
`figma.getReactions({ id })`	Read all prototype interactions from a node
`figma.removeReactions({ id })`	Clear all interactions from a node

Operation	Description
`figma.setComponentProperties({ id, properties })`	Set variant, boolean, text, or instance swap properties on an INSTANCE
`figma.swapComponent({ id, componentId })`	Swap the main component of an instance
`figma.getComponentProperties({ id })`	Read all properties + definitions from component/instance

Operation	Description
`get_selection`	Full design tree of selected node(s) + design tokens
`get_design`	Full node tree for a frame/page (depth param: default 10, or "full")
`get_page_nodes`	Top-level frames on the current page
`screenshot`	Export node as PNG — displays inline in Claude Code
`export_svg`	Export node as SVG markup
`export_image`	Export node as base64 PNG/JPG — for saving to disk (`format`, `scale` params)
`get_design_context`	AI-optimized design→code payload — flex layout, token-resolved fills as `var(--name)`, typography with style names, component instances with variant properties + `componentsUsed` / `tokensUsed` summaries. Best single call for generating React/Vue/Swift code.
`get_component_map`	Component instance map — every INSTANCE in a frame with `componentSetName`, `variantLabel`, `properties`, and `suggestedImport` path. Deduplicates into `uniqueComponents[]` with usage counts.
`get_unmapped_components`	Code-mapping audit — lists instances with no description in Figma (`unmapped[]`). Use to prompt user for correct import paths before code generation.
`get_node_detail`	Structured properties for single node — fills, layout, typography, effects, bound variables (resolved to name+value), style refs (resolved to name+hex), instance overrides (full field list), `componentSetName` + `variantLabel`
`get_css`	Ready-to-use CSS string for a node — background, flex, border, radius, shadow, typography, opacity, transform. Best for design-to-code.
`get_styles`	All local paint, text, effect, grid styles
`get_local_components`	Component listing with descriptions + variant properties
`get_viewport`	Current viewport position, zoom, bounds
`get_variables`	Local variables (Design Tokens) — collections, modes, values
`search_nodes`	Find nodes by type, name, fill color, font, size — supports `includeHidden`
`scan_design`	Progressive scan for large files — all text, colors, fonts, images, icons

Figma Ui

添加此服务器

用我们的密钥与日志托管一份副本。

More like this

Firecrawl

Notion

Context7

figma-ui-mcp

How the localhost bridge works

Features

What's new in v2.5

Quick Start

Step 1 — Add the MCP server to your AI client

Step 2 — Install the Figma plugin

Updating to a newer version

Step 3 — Connect AI to Figma

Step 4 — Start designing with prompts

Prompt examples

Tips for better results

Workflow summary

Usage Examples

Draw a screen

Read a design

Screenshot a frame

Architecture

Security

Available Write Operations (figma_write)

Core CRUD

Page Management

Node Operations

Components

Design Tokens & Styles

Image & Icon Helpers (server-side)

Prototyping & Interactions

Scroll Behavior

Variant & Component Swapping

Available Read Operations (figma_read)

Working with an Existing Project

Step 1 — Read what exists

Step 2 — Build lookup maps in figma_write

Step 3 — Create nodes using discovered values

Step 4 — Instantiate components with overrides

Step 5 — Pin frames to Light / Dark mode

Star History

License

Keywords

Available Write Operations (`figma_write`)

Available Read Operations (`figma_read`)