Figma UI MCP: Draw and Read Figma Designs With AI

What is Figma UI MCP?

Figma UI MCP is a two-way bridge between an AI coding agent and Figma. The agent writes JavaScript to draw UI on the canvas and reads existing designs back as structured data, screenshots or code-ready tokens, with no Figma API key.

A small HTTP server on localhost port 38451 talks to a plugin inside Figma Desktop by long polling. The README says all traffic stays on your machine. For the official route, see Figma MCP.

What it changes in your workflow

• The agent draws frames, shapes, text and prototypes through figma_write, using JavaScript.
• It reads node trees, colors, typography and screenshots with figma_read.
• get_design_context returns a payload tuned for design to code, with flex layout, token-resolved colors and component variants.
• A rules tool collects tokens, styles and components into one markdown rule sheet at session start.

How the bridge works

Who it is for

Best for

• Developers who want an agent to build or restyle Figma frames without an API key.
• Teams doing design to code that need variables, components and CSS in one read.
• Designers who want a design system rule sheet generated from a file.

Not for

• Browser-only Figma. The README says Figma Desktop is required, because the web app cannot reach localhost.
• Teams that want a hosted service. This one runs on your machine only, like Framelink MCP for Figma, which reads over the REST API instead.

Use it with UiChemy

This server reads and draws in Figma for your agent. UiChemy's Figma to WordPress product turns Figma designs into editable WordPress pages, and Composer is a visual editor for Elementor or Gutenberg. Click Get Started on uichemy.com.

Connect Figma UI MCP: Draw and Read Figma Designs With AI to your AI client

npx -y figma-ui-mcp

1. Add the server

   Put the config above in your client's MCP file, such as .cursor/mcp.json or ~/.cursor/mcp.json for Cursor. For Claude Code run claude mcp add figma-ui-mcp -- npx figma-ui-mcp.

2. Restart your client

   The README stresses that you must quit and reopen the IDE or client, because the server only loads on startup.

3. Download the plugin

   Download plugin.zip from the repo, unzip it anywhere and open Figma Desktop.

4. Import and run the plugin

   Go to Plugins, Development, Import plugin from manifest, select manifest.json, then run the Figma UI MCP Bridge plugin.

5. Check the green dot

   The plugin UI shows a green dot when the MCP server is connected. Then ask the agent to read your selected frame.

Client configuration

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

Endpoints and ports

What you can do with it

• No API keyRuns entirely over localhost with the Figma Desktop plugin, per the README.
• Design context readget_design_context returns flex layout, token-resolved colors, typography styles and component variants in one call.
• Component mapget_component_map lists every component instance in a frame with its set name, variant label and a suggested import path.
• CSS in one callget_css returns a ready CSS string for a node, covering flex, typography, fill, border, shadow and transform.
• Variables and stylesDesign tokens, text styles and variable bindings can be created and applied, including multiple modes.
• Multi-file sessionsSeveral Figma files can connect at once, and each call can target one by sessionId.
• Icon librariesSeven free open-source libraries, including Ionicons, Phosphor, Tabler and Lucide, are available for drawing icons.

Tools it exposes

Frequently asked questions