Skip to main content
Glama
Sign In
TalkToFigma

TalkToFigma

by ManuelXI
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

figma-write-bridge

Write to Figma from Claude Code (or any MCP client) without a Figma Dev/Full seat.

This is a fork of cursor-talk-to-figma-mcp by Sonny Lazuardi (MIT). The original architecture is unchanged: a local WebSocket relay, a Figma dev plugin that runs inside the desktop app, and an MCP server that talks to the plugin through the relay. Dev plugins run on every Figma plan, so this works where the official Figma MCP's write-to-canvas does not.

What this fork adds

Two plugin commands in src/cursor_mcp_plugin/code.js:

Command

Params

Purpose

recolor_tree

nodeId, textFills, shapeFills, strokes, skipNames, keepWhiteShapes

Walk a node's subtree and remap solid fills and strokes by hex colour. Text and shapes use separate maps. Returns counts plus the colours that had no mapping. Used to generate a dark-mode page from light-mode frames in one call per frame.

move_to_page

nodeId, pageId, x, y, name

Move a node to another page (loads the page first), then position and rename it.

These are not exposed through the MCP server. They are driven directly over the relay with the scripts in bonarda-tools/, which also sidesteps the MCP client's per-turn call limits.

Script

What it does

bonarda-tools/start-relay.sh

Starts the relay on port 3055 if it is not already running.

bonarda-tools/figma-cmd.ts

One-shot command sender: bun figma-cmd.ts <channel> <command> '<json>'. Works for any plugin command, including the two above.

bonarda-tools/dark-sync.ts

Clones light-mode frames to a dark-mode page and recolours them with a light-to-dark colour map. Edit the FRAMES table and MAPS for your own file.

Related MCP server: figma-bridge

Setup

  1. Install Bun, then in this folder run bun install.

  2. Start the relay: bonarda-tools/start-relay.sh.

  3. In the Figma desktop app: Plugins, Development, Import plugin from manifest, and pick src/cursor_mcp_plugin/manifest.json. Run the plugin; it shows a channel ID.

  4. Register the MCP server with your client. For Claude Code:

    claude mcp add --scope user TalkToFigma -- bun run /absolute/path/to/figma-write-bridge/dist/server.js

  5. In your session, call join_channel with the channel ID from step 3. Keep the plugin panel open while working.

To use the custom commands directly:

bun bonarda-tools/figma-cmd.ts <channel> recolor_tree '{"nodeId":"1:2","textFills":{"#000000":"#e9f4f9"},"shapeFills":{"#ffffff":"#14191c"},"strokes":{}}'

Notes

  • The upstream Google Analytics usage tracking has been removed. The plugin only talks to localhost:3055.

  • Rerun the plugin after editing code.js; Figma loads dev plugin code at run time.

  • dist/ is committed so the MCP server runs without a build step. Rebuild with bun run build after changing src/talk_to_figma_mcp/server.ts.

  • Batching: an MCP client may cap how many tool calls run per turn. For bulk work, prefer the relay scripts.

License

MIT, same as upstream. See LICENSE.

Available Tools

44 tools
clone_nodeC

Clone an existing node in Figma

Inputs: nodeId (required), x, y.

create_component_instanceA

Create an instance of a component in Figma. For LOCAL components (from get_local_components), use componentId with the id field. For published LIBRARY components, use componentKey with the publishedKey field.

Inputs: x (required), y (required), parentId, componentId, +1 more.

create_connectionsB

Create connections between nodes using the default connector style

Inputs: connections (required).

create_frameC

Create a new frame in Figma

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

create_rectangleC

Create a new rectangle in Figma

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

create_sectionC

Create a section in Figma to group related content on the canvas

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

create_textC

Create a new text element in Figma

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

delete_multiple_nodesB

Delete multiple nodes from Figma at once

Inputs: nodeIds (required).

delete_nodeC

Delete a node from Figma

Inputs: nodeId (required).

export_node_as_imageC

Export a node as an image from Figma

Inputs: nodeId (required), scale, format.

get_annotationsB

Get all annotations in the current document or specific node

Inputs: nodeId (required), includeCategories.

get_document_infoA

Get detailed information about the current Figma document

Inputs: no named parameters.

get_instance_overridesA

Get all override properties from a selected component instance. These overrides can be applied to other instances, which will swap them to match the source component.

Inputs: nodeId.

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_infoC

Get detailed information about multiple nodes in Figma

Inputs: nodeIds (required).

get_reactionsA

Get Figma Prototyping Reactions from multiple nodes. CRITICAL: The output MUST be processed using the 'reaction_to_connector_strategy' prompt IMMEDIATELY to generate parameters for connector lines via the 'create_connections' tool.

Inputs: nodeIds (required).

get_selectionB

Get information about the current selection in Figma

Inputs: no named parameters.

get_stylesA

Get all styles from the current Figma document

Inputs: no named parameters.

join_channelC

Join a specific channel to communicate with Figma

Inputs: channel.

move_nodeC

Move a node to a new position in Figma

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

read_my_designA

Get detailed information about the current selection in Figma, including all node details

Inputs: no named parameters.

rename_nodeA

Rename a node in Figma

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

resize_nodeC

Resize a node in Figma

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

scan_nodes_by_typesC

Scan for child nodes with specific types in the selected Figma node

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

scan_text_nodesC

Scan all text nodes in the selected Figma node

Inputs: nodeId (required).

set_annotationB

Create or update an annotation

Inputs: nodeId (required), labelMarkdown (required), categoryId, properties, +1 more.

set_axis_alignA

Set primary and counter axis alignment for an auto-layout frame in Figma

Inputs: nodeId (required), counterAxisAlignItems, primaryAxisAlignItems.

set_corner_radiusA

Set the corner radius of a node in Figma

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

set_default_connectorB

Set a copied connector node as the default connector

Inputs: connectorId.

set_fill_colorC

Set the fill color of a node in Figma can be TextNode or FrameNode

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

set_focusA

Set focus on a specific node in Figma by selecting it and scrolling viewport to it

Inputs: nodeId (required).

set_image_fillA

Fill a node in Figma with an image from a local file path, a URL, or base64 data (replaces the node's existing fills)

Inputs: nodeId (required), imageUrl, imagePath, scaleMode, +1 more.

set_instance_overridesA

Apply previously copied overrides to selected component instances. Target instances will be swapped to the source component and all copied override properties will be applied.

Inputs: targetNodeIds (required), sourceInstanceId (required).

set_item_spacingA

Set distance between children in an auto-layout frame

Inputs: nodeId (required), itemSpacing, counterAxisSpacing.

set_layout_modeB

Set the layout mode and wrap behavior of a frame in Figma

Inputs: nodeId (required), layoutMode (required), layoutWrap.

set_layout_sizingA

Set horizontal and vertical sizing modes for an auto-layout frame in Figma

Inputs: nodeId (required), layoutSizingVertical, layoutSizingHorizontal.

set_multiple_annotationsC

Set multiple annotations parallelly in a node

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

set_multiple_text_contentsB

Set multiple text contents parallelly in a node

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

set_paddingB

Set padding values for an auto-layout frame in Figma

Inputs: nodeId (required), paddingTop, paddingLeft, paddingRight, +1 more.

set_parentA

Move a node into a new parent node (e.g. a section, frame or group). Preserves the node's absolute position unless x/y are provided

Inputs: nodeId (required), parentId (required), x, y, +1 more.

set_selectionsA

Set selection to multiple nodes in Figma and scroll viewport to show them

Inputs: nodeIds (required).

set_stroke_colorB

Set the stroke color of a node in Figma

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

set_text_contentA

Set the text content of an existing text node in Figma

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

Tool Schema Changelog

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

Loading tool schema changelog…

    Deploy Server
    One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

    TDQS

    B3.1/5.0

    Scored across 44 tools

    Disambiguation4/5

    Most tools have clear, distinct purposes. The main confusion is between get_selection and read_my_design, which both describe retrieving current selection information, and scan_text_nodes could overlap somewhat with scan_nodes_by_types.

    Naming Consistency4/5

    The naming mostly follows a predictable verb_noun snake_case pattern (create_, get_, set_, scan_). Minor inconsistencies like read_my_design instead of get_selection_detailed and the out-of-place join_channel prevent a perfect score.

    Tool Count2/5

    44 tools is far beyond the typical well-scoped surface for a server, making it feel heavy and harder for agents to navigate. Many tools are batch variants (e.g., set_text_content vs. set_multiple_text_contents) that add surface area without adding much conceptual value.

    Completeness4/5

    The tool surface covers the core design workflow well: node manipulation, selection, layout, components, annotations, and image handling. Minor gaps exist, such as no tools for creating or editing styles and limited shape creation (only rectangle, frame, and text).

    Maintenance

    ActivityStale
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    • MC Figma Bridge

      mochammad123
      A
      license
      B
      quality
      D
      maintenance
      Enables Cursor (MCP client) to interact with an active Figma document through a local WebSocket bridge and Figma plugin, providing tools to read and modify canvas elements like text and frames.
      6
      ISC

    • figma-agent-mcp

      ChinaCarlos
      A
      license
      Not graded
      quality
      C
      maintenance
      Connects AI agents to Figma through a local WebSocket bridge, enabling read/write access to open Figma files, node manipulation, and AI-assisted rename/group features.
      6
      MIT

    • OneWright

      heyxiaoze
      A
      license
      Not graded
      quality
      A
      maintenance
      Enables AI agents to read and write Figma designs through a local WebSocket relay, turning Figma selections into framework-aware code and building/editing designs directly on the canvas. Provides 112 MCP tools for bidirectional design-code workflows with support for any MCP client.
      MIT