# figma-ui-mcp [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/TranHoaiHung/figma-ui-mcp  
**GitHub Stars:** 266  
**npm Downloads (last month):** 2731  
**Views:** 17  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/figma-ui-mcp

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

## Tools
Capabilities this server exposes over MCP:

- **figma_status** — Check whether the Figma plugin bridge is connected. Always call this first to confirm the plugin is running before any other tool.
- **figma_write** — Execute JavaScript code to CREATE or MODIFY designs in Figma. ⚠️ MANDATORY: Call figma_docs BEFORE writing any design code. Skipping figma_docs causes hardcoded colors, wrong sizing, broken layouts, and low-quality UI. Use the `figma` proxy object — all methods return Promises, use async/await. Operations: create, modify, delete, clone, group, ungroup, flatten, resize, set_selection, set_viewport, batch (multiple ops in one call). Design Tokens: createVariableCollection, createVariable, setVariableValue, addVariableMode, renameVariableMode, removeVariableMode, applyVariable, setFrameVariableMode, clearFrameVariableMode, createPaintStyle, createTextStyle, createComponent. Prototyping: setReactions, getReactions, removeReactions (click/hover/press → navigate/overlay/swap with Smart Animate transitions). Scroll: setScrollBehavior (overflowDirection: NONE/HORIZONTAL/VERTICAL/BOTH). Variants: setComponentProperties, swapComponent, getComponentProperties. Component property definitions (master-side, required for instance text overrides to recalc auto-layout): addComponentProperty (TEXT/BOOLEAN/INSTANCE_SWAP), bindComponentPropertyToText, removeComponentProperty. The code runs in a sandboxed VM: no access to require, process, fs, fetch, or network.
- **figma_read** — READ design data from Figma — extract node trees, colors, typography, spacing, and screenshots. Use to understand an existing design before generating code, or to inspect what's on the canvas.
- **figma_docs** — Get the API reference and design rules for figma_write. Call with no args first — returns quick-start guide + critical rules. Then load specific sections as needed: section='rules' (design principles, token rules, layer order, component-first), section='layout' (auto-layout, button/card/badge/progress/mobile rules), section='api' (create/modify/delete/clone/batch/read operations + workflow), section='tokens' (variables, multi-mode, paint styles, text styles), section='icons' (loadImage, loadIcon, loadIconIn, icon libraries, coloring, sizing). Always call figma_docs BEFORE any figma_write code.
- **figma_rules** — Generate a design system rule sheet from the current Figma file — aggregates color tokens, typography styles, variables (all modes), and component catalog into a single markdown block. Equivalent to official Figma MCP's create_design_system_rules. Call once at the start of a design-to-code session to give the AI full context: what tokens to use, what text styles exist, which components are available. Re-run when the design system changes.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

## Documentation

## What figma-ui-mcp does

figma-ui-mcp provides a bidirectional connection between an MCP client and a Figma document. AI assistants can inspect existing designs or send JavaScript operations to create and update frames, shapes, text, components, prototypes, variables, styles, and other canvas content.

The read side can return node structures, colors, typography, spacing, screenshots, CSS, resolved variables, style references, component variants, and instance override details. Design-system information can also be consolidated into a rule sheet containing tokens, typography, variables, and components.

It is suited to workflows where an agent needs both visual context and the ability to edit the source Figma file, such as generating UI from requirements, extracting implementation details, or translating an existing design into code-ready data.

## How it works

The MCP process starts a local HTTP bridge on `localhost:38451`. A plugin running in Figma Desktop polls that bridge for work and returns results from the active document. Requests normally complete with near-real-time latency, and traffic remains on the local machine.

Call `figma_status` before other operations to verify that the plugin is connected. Before sending design JavaScript with `figma_write`, call `figma_docs`; its reference is organized into rules, layout, API, tokens, and icons sections. `figma_rules` can be called at the beginning of a design-to-code session to provide the agent with a consolidated view of the file’s design system.

Multiple Figma files or tabs can connect through separate sessions. The optional `sessionId` parameter on read and write calls selects a particular session.

## Setup and configuration

Install the server through an MCP client using the npm package command:

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

The same stdio configuration is supported by Claude Desktop, Cursor, VS Code, Windsurf, and other MCP clients. Claude Code can add it with `claude mcp add figma-ui-mcp -- npx figma-ui-mcp`.

After configuring the client, open Figma Desktop and run the companion plugin. The web version of Figma cannot provide the required localhost access, so Desktop is part of the runtime setup. No Figma API key or environment variable is required.

## Tools and capabilities

- `figma_status` checks plugin connectivity and active sessions.
- `figma_read` extracts design data, screenshots, CSS, tokens, styles, components, and node details.
- `figma_write` runs asynchronous JavaScript in a sandbox to create, modify, delete, clone, group, resize, batch, and arrange nodes.
- Write operations cover variables, paint and text styles, components, component properties, variants, instance swaps, reactions, scrolling, gradients, effects, and icon loading.
- `figma_docs` supplies the write API reference, design rules, layout guidance, token instructions, and icon guidance.
- `figma_rules` produces a Markdown design-system rule sheet for the current file.

The write sandbox cannot use `require`, `process`, `fs`, `fetch`, or network access. Code should use the provided `figma` proxy and `async`/`await` because its methods return promises.

## Limitations and notes

Figma Desktop and the companion plugin must be running for bridge operations to work. The bridge is local rather than a connection to a remote Figma API. Design code should follow the documentation returned by `figma_docs`, especially its requirement to load the relevant guidance before writing.

_Full upstream README: https://allmcps.com/mcp/figma-ui-mcp/readme_