Claude Talk to Figma MCP

You have a Model Context Protocol (MCP) server that lets Claude Desktop and other AI tools talk directly to Figma. This enables AI-assisted design workflows, real-time design commands, and bidirectional collaboration between your AI agent and your Figma project.

How to use

Connect your AI client to the MCP server to start issuing design commands and receiving feedback from Figma. Start by ensuring your environment has Claude Desktop or Cursor, Figma Desktop, and Bun installed, then run the server locally. Use the dedicated MCP channel to establish two-way communication so your AI agent can analyze the document, create elements, modify styles, and export assets in real time.

How to install

Prerequisites you need before installation: Bun installed, Claude Desktop or Cursor, and Figma Desktop. You should also have a working Bun environment to run the MCP server and a local Figma file to connect to.

Step 1: Clone the MCP repository and install dependencies.

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
bun install

Step 2: Build for your platform.

bun run build

On Windows, build with the Windows-specific command.

bun run build:win

Step 3: Configure the AI client to load the MCP server. You have two options. If you are using Claude Desktop, you can install the DXT package or configure via JSON. If you are using Cursor, you configure the MCP server in your Cursor settings.

Option 1: DXT Package (Claude Desktop only) – download the latest Claude MCP DXT package and install by double-clicking.

Option 2: JSON (Claude Desktop or Cursor) – set up the MCP server in your client.

For Cursor, open Settings → Tools & Integrations → New MCP Server and add the following configuration (or paste into mcp.json):

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

Initial setup and connection to Figma

Install the Figma plugin that the MCP server uses: in Figma, go to Menu → Plugins → Development and import the plugin manifest located at src/claude_mcp_plugin/manifest.json.

Start the MCP server and verify the WebSocket status locally. Run the following command to start the server, then confirm it is listening on the expected port.

bun socket

In the Figma plugin, open the Claude MCP Plugin and copy the channel ID. Then tell your AI client to connect with: Talk to Figma, channel {channel-ID}.

When the connection is successful, your AI agent can begin issuing design commands to Figma and receiving updates from the plugin.

Core concepts

The MCP server sits between Claude Desktop or Cursor and the Figma plugin, enabling real-time command execution and information flow. The typical flow is Claude Desktop ↔ MCP Server ↔ WebSocket Server ↔ Figma Plugin, with actions flowing from the AI agent to Figma and responses flowing back.

You get bidirectional capabilities: analyze designs, inspect selections, create and modify elements, manage components, and export assets.

Usage patterns and prompts

Get started by configuring Claude as a UX expert and connecting to your project. Then start designing with concrete prompts such as creating a login screen or redesigning a button with specific states and contrast.

Examples of effective prompts include: Create a dashboard with a sidebar navigation, header with user profile, and main content area with card-based metrics. Redesign a button component with hover states and better contrast ratios. Avoid vague requests like Make it look nicer.

Command reference overview

This MCP server exposes a rich set of commands organized by category to interact with the Figma document. Use document tools to analyze and export, creation tools to build elements, modification tools to adjust properties, text tools for typography, and component tools for shared assets.

Testing, troubleshooting, and notes

Test basic commands such as creating a rectangle or changing a color to ensure the pipeline is functioning. If you encounter issues, restart steps in sequence: stop the server, close the AI tool, and then start both again. Check logs for detailed error messages and verify port usage to avoid conflicts.

Architecture overview

The setup comprises four parts: Claude Desktop (AI agent), MCP Server (business logic and routing), WebSocket Server (message routing), and the Figma Plugin (execution layer). This separation simplifies testing and maintenance and supports adding more tools or clients later.

Project structure and contribution notes

The project organizes code into a server module, a Figma plugin, and utilities. If you extend functionality, follow existing TypeScript patterns, add tests for new features, and document changes clearly.

Version and support notes

Current version highlights include improved stroke handling and DXT packaging. If you encounter issues, consult the troubleshooting section and ensure you are on the latest release for best compatibility.

Security and compliance notes

Treat the MCP channel as a trusted bridge between your AI agent and design files. Use secure strings or tokens when configuring your environment, and limit access to the development Figma files to trusted collaborators.

Available tools

get_document_info

Analyze the current document to understand structure, layers, and assets.

get_selection

Retrieve the current selection in the Figma document.

get_node_info

Inspect details of a single element.

get_nodes_info

Inspect multiple elements in a batch.

scan_text_nodes

Find all text nodes for auditing or updates.

get_styles

Query document styles such as colors and typography.

join_channel

Establish a communication channel between the AI client and Figma.

export_node_as_image

Export a node or selection as an image asset.

create_rectangle

Create a basic rectangle shape.

create_frame

Create a frame to act as a layout container.

create_text

Create a text element with styling.

create_ellipse

Create an ellipse or circle.

create_polygon

Create a polygon shape with multiple points.

create_star

Create a star shape for decorative elements.

clone_node

Duplicate an existing element.

group_nodes

Group multiple elements together.

ungroup_nodes

Break apart a group into its components.

insert_child

Nest an element inside another container.

flatten_node

Perform vector operations to flatten shapes.

set_fill_color

Apply fill color to an element.

set_stroke_color

Apply stroke color to an element.

move_node

Change the position of an element.

resize_node

Resize an element with precise dimensions.

delete_node

Remove an element from the canvas.

set_corner_radius

Apply corner radius to shapes.

set_auto_layout

Configure auto layout behavior for dynamic layouts.

set_effects

Add visual effects like shadows or blur.

set_effect_style_id

Apply a predefined effect style to keep visuals consistent.

set_text_content

Update the text content of an element.

set_multiple_text_contents

Update multiple text elements in one operation.

set_font_name

Change the font family of text.

set_font_size

Change the font size of text.

set_font_weight

Change font weight (bold, regular, etc.).

set_letter_spacing

Adjust character spacing for typography.

set_line_height

Adjust line height for text readability.

set_paragraph_spacing

Set vertical spacing between paragraphs.

set_text_case

Transform text case (uppercase, lowercase, title case).

set_text_decoration

Apply text decorations such as underline or strikethrough.

get_styled_text_segments

Retrieve styled segments of rich text.

load_font_async

Load a font asynchronously if not already available.

get_local_components

List local components in the document.

get_remote_components

List components from team libraries.

create_component_instance

Create an instance of a component for reuse.