Figma Ui MCP

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:

{
  "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.