CC Fig

You can bridge Claude Code with Figma through a bidirectional MCP server that syncs design data in real time. This MCP server runs a local process that speaks the MCP protocol over a WebSocket relay, enabling Claude Code to send and receive Figma actions and document information directly from your Figma projects.

How to use

Once you have the MCP server running, you connect Claude Code to it and join a channel named after your Figma project to enable real-time design collaboration. Use the provided tool set to create, query, and modify Figma nodes, frames, components, and styles from Claude Code, and see updates reflected back in Figma. You can join a channel, fetch document details, create shapes, update text, move and resize nodes, export assets, and manage styles and components.

How to install

Prerequisites you need before installing the MCP server are listed below. Ensure you have Node.js 18 or newer, Docker and Docker Compose, pnpm, and Figma Desktop installed. You will also work with a local project directory to run the MCP components.

# Prerequisites (check you have these versions)
node -v
docker --version
pnpm -v
figma --version

Build from source and run the relay

Clone the MCP server repository, install dependencies, and build the server. Then you run the WebSocket relay inside Docker to expose the MCP endpoint on a local port.

# Build steps
git clone https://github.com/agenisea/cc-fig-mcp.git
cd cc-fig-mcp
pnpm install
pnpm run build

# Start the relay using Docker
cd /path/to/cc-fig-mcp

# Build and start the relay server
docker-compose up -d --build

# Verify it's running
curl http://localhost:3055/status

Configure Claude Code to use the MCP server

Choose one of these configuration options to point Claude Code at your local MCP server. The MCP server runs a local process via Node and exposes the server at port 3055 through the Docker relay.

# Option A: CLI flag (direct intent to run the MCP server)
claude --mcp-config '{"figma":{"command":"node","args":["/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"]}}'

# Option B: Edit Claude's config file to include the MCP server
{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": [
        "/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"
      ]
    }
  }
}

Install the Figma plugin and connect

Install the Figma plugin that talks to the MCP server and connect it to your Figma project. You will provide the port 3055 and use your Figma project name as the channel.

# In Figma Desktop:
Plugins → Development → Import plugin from manifest
# Select the manifest.json path provided by the MCP server

# Connect the plugin:
Plugins → CC Fig MCP Plugin
Set Port: 3055
Set Channel: your-figma-project-name
Click Connect
Status should show green/connected

Use in Claude Code with Figma project

Join the same channel from Claude Code as your Figma project name. You can then issue commands to create and modify shapes, text, frames, and components directly in Figma from Claude Code.

# Join the channel corresponding to your Figma project name
figma - join_channel("your-figma-project-name")

# Example actions you can perform
figma - create_rectangle(x: 0, y: 0, width: 100, height: 100)
figma - create_text(x: 50, y: 50, text: "Hello")

Important notes

• Keep the Docker relay running on the designated port (3055 by default). If you see port conflicts, adjust the external port in the Docker configuration and align the Figma plugin port accordingly.

• Ensure the Figma plugin window remains open and visible while you work for a stable connection.

• If you encounter timeouts or disconnections, reconnect the plugin and re-join the Claude Code channel.

Troubleshooting

• Forwarded message to 0 clients: Reconnect the Figma plugin in Figma.

• Request timed out: Ensure the plugin is connected and the channel name matches exactly.

• Must join a channel: Run join_channel("your-figma-project-name") in Claude Code first.

• Port 3055 in use: Change the external port in docker-compose.yml to a different value and update the Figma plugin port to match.

• Connection drops frequently: Keep the plugin panel visible to prevent disconnections when focus shifts.

Architecture

Claude Code communicates with the MCP server using stdio MCP protocol, the MCP server runs as a Node process, and the WebSocket relay inside the Docker container routes traffic to the Figma Plugin inside Figma Desktop.

Available tools

join_channel

Connect to a Figma project channel from Claude Code to synchronize actions with the corresponding Figma project.

get_document_info

Retrieve details of the current Figma document, including pages, frames, and metadata.

get_selection

Obtain information about the nodes currently selected in the Figma document.

get_node_info

Fetch detailed information about a specific node by ID.

create_frame

Create a new frame or artboard in the document.

create_rectangle

Create a rectangle shape at a given position with specified size.

create_text

Create a text node at a position with specified content.

create_ellipse

Create an ellipse shape with given bounds.

create_polygon

Create a polygon with defined vertices.

create_star

Create a star shape with defined parameters.

create_line

Draw a line between two points.

create_component_instance

Create an instance of a local component.

set_fill_color

Apply fill color to a node.

set_stroke_color

Apply stroke color to a node.

set_corner_radius

Set corner radius for a shape.

set_text_content

Update the text content of a text node.

set_font_size

Change the font size of text.

set_font_weight

Change the font weight of text.

set_auto_layout

Configure auto layout for a container.

move_node

Move a node to a new position.

resize_node

Resize a node to new dimensions.

clone_node

Duplicate a node.

delete_node

Delete a node from the document.

group_nodes

Group multiple nodes together.

ungroup_nodes

Ungroup nodes from a group.

export_node_as_image

Export a node as PNG or SVG.

get_styles

Retrieve document styles from the project.

get_local_components

List local components available in the document.