claude-talk-to-figma

This MCP server enables Claude-based agents to read, analyze, and modify Figma designs via a dedicated WebSocket server. It exposes a set of capabilities for design analysis, element creation, and modification, allowing agents to inspect document structure, audit accessibility, adjust styles, and generate code-ready components. The integration is designed to work with various Claude tools and other agentic adapters, so you can connect Claude Desktop, Claude Code, Cursor, Windsurf, VS Code with Copilot, and more to drive design-to-code workflows directly from Figma. Once the server is running and the Figma plugin is installed, your agent can issue commands such as analyzing the current document, exporting assets, applying style updates, or generating React/Vue/SwiftUI components from design tokens, with changes reflected back into Figma.

To use it, start the MCP server with the command above, then install the Figma plugin from the provided manifest path, and configure your agent tool to connect to the MCP channel. In Cursor or other agent tools, add an MCP configuration that points to the running server (as shown in the example configuration). After setup, copy the channel ID from the plugin UI and instruct your agent to connect to Figma using that channel, enabling real-time collaborative AI-driven design work.

For common tasks, you can request design analysis (structure, current selection, styles), create or clone elements with full style control, and perform modifications (colors, borders, typography, auto-layout). The complete set of commands is documented in the repository, including an extensive COMMANDS.md, making it straightforward to leverage the full tooling in your design-to-code pipelines.

Prerequisites:

• Node.js installed on your system
• Access to a terminal or command prompt
• (Optional) bun installed for faster startup in subsequent sessions

Step 1: Install and start the WebSocket MCP server

• Open a terminal and navigate to the folder where you want the MCP installed.
• Run:

npx claude-talk-to-figma-mcp

This clones, installs dependencies, and starts the WebSocket server in one step.

Step 2: Install the Figma plugin

• In Figma Desktop, go to Menu → Plugins → Development → Import plugin from manifest.
• Point to the manifest.json located under the MCP installation folder (src/claude_mcp_plugin/manifest.json).

Step 3: Configure your agent tool

• For Claude Desktop or Claude Code, follow their usual setup flows to connect to an MCP channel.
• If using Cursor, add a new MCP Server with the following configuration:

{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
    }
  }
}

• Save and restart Cursor, then connect to Figma via the channel ID shown in the plugin UI.

Step 4: Start working

• In Figma, open the plugin and copy the channel ID.
• In your agent, issue: Connect to Figma, channel {your-ID} to begin interactive sessions.

If you prefer Docker or other environments, refer to the detailed installation docs linked in the repository (INSTALLATION.md) for alternatives and advanced setup.

Notes and tips:

• This MCP works with any Figma account (including free accounts); it does not require a special Dev Mode license.
• The recommended starting command is npx claude-talk-to-figma-mcp, which handles cloning, installation, and startup in one step.
• After the initial setup, you can start the socket quickly by navigating to your project folder and running bun run socket or npm run socket, depending on your preferred runtime.
• The MCP supports a wide range of agentic tools (Claude Desktop, Claude Code, Cursor, Windsurf, VS Code with Copilot, Cline, Roo Code) as described in the Quick Installation guide.
• If you run into connection issues, verify that the Figma plugin is installed correctly, the plugin is open in a document, and your agent is configured to the correct channel ID. Check the repository’s TROUBLESHOOTING.md for common errors and fixes.
• For production deployments, you can use the Docker alternative described in INSTALLATION.md to run the WebSocket server in containerized environments.