Figma Copilot

You can run a dedicated MCP server that lets AI assistants interact with Figma designs through a stable, bidirectional protocol. This server handles design operations, text workflows, component manipulations, and batch actions, enabling automation and advanced design tasks across MCP-enabled clients.

How to use

To use this MCP server, first ensure your MCP client can connect via the WebSocket-backed channel, then start the server components and install the Figma plugin. After joining a channel from your MCP client, you can send commands to inspect documents, read or update text with formatting preservation, create and layout elements, and perform batch operations across multiple nodes.

How to install

Prerequisites you need before installation: a command-line environment and a runtime to execute the MCP server. The server uses Bun to run its tooling, so you should have Bun installed on your system.

curl -fsSL https://bun.sh/install | bash

Set up the MCP environment and initialize the server runtime.

bun setup

Start the WebSocket server which enables communication between the MCP server and the Figma plugin.

bun socket

Start the MCP server component that exposes the Figma Copilot MCP endpoints.

bunx figma-copilot

Install the Figma plugin to enable integration with the MCP server. You can install it from the Figma community or load it locally using the provided plugin manifest.

Configuration and connection

Configure your MCP client to connect to the local MCP server. Here is a sample configuration for an MCP client to connect via a local stdio server.

{
  "mcpServers": {
    "figma_copilot": {
      "command": "bunx",
      "args": ["figma-copilot@latest"]
    }
  }
}

MCP Tools overview

The server provides a broad set of tools to interact with Figma documents, nodes, text, layouts, annotations, components, and batch operations. Use these tools to query documents, read or modify nodes, apply styles, create elements, and perform bulk actions efficiently.

Best practices

• Always join a channel before sending commands. - Use get_document_info to get an overview before making changes. - Check current context with get_current_context prior to modifications. - Prefer batch operations for large updates to minimize round trips. - Verify results with targeted reads, such as get_node_info, after changes. - When handling text, preserve formatting where possible and use bulk updates for efficiency.

Troubleshooting

If you encounter timeouts during large scans, adjust scan_nodes_with_options for deeper control and partial results. Review error messages for actionable guidance and consider dividing large tasks into smaller batches.

Notes

This MCP server supports integration with a Figma plugin and is designed for compatibility with MCP clients like Cursor and Claude Desktop. It emphasizes enhanced text operations, batch processing, and robust error handling to streamline design automation.

Available tools

get_document_info

Get information about the current Figma document

get_current_context

Get comprehensive context including selection, focused slide (if in Slides mode), and optionally document info

read_my_design

Get detailed node information about the current selection without parameters

get_nodes

Get detailed information about one or more nodes (accepts single ID or array)

get_annotations

Get all annotations in the current document or specific node

set_annotation

Create or update an annotation with markdown support

set_multiple_annotations

Batch create/update multiple annotations efficiently

scan_nodes_by_types

Scan for nodes with specific types (useful for finding annotation targets)

get_reactions

Get all prototype reactions from nodes with visual highlight animation

set_default_connector

Set a copied FigJam connector as the default connector style for creating connections

create_connections

Create FigJam connector lines between nodes based on prototype flows or mappings

create_rectangle

Create a new rectangle with position, size, and optional name

create_frame

Create a new frame with position, size, and optional name

create_text

Create a new text node with customizable font properties

update_text_preserve_formatting

Update text while preserving all character formatting (bold, italic, colors, fonts)

smart_text_replace

Find and replace text while preserving formatting of unchanged portions

set_multiple_text_contents_with_styles

Batch update text with formatting in a single operation

set_text_style_range

Apply text styling to specific character ranges

get_text_style_range

Get text styling for a specific range

set_text_decoration_range

Set advanced text decoration properties

get_text_decoration_range

Get text decoration properties for a range

set_range_font

Change font family and style for a text range

set_range_font_size

Change font size for a text range

set_range_fills

Set text color for a specific range

get_styled_text_segments

Get detailed information about text segments and their properties

set_component_description

Set component description using Markdown

get_component_description

Get component description in Markdown format

normalize_markdown

Normalize Markdown text to Figma's supported subset

set_layout_mode

Set the layout mode and wrap behavior of a frame

set_padding

Set padding values for an auto-layout frame

set_axis_align

Set primary and counter axis alignment for auto-layout frames

set_layout_sizing

Set horizontal and vertical sizing modes for auto-layout frames

set_item_spacing

Set distance between children in an auto-layout frame

set_fill_color

Set the fill color of a node

set_stroke_color

Set the stroke color and weight of a node

set_corner_radius

Set the corner radius of a node with per-corner control

move_node

Move a node to a new position

resize_node

Resize a node with new dimensions

delete_node

Delete a node

delete_multiple_nodes

Delete multiple nodes at once efficiently

clone_node

Create a copy of an existing node with optional position offset

clone_multiple_nodes

Clone a node to multiple positions in one operation

get_styles

Get information about local styles

get_local_components

Get information about local components

create_component_instance

Create an instance of a component

get_instance_overrides

Extract override properties from a selected component instance

set_instance_overrides

Apply extracted overrides to target instances

extract_slide_content

Extract all content from a Figma slide including text, tables, and optionally images

get_presentation_summary

Generate an overview of a Figma presentation including slide count, slide titles, and an outline

get_table_data

Extract data from a Figma table node in various formats

export_node_as_image

Export a node as an image in various formats

join_channel

Join a specific channel to communicate with Figma