ClaudeTalkToFigma

You can connect Claude-based AI tools to Figma through an MCP server to issue design commands, inspect documents, and interact with your designs in real time. This server acts as a bridge between your AI client and the Figma plugin, enabling powerful, automated design flows.

How to use

To use this MCP server, you run the local MCP server on your machine and connect your AI client (such as Claude Desktop or Cursor) to it. Start the server, open the Figma plugin, and begin sending design commands. You can analyze your document, create elements, modify properties, and fetch information from Figma in a bidirectional workflow.

How to install

Prerequisites include Node.js and a compatible AI client. Follow the setup steps that fit your workflow.

Additional setup and usage notes

• Start the MCP server and verify it is listening on the expected port. The recommended start is to run the server so that it exposes a WebSocket-based API on port 3055. Verify by visiting the status endpoint in a browser or your tooling.

Configuration and connection examples

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

Second connection method for Claude Desktop via npx

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

Connection steps (quick start)

1. Start the MCP server using your preferred method. 2) In the Figma plugin, open the Claude MCP Plugin and copy the channel ID. 3) In your AI client, issue the connect command like: Talk to Figma, channel {channel-ID}. 4) Confirm the connection when your AI client reports a successful link. 5) Begin issuing design commands and interacting with Figma.

Security and best practices

• Keep your MCP server private to your development environment. - Use strong access controls on your AI client to prevent unauthorized access. - Regularly update dependencies to receive security fixes.

Troubleshooting and support

• If the WebSocket cannot connect, ensure the server is running and listening on port 3055. - If the Figma plugin cannot connect, confirm the plugin is loaded in development mode and that the channel ID is correctly copied. - When commands fail, check for correct command names and argument usage, and review the plugin console for errors.

Advanced topics

For advanced users, you can explore the full set of document, creation, modification, and text tools available through the MCP. This enables automated workflows for creating layouts, updating typography, and managing components across your design system.

Available tools

get_document_info

Analyze the document to provide a high level overview, current state, and related assets.

get_selection

Return information about the current selection in the document.

get_node_info

Inspect details about a specific node in the design.

get_nodes_info

Fetch information for multiple nodes in one request.

scan_text_nodes

Identify all text elements for auditing or updates.

get_styles

Retrieve document styling information such as colors and typography.

join_channel

Connect your AI client to a specific MCP channel to enable communication.

export_node_as_image

Export a node or selection as an image asset.

create_rectangle

Create a basic rectangle shape with styling properties.

create_frame

Create a layout frame to organize content.

create_text

Insert text elements with content and styling.

create_ellipse

Add circle or ellipse shapes to the canvas.

create_polygon

Create multi-sided polygon shapes.

create_star

Add star-shaped elements for decorative UI.

clone_node

Duplicate an existing element.

group_nodes

Group multiple elements together.

ungroup_nodes

Break apart grouped elements.

insert_child

Nest an element inside a parent container.

flatten_node

Perform vector/boolean operations on a node.

set_fill_color

Apply a fill color to an element.

set_stroke_color

Set the border color of an element.

move_node

Change the position of an element.

resize_node

Adjust the size of an element.

delete_node

Remove an element from the canvas.

set_corner_radius

Apply rounded corners to a shape.

set_auto_layout

Enable auto layout behavior for containers.

set_effects

Add or modify visual effects like shadows and blurs.

set_effect_style_id

Apply a predefined effect style to ensure consistency.

set_text_content

Update the text content of an element.

set_multiple_text_contents

Update text for multiple elements in a single operation.

set_font_name

Change the font family.

set_font_size

Adjust typography size.

set_font_weight

Change font weight.

set_letter_spacing

Fine-tune character spacing.

set_line_height

Control vertical line spacing.

set_paragraph_spacing

Adjust spacing between paragraphs.

set_text_case

Transform text case (upper, lower, title).

set_text_decoration

Apply decorations such as underline or strikethrough.

get_styled_text_segments

Analyze text styling segments for inspection.

load_font_async

Load fonts asynchronously for rendering.

get_local_components

List locally defined components in the project.

get_remote_components

Access components from team libraries.

create_component_instance

Instantiate a component instance for reuse.