Figma Copilot

A Model Context Protocol (MCP) server that enables AI assistants to interact with Figma designs programmatically. Compatible with any MCP client including Cursor, Claude Desktop, and other MCP-enabled applications. Features advanced text handling, batch operations, and comprehensive design automation capabilities.

This project is based oncursor-talk-to-figma-mcpby Sonny Lazuardi.

- Text Formatting Preservation- Text updates no longer lose formatting (bold, italic, colors, fonts). SeeEnhanced Text Operations Guide.
- Batch Operations- 50-90% performance improvement for bulk operations. SeeBatch Operations Guide.
- Enhanced Error Handling- Specific, actionable error messages with suggestions
- Timeout Solutions- New scanning options with depth control and partial results
- Smart Text Operations- Find/replace with formatting preservation

- Fixed "Cannot unwrap symbol" errorwhen working with mixed fonts. SeeFont Handling Documentation.
- Improved font loadingwithgetRangeAllFontNames()API
- Better error handlingwithPromise.allSettled()for font loading
- Safe value returnsto avoid serialization issues
- Enhanced loggingfor debugging font issues

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

- NEWInstall Figma plugin fromFigma community pageorinstall locally

Thanks to@dusskaparkfor contributing the bulk text replacement feature.

Instance Override PropagationAnother contribution from@dusskaparkPropagate component instance overrides from a source instance to multiple target instances with a single command. This feature dramatically reduces repetitive design work when working with component instances that need similar customizations.

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

- In Figma, go to Plugins > Development > New Plugin
- Choose "Link existing plugin"
- Select thesrc/figma_copilot_plugin/manifest.jsonfile
- The plugin should now be available in your Figma development plugins

powershell -c "irm bun.sh/install.ps1|iex"

- Uncomment the hostname0.0.0.0insrc/socket.ts

// uncomment this to allow connections in windows wsl hostname: "0.0.0.0",

- Start the WebSocket server
- Install the MCP server in your MCP client
- Open Figma and run the Figma Copilot Plugin
- Connect the plugin to the WebSocket server by joining a channel usingjoin_channel
- Use your MCP client to communicate with Figma using the MCP tools

The MCP server provides the following tools for interacting with Figma:

- 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
- get_selection-DEPRECATED: Useget_current_contextinstead
- 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_node_info-DEPRECATED: Useget_nodeswith single node ID instead
- get_nodes_info-DEPRECATED: Useget_nodeswith array of node IDs instead
- get_focused_slide-DEPRECATED: Useget_current_contextwith includeSlideDetails option
- get_slides_mode-DEPRECATED: Useget_current_contextwith includeSlideDetails option

- 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 (must be set before creating connections)
- create_connections- Create FigJam connector lines between nodes, based on prototype flows or custom mapping

- 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

- scan_text_nodes-DEPRECATED: Usescan_nodes_with_optionswithnodeTypes: ['TEXT']instead
- scan_nodes_with_options- Enhanced scanning with depth control, timeout handling, and partial results
- set_text_content- Set the text content of a single text node (Note: loses formatting)
- set_multiple_text_contents- Batch update multiple text nodes efficiently (Note: loses formatting)

Text with Formatting Preservation (v0.3.2)

SeeEnhanced Text Operations Guidefor an overview.

See[Text Styling Guidefor detailed usage.

- set_text_style_range- Apply text styling (bold, italic, underline, strikethrough) 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 (NONE, HORIZONTAL, VERTICAL)
- set_padding- Set padding values for an auto-layout frame (top, right, bottom, left)
- 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 (FIXED, HUG, FILL)
- set_item_spacing- Set distance between children in an auto-layout frame

…