Skip to main content
Glama
Sign In
CC Fig MCP

CC Fig MCP

by agenisea
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

CC Fig MCP

Figma integration for Claude Code with bidirectional design control and real-time sync.

Based on claude-talk-to-figma-mcp-daisyui by morteng and claude-talk-to-figma-mcp by arinspunk.

Prerequisites

  • Node.js 18+

  • Docker & Docker Compose

  • pnpm

  • Figma Desktop

Related MCP server: Claude Talk to Figma MCP

Build from Source

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

Setup Guide

1. Run the WebSocket Relay (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

2. Configure Claude Code

Option A: CLI Flag

claude --mcp-config '{"figma":{"command":"node","args":["/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"]}}'

Option B: Edit ~/.claude.json

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": [
        "/path/to/cc-fig-mcp/dist/talk_to_figma_mcp/server.js"
      ]
    }
  }
}

3. Install Figma Plugin

  1. Open Figma Desktop

  2. Go to Plugins → Development → Import plugin from manifest

  3. Select: /path/to/cc-fig-mcp/src/claude_mcp_plugin/manifest.json

4. Connect Figma Plugin

  1. In Figma, open Plugins → CC Fig MCP Plugin

  2. Set Port: 3055

  3. Set Channel: Your Figma project name (e.g., my-app-design, dashboard-ui)

  4. Click Connect

  5. Status must show green/connected

5. Use in Claude Code

# Join the same channel as your Figma plugin (your Figma project name)
figma - join_channel("your-figma-project-name")

# Now you can use Figma tools
figma - create_rectangle(x: 0, y: 0, width: 100, height: 100)
figma - create_text(x: 50, y: 50, text: "Hello")

Available Tools

Tool

Description

join_channel

Connect to a Figma project channel

get_document_info

Get current document details

get_selection

Get selected nodes

get_node_info

Get details about specific nodes

create_frame

Create a frame/artboard

create_rectangle

Create a rectangle

create_text

Create text element

create_ellipse

Create an ellipse

create_polygon

Create a polygon

create_star

Create a star shape

create_line

Create a line

create_component_instance

Create instance of a component

set_fill_color

Change fill color

set_stroke_color

Change stroke color

set_corner_radius

Set corner radius

set_text_content

Update text content

set_font_size

Change font size

set_font_weight

Change font weight

set_auto_layout

Configure auto layout

move_node

Move a node

resize_node

Resize a node

clone_node

Duplicate a node

delete_node

Delete a node

group_nodes

Group nodes together

ungroup_nodes

Ungroup nodes

export_node_as_image

Export node as PNG/SVG

get_styles

Get document styles

get_local_components

Get local components

Important Requirements

Requirement

Details

Docker running

WebSocket relay must be up on port 3055

Plugin window open

Keep the Figma plugin window visible

Connection green

Plugin must show connected status

Same channel

Use your Figma project name as the channel in both Figma plugin and Claude Code

Reconnect if needed

If you see timeouts, reconnect the plugin and re-join channel in Claude Code

Troubleshooting

"Forwarded message to 0 clients"

Figma plugin disconnected. Reconnect in Figma.

"Request timed out"

Plugin not connected or wrong channel. Check plugin status and channel name matches.

"Must join a channel"

Run join_channel("your-figma-project-name") in Claude Code first.

Port 3055 already in use

Change the port in docker-compose.yml:

ports:
  - "3056:3055"  # Use 3056 externally

Then update the Figma plugin port to match.

Connection drops frequently

The Figma plugin may disconnect when the plugin window loses focus. Keep the plugin panel visible while working.

Architecture

Claude Code
    ↓ (stdio - MCP protocol)
MCP Server (server.js)
    ↓ (WebSocket ws://localhost:3055)
Docker Container (socket relay)
    ↓ (WebSocket)
Figma Plugin (inside Figma Desktop)

Disclaimer

Experimental Software: This project is in active development and should be considered experimental. It is not production-ready and may contain bugs or breaking changes.

No Warranty: This software is provided "as is", without warranty of any kind, express or implied. Use at your own risk.

Third-Party Notice: This project is not affiliated with, endorsed by, or sponsored by Figma, Inc. or Anthropic, PBC. All trademarks belong to their respective owners.

License

MIT

Available Tools

50 tools
clear_variable_bindingA

Remove a variable binding from a node property, reverting to the static value.

Inputs: nodeId (required), field (required).

clone_nodeB

Clone an existing node in Figma

Inputs: nodeId (required), x, y.

create_component_instanceC

Create an instance of a component in Figma

Inputs: componentKey (required), x (required), y (required).

create_ellipseC

Create a new ellipse in Figma

Inputs: x (required), y (required), width (required), height (required), +5 more.

create_frameC

Create a new frame in Figma

Inputs: x (required), y (required), width (required), height (required), +5 more.

create_polygonC

Create a new polygon in Figma

Inputs: x (required), y (required), width (required), height (required), +6 more.

create_rectangleB

Create a new rectangle in Figma

Inputs: x (required), y (required), width (required), height (required), +2 more.

create_starC

Create a new star in Figma

Inputs: x (required), y (required), width (required), height (required), +7 more.

create_textC

Create a new text element in Figma

Inputs: x (required), y (required), text (required), fontSize, +4 more.

delete_nodeC

Delete a node from Figma

Inputs: nodeId (required).

export_node_as_imageB

Export a node as an image from Figma

Inputs: nodeId (required), format, scale.

flatten_nodeC

Flatten a node in Figma (e.g., for boolean operations or converting to path)

Inputs: nodeId (required).

get_bound_variablesB

Get all variable bindings for a node. Shows which variables are bound to fills, strokes, and other properties.

Inputs: nodeId (required).

get_local_componentsA

Get all local components from the Figma document

Inputs: no named parameters.

get_node_infoB

Get detailed information about a specific node in Figma

Inputs: nodeId (required).

get_nodes_infoA

Get detailed information about multiple nodes in Figma

Inputs: nodeIds (required).

get_remote_componentsA

Get available components from team libraries in Figma

Inputs: no named parameters.

get_selectionB

Get information about the current selection in Figma

Inputs: no named parameters.

get_styled_text_segmentsC

Get text segments with specific styling in a text node

Inputs: nodeId (required), property (required).

get_stylesA

Get all styles from the current Figma document

Inputs: no named parameters.

group_nodesC

Group nodes in Figma

Inputs: nodeIds (required), name.

insert_childC

Insert a child node inside a parent node in Figma

Inputs: parentId (required), childId (required), index.

join_channelB

Join a specific channel to communicate with Figma

Inputs: channel.

load_font_asyncC

Load a font asynchronously in Figma

Inputs: family (required), style.

move_nodeA

Move a node to a new position in Figma

Inputs: nodeId (required), x (required), y (required).

resize_nodeC

Resize a node in Figma

Inputs: nodeId (required), width (required), height (required).

resolve_variable_by_nameB

Find a variable ID by its name. Useful for binding variables when you know the semantic name (e.g., 'base-100', 'primary').

Inputs: name (required), collectionName.

scan_text_nodesB

Scan all text nodes in the selected Figma node

Inputs: nodeId (required).

set_auto_layoutC

Configure auto layout properties for a node in Figma

Inputs: nodeId (required), layoutMode (required), paddingTop, paddingBottom, +7 more.

set_corner_radiusA

Set the corner radius of a node in Figma

Inputs: nodeId (required), radius (required), corners.

set_effectsC

Set the visual effects of a node in Figma

Inputs: nodeId (required), effects (required).

set_effect_style_idC

Apply an effect style to a node in Figma

Inputs: nodeId (required), effectStyleId (required).

set_fill_colorA

Set the fill color of a node in Figma. Alpha component defaults to 1 (fully opaque) if not specified. Use alpha 0 for fully transparent.

Inputs: nodeId (required), r (required), g (required), b (required), +1 more.

set_fill_style_idA

Apply a fill style to a node in Figma. Use get_styles to find available fill style IDs.

Inputs: nodeId (required), fillStyleId (required).

set_fill_variableA

Bind a color variable to a node's fill. Use this for theme-compatible colors instead of hardcoded RGB values.

Inputs: nodeId (required), variableId (required), fillIndex.

set_font_nameB

Set the font name and style of a text node in Figma

Inputs: nodeId (required), family (required), style.

set_font_sizeB

Set the font size of a text node in Figma

Inputs: nodeId (required), fontSize (required).

set_font_weightC

Set the font weight of a text node in Figma

Inputs: nodeId (required), weight (required).

set_letter_spacingC

Set the letter spacing of a text node in Figma

Inputs: nodeId (required), letterSpacing (required), unit.

set_line_heightC

Set the line height of a text node in Figma

Inputs: nodeId (required), lineHeight (required), unit.

set_multiple_text_contentsC

Set multiple text contents parallelly in a node

Inputs: nodeId (required), text (required).

set_paragraph_spacingB

Set the paragraph spacing of a text node in Figma

Inputs: nodeId (required), paragraphSpacing (required).

set_stroke_colorC

Set the stroke color of a node in Figma (defaults: opacity 1, weight 1)

Inputs: nodeId (required), r (required), g (required), b (required), +2 more.

set_stroke_style_idB

Apply a stroke style to a node in Figma. Use get_styles to find available stroke style IDs.

Inputs: nodeId (required), strokeStyleId (required).

set_stroke_variableB

Bind a color variable to a node's stroke. Use this for theme-compatible border colors.

Inputs: nodeId (required), variableId (required), strokeIndex.

set_text_caseC

Set the text case of a text node in Figma

Inputs: nodeId (required), textCase (required).

set_text_contentA

Set the text content of an existing text node in Figma

Inputs: nodeId (required), text (required).

set_text_decorationC

Set the text decoration of a text node in Figma

Inputs: nodeId (required), textDecoration (required).

set_text_style_idA

Apply a text style to a text node in Figma. Use get_styles to find available text style IDs.

Inputs: nodeId (required), textStyleId (required).

ungroup_nodesC

Ungroup nodes in Figma

Inputs: nodeId (required).

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    B3.3/5.0

    Scored across 50 tools

    Disambiguation4/5

    Most tools have distinct purposes targeting specific Figma operations like shape creation, styling, or node management, with clear boundaries. However, some overlap exists, such as set_fill_color, set_fill_style_id, and set_fill_variable, which could cause confusion about when to use each for fill operations, though descriptions help clarify their differences.

    Naming Consistency5/5

    Tool names follow a highly consistent verb_noun pattern throughout, such as create_rectangle, get_node_info, and set_font_size. This predictability makes it easy for agents to understand and select tools based on their intended actions and targets in the Figma domain.

    Tool Count2/5

    With 50 tools, the count is excessive for a typical MCP server, leading to cognitive overload and potential inefficiency. While Figma is a complex domain, this many tools suggests over-fragmentation of operations, such as having multiple separate tools for text styling (e.g., set_font_size, set_font_weight) that could be consolidated.

    Completeness5/5

    The tool set provides comprehensive coverage of Figma operations, including CRUD for nodes (create, delete, move, resize), styling (fills, strokes, effects, text properties), component management, variable handling, and utilities like export and grouping. No obvious gaps are present for core design workflows in the domain.

    Maintenance

    ActivityNo data
    ResponsivenessOutdated data

    Resources

    Related MCP Connectors

    Related MCP Servers