MCP Directory

How to add figma-use to Windsurf

Control Figma from the terminal or as an MCP server — full read/write: create shapes, text, components, render JSX, export images. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 14, 2026 · 571★ · http · no auth

Windsurf config for figma-use

npm install -g figma-use
{
  "mcpServers": {
    "figma-use": {
      "serverUrl": "http://localhost:38451/mcp"
    }
  }
}

Remote server — no local install needed. Restart the client after saving the config.

Setup steps

  1. 1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
  2. 2Paste the figma-use config below.
  3. 3Fill in placeholder secrets, then save.
  4. 4Click Refresh in the MCP panel.
  5. 5figma-use's tools become available to Cascade.

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`

What figma-use can do in Windsurf

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.

Security

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 + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the figma-use config there under the "mcpServers" key and restart the client.

Is figma-use safe to use with Windsurf?

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.

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`.

View repo Full figma-use page