MCP Directory

figma-use

Control Figma from the terminal or as an MCP server — full read/write: create shapes, text, components, render JSX, export images.

Unverified
HTTP (remote)
No auth
TypeScript
View repo 571 Website npm

Add to your client

Copy the config for your MCP client and paste it into its config file.

Install / run
npm install -g figma-use

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "figma-use": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "http://localhost:38451/mcp"
      ]
    }
  }
}

Claude Desktop connects to remote servers through the `mcp-remote` proxy (installed on first run via npx). Restart Claude Desktop after saving.

Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf

Before you start

  • Node.js with npm (install the `figma-use` package globally or run via npx)
  • Figma desktop app launched with remote debugging, e.g. `open -a Figma --args --remote-debugging-port=9222` (or `figma-use daemon start --pipe` for Figma 126+)
  • The MCP server running locally via `figma-use mcp serve`

About figma-use

figma-use is a TypeScript CLI and MCP server that gives AI agents full read/write control over Figma. It talks to the Figma desktop app directly via the Chrome DevTools Protocol (no plugin to install) and exposes its 100+ CLI commands as 90+ MCP tools prefixed with figma_. Agents can create and style elements, render JSX layouts, define components/variants, bind variables as design tokens, query nodes with XPath, run lint and analysis passes, diff frames, and export images. The MCP server is launched with figma-use mcp serve and connected to via a local HTTP URL.

Tools & capabilities (12)

figma_status

Check if Figma is connected.

figma_create_frame

Create a frame with layout (auto-layout or grid).

figma_create_rect

Create a rectangle.

figma_create_text

Create a text node.

figma_create_icon

Insert an Iconify icon by name.

figma_set_fill

Set the fill color of a node.

figma_set_layout

Set auto-layout or grid layout on a node.

figma_node_move

Move a node.

figma_node_resize

Resize a node.

figma_export_node

Export a node as PNG or SVG.

figma_render

Render JSX into Figma at a given position.

figma_query

Find nodes using XPath selectors.

When to use it

  • Let an AI agent build full Figma layouts from a natural-language or JSX description instead of read-only inspection.
  • Generate component sets with variants (e.g. Button × variant × size) programmatically as real Figma ComponentSets.
  • Query, lint, and analyze an existing design system (colors, typography, spacing, accessibility) for consistency.
  • Export Figma nodes to PNG/SVG, convert nodes back to JSX, or diff two frames as a patch.

Security notes

Requires the Figma desktop app to be launched with remote debugging enabled (e.g. `--remote-debugging-port=9222`), which exposes a Chrome DevTools Protocol endpoint on localhost — only run this on a trusted machine. The MCP server has full read/write access to the open Figma file via the Plugin API. The MCP endpoint is served over local HTTP with no authentication, so do not expose the port beyond localhost.

figma-use FAQ

How is this different from Figma's official MCP server?

Figma's official MCP plugin can read files but cannot modify them. figma-use has full read/write access and can create, edit, and export nodes via the Plugin API.

Do I need to install a Figma plugin?

No. figma-use connects to the Figma desktop app over the Chrome DevTools Protocol. You just start Figma with remote debugging enabled (e.g. `--remote-debugging-port=9222`).

What transport does the MCP server use?

The MCP server runs as a local process (`figma-use mcp serve`) and is added to your MCP client via a `url` pointing at a local HTTP endpoint such as `http://localhost:38451/mcp`. The port can be changed with `--port`.

Is it official?

No. It is a third-party open-source project (MIT, by dannote), not built by Figma.

#figma#design#ai-agents#automation#jsx#cli#ui-design

Alternatives to figma-use

Compare all alternatives →
BlenderMCP
Design & Media
23k

Control Blender from Claude and other LLMs for prompt-assisted 3D modeling, scene creation, and asset generation.

Unverified
stdio (local)
No auth
Python
22 tools
Updated 16 days agoRepo
Figma Context MCP (figma-developer-mcp)
Design & Media
15k

Popular community server that feeds Figma layout data to coding agents via a Figma API token.

Verified
stdio (local)
API key
TypeScript
2 tools
Updated 1 month agoRepo
21st.dev Magic MCP
Design & Media
5.2k

Generate beautiful, modern UI components from natural-language descriptions inside your IDE.

Unverified
stdio (local)
API key
TypeScript
4 tools
Updated 4 months agoRepo

Compare figma-use with:

vs BlenderMCPvs Figma Context MCP (figma-developer-mcp)vs 21st.dev Magic MCPvs Shadcn UI v4 MCP Server