Enables programmatic interaction with Figma designs, providing tools for reading document structure, manipulating nodes, updating text with formatting preservation, managing auto-layout properties, creating connections and prototypes, handling annotations, and performing batch operations for design automation.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Figma Copilot replace all placeholder text in the selected frames with our new brand copy"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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 on cursor-talk-to-figma-mcp by Sonny Lazuardi.
Related MCP server: MCP Figma
This is an independent project and is not affiliated with, officially maintained, authorized, endorsed, or sponsored by Figma, Inc. All product and company names are trademarks™ or registered® trademarks of their respective holders.
Text Formatting Preservation - Text updates no longer lose formatting (bold, italic, colors, fonts). See Enhanced Text Operations Guide.
Batch Operations - 50-90% performance improvement for bulk operations. See Batch 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" error when working with mixed fonts. See Font Handling Documentation.
Improved font loading with getRangeAllFontNames() API
Better error handling with Promise.allSettled() for font loading
Safe value returns to avoid serialization issues
Enhanced logging for debugging font issues
src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration
src/figma_copilot_plugin/ - Figma plugin for communicating with MCP clients
src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin
Install Bun if you haven't already:
curl -fsSL https://bun.sh/install | bashRun setup to configure MCP
bun setupStart the Websocket server
bun socketMCP server
bunx figma-copilotNEW Install Figma plugin from Figma community page or install locally
Video tutorials coming soon!
Bulk text content replacement
Thanks to @dusskapark for contributing the bulk text replacement feature.
Instance Override Propagation Another contribution from @dusskapark Propagate 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.
Based on real production usage with bulk infographic creation:
Operation | Before v0.3.2 | After v0.3.2 | Improvement |
Clone 20 nodes | 50 seconds | 5 seconds | 90% faster |
Update 112 text nodes | 15 minutes | 30 seconds | 96% faster |
Scan large document | Timeout after 30s | 3 seconds | No timeouts |
Text + formatting update | 2 separate calls | 1 combined call | 50% fewer API calls |
Add the server to your MCP client configuration. For example, in Cursor's ~/.cursor/mcp.json or Claude Desktop's configuration:
{
"mcpServers": {
"figma-copilot": {
"command": "bunx",
"args": ["figma-copilot@latest"]
}
}
}Start the WebSocket server:
bun socketIn Figma, go to Plugins > Development > New Plugin
Choose "Link existing plugin"
Select the src/figma_copilot_plugin/manifest.json file
The plugin should now be available in your Figma development plugins
Install bun via powershell
powershell -c "irm bun.sh/install.ps1|iex"Uncomment the hostname 0.0.0.0 in src/socket.ts
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",Start the websocket
bun socketStart 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 using join_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_selectionget_current_context instead
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_infoget_nodes with single node ID instead
get_nodes_infoget_nodes with array of node IDs instead
get_focused_slideget_current_context with includeSlideDetails option
get_slides_modeget_current_context with 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_nodesscan_nodes_with_options with nodeTypes: ['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)
See Enhanced Text Operations Guide for an overview.
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
See Text Styling Guide for 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
set_fill_color - Set the fill color of a node (RGBA)
set_stroke_color - Set the stroke color and weight of a node
set_corner_radius - Set the corner radius of a node with optional 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
See Batch Operations Guide for best practices.
clone_multiple_nodes - Clone a node to multiple positions in one operation (50-90% faster than individual clones)
get_multiple_nodes_infoget_nodes with array of node IDs instead
set_multiple_nodes_property - Set the same property value on multiple nodes at once
execute_batch - Execute multiple different commands in sequence with a single round-trip
get_connection_status - Get current connection status and statistics
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 (supports raw or structured output)
get_presentation_summary - Generate an overview of a Figma presentation including slide count, slide titles, and optionally an outline summarizing key points
get_table_data - Extract data from a Figma table node in various formats (array, object, or CSV) with customizable header handling
export_node_as_image - Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text
join_channel - Join a specific channel to communicate with Figma
The MCP server includes several helper prompts to guide you through complex design tasks:
design_strategy - Best practices for working with Figma designs
read_design_strategy - Best practices for reading Figma designs
text_replacement_strategy - Systematic approach for replacing text in Figma designs
annotation_conversion_strategy - Strategy for converting manual annotations to Figma's native annotations
swap_overrides_instances - Strategy for transferring overrides between component instances in Figma
reaction_to_connector_strategy - Strategy for converting Figma prototype reactions to connector lines using the output of 'get_reactions', and guiding the use 'create_connections' in sequence
batch_operations_guide - Best practices for efficient bulk operations in Figma (v0.3.2)
error_recovery_guide - How to handle common errors and timeouts in Figma operations (v0.3.2)
text_formatting_guide - Best practices for updating text while preserving formatting (v0.3.2)
Navigate to the Figma plugin directory:
cd src/figma_copilot_pluginEdit code.js and ui.html
When working with the Figma MCP:
Always join a channel before sending commands
Get document overview using get_document_info first
Check current context with get_current_context before modifications
Use appropriate creation tools based on needs:
create_frame for containers
create_rectangle for basic shapes
create_text for text elements
Verify changes using get_node_info
Use component instances when possible for consistency
Handle errors appropriately as all commands can throw exceptions
For large designs:
Use scan_nodes_with_options with appropriate timeout and depth settings
Monitor progress through WebSocket updates
Implement appropriate error handling
For text operations:
Use batch operations when possible
Consider structural relationships
Verify changes with targeted exports
For converting legacy annotations:
Scan text nodes to identify numbered markers and descriptions
Use scan_nodes_by_types to find UI elements that annotations refer to
Match markers with their target elements using path, name, or proximity
Categorize annotations appropriately with get_annotations
Create native annotations with set_multiple_annotations in batches
Verify all annotations are properly linked to their targets
Delete legacy annotation nodes after successful conversion
Visualize prototype noodles as FigJam connectors:
Use get_reactions to extract prototype flows,
set a default connector with set_default_connector,
and generate connector lines with create_connections for clear visual flow mapping.
If you encounter "Cannot unwrap symbol" errors when updating text, this is likely due to mixed fonts in text nodes. See Font Handling Documentation for details on how the plugin handles mixed fonts and available strategies.
For large documents that cause timeouts, use scan_nodes_with_options with depth limiting and partial results. See Batch Operations Guide for optimization strategies.
Batch Operations Guide - Learn how to use batch operations for massive performance gains
Enhanced Text Operations Guide - Preserve formatting while updating text
Text Styling Guide - Apply and manage text styles
Font Handling Documentation - Handle mixed fonts and font loading strategies
Changelog v0.3.2 - Latest release notes
MIT
Clone a node to multiple positions in one operation. Significantly faster than multiple individual clone operations.
Inputs: positions (required), sourceNodeId (required), parentId.
Clone an existing node in Figma
Inputs: nodeId (required), x, y.
Create an instance of a component in Figma
Inputs: x (required), y (required), componentKey (required).
Create connections between nodes using the default connector style
Inputs: connections (required).
Create a new frame in Figma
Inputs: x (required), y (required), width (required), height (required), +16 more.
Create a GIF (available in Figma Slides and FigJam)
Inputs: url (required), x, y, name, +3 more.
Create a new rectangle in Figma
Inputs: x (required), y (required), width (required), height (required), +2 more.
Create a shape with text (available in Figma Slides and FigJam)
Inputs: x, y, name, text, +10 more.
Create a new slide in Figma Slides
Inputs: name, parentId, fillColor, strokeColor, +1 more.
Create a new slide row in Figma Slides
Inputs: name, parentId.
Create a table (available in Figma Design and Slides)
Inputs: x, y, name, rows, +4 more.
Create a new text element in Figma
Inputs: x (required), y (required), text (required), name, +4 more.
Delete multiple nodes from Figma at once
Inputs: nodeIds (required).
Delete a node from Figma
Inputs: nodeId (required).
Execute multiple commands in sequence with a single round-trip. Ideal for complex operations that require multiple steps.
Inputs: commands (required), stopOnError.
Export a node as an image from Figma
Inputs: nodeId (required), scale, format.
Extract all content from a Figma slide including text, tables, and optionally images
Inputs: slideId (required), textOnly, outputFormat, includeImages.
Get all annotations in the current document or specific node
Inputs: nodeId, includeCategories.
Get the description of a component in Markdown format
Inputs: nodeId (required).
Get the current connection status and statistics for the Figma plugin connection
Inputs: no named parameters.
Get comprehensive context about the current state including selection, focused slide (if in Slides mode), and optionally document info
Inputs: includeDocument, includeSlideDetails, includeSelectionDetails.
Get detailed information about the current Figma document
Inputs: no named parameters.
[DEPRECATED] Get the currently focused slide in Figma Slides. Use 'get_current_context' instead.
Inputs: no named parameters.
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 all local components from the Figma document
Inputs: no named parameters.
[DEPRECATED] Get information for multiple nodes in a single request. Use 'get_nodes' instead.
Inputs: nodeIds (required).
[DEPRECATED] Get detailed information about a specific node in Figma. Use 'get_nodes' instead.
Inputs: nodeId (required).
Get detailed information about one or more nodes in Figma. Accepts either a single node ID or array of IDs.
Inputs: nodeIds (required), maxDepth, includeChildren.
[DEPRECATED] Get detailed information about multiple nodes in Figma. Use 'get_nodes' instead.
Inputs: nodeIds (required).
Generate an overview of a Figma presentation including slide count, slide titles, and optionally an outline summarizing key points
Inputs: includeOutline, maxTextPreview, includeEmptySlides.
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).
[DEPRECATED] Get information about the current selection in Figma. Use 'get_current_context' instead.
Inputs: no named parameters.
Get the current slide grid arrangement in Figma Slides
Inputs: no named parameters.
[DEPRECATED] Get the current viewport mode in Figma Slides. Use 'get_current_context' instead.
Inputs: no named parameters.
Get the transition settings for a slide in Figma Slides
Inputs: slideId (required).
Get detailed text segments with all their styling properties
Inputs: fields (required), nodeId (required), end, start.
Get all styles from the current Figma document
Inputs: no named parameters.
Extract data from a Figma table node in various formats (array, object, or CSV)
Inputs: tableId (required), headerRow, outputFormat, includeHeaders, +1 more.
Get the text decoration properties for a specific text range
Inputs: end (required), start (required), nodeId (required).
Get the text styling (bold, italic, underline, strikethrough) for a specific range of text
Inputs: end (required), start (required), nodeId (required).
Join a specific channel to communicate with Figma
Inputs: channel.
Move a node to a new position in Figma
Inputs: x (required), y (required), nodeId (required).
Normalize Markdown text to match Figma's supported subset
Inputs: markdown (required).
Get detailed information about the current selection in Figma, including all node details
Inputs: no named parameters.
Resize a node in Figma
Inputs: width (required), height (required), nodeId (required).
Scan for child nodes with specific types in the selected Figma node
Inputs: types (required), nodeId (required).
Scan for nodes with advanced options including depth limit, timeout control, and partial results. Use this when scan_text_nodes times out.
Inputs: nodeId (required), options.
[DEPRECATED] Scan all text nodes in the selected Figma node - Use scan_nodes_with_options instead
Inputs: nodeId (required).
Create or update an annotation
Inputs: nodeId (required), labelMarkdown (required), categoryId, properties, +1 more.
Set primary and counter axis alignment for an auto-layout frame in Figma
Inputs: nodeId (required), counterAxisAlignItems, primaryAxisAlignItems.
Set the description of a component with Markdown formatting support
Inputs: nodeId (required), descriptionMarkdown (required).
Set the corner radius of a node in Figma
Inputs: nodeId (required), radius (required), corners.
Set a copied connector node as the default connector
Inputs: connectorId.
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.
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 distance between children in an auto-layout frame
Inputs: nodeId (required), itemSpacing (required).
Set the layout mode and wrap behavior of a frame in Figma
Inputs: nodeId (required), layoutMode (required), layoutWrap.
Set horizontal and vertical sizing modes for an auto-layout frame in Figma
Inputs: nodeId (required), layoutSizingVertical, layoutSizingHorizontal.
Set multiple annotations parallelly in a node
Inputs: nodeId (required), annotations (required).
Set the same property value on multiple nodes at once. Useful for bulk updates like visibility, opacity, or position.
Inputs: value (required), nodeIds (required), property (required).
Set multiple text contents parallelly in a node
Inputs: text (required), nodeId (required).
Update multiple text nodes with content and optional styling in a single operation. More efficient than separate text and style updates.
Inputs: nodeId (required), updates (required).
Set padding values for an auto-layout frame in Figma
Inputs: nodeId (required), paddingTop, paddingLeft, paddingRight, +1 more.
Set the text color for a specific text range
Inputs: end (required), color (required), start (required), nodeId (required).
Set the font family and style for a specific text range
Inputs: end (required), start (required), nodeId (required), fontFamily (required), +1 more.
Set the font size for a specific text range
Inputs: end (required), start (required), nodeId (required), fontSize (required).
Rearrange slides into a grid layout in Figma Slides
Inputs: slides (required).
Set the viewport mode in Figma Slides
Inputs: mode (required).
Set the transition for a slide in Figma Slides
Inputs: slideId (required), transition (required).
Set the stroke color of a node in Figma
Inputs: b (required), g (required), r (required), nodeId (required), +2 more.
Set the text content of an existing text node in Figma
Inputs: text (required), nodeId (required).
Set advanced text decoration properties (style, color, thickness, offset) for a text range
Inputs: end (required), start (required), nodeId (required), color, +4 more.
Apply text styling (bold, italic, underline, strikethrough) to a specific range of text in a text node
Inputs: end (required), start (required), nodeId (required), bold, +3 more.
Replace specific text in a node while preserving the formatting of unchanged portions. Only replaced text gets default formatting.
Inputs: nodeId (required), replacements (required).
Update text content while preserving existing character formatting. Choose a strategy for handling formatting when text length changes.
Inputs: nodeId (required), newText (required), preserveFormattingStrategy.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 75 tools
Many tools overlap in purpose, especially the deprecated aliases (get_selection, get_node_info, get_nodes_info, scan_text_nodes) that duplicate current equivalents. Text-editing options are also numerous and subtly different (set_text_content, update_text_preserving_formatting, smart_text_replace), which makes misselection likely.
Most tools follow a clear verb_noun snake_case pattern (get_, create_, set_, update_, delete_), but there are minor inconsistencies like read_my_design vs get_document_info and deprecated variants with different names (get_nodes_info vs get_multiple_nodes_info).
75 tools is far beyond what an agent can effectively consider, and many are deprecated duplicates or near-overlapping variants. Even for a broad Figma surface, the set should be consolidated to reduce cognitive load and redundant alternatives.
The surface covers design nodes, text styling, layout, components, slides, annotations, and connections, so most core workflows are represented. However, some gaps exist, such as renaming or deleting components/styles and managing frames/pages more broadly, though these are workable around.
The Figma MCP server brings Figma design context directly into your AI workflow.
Generate, inspect, and manage Flowstep UI designs directly from your AI assistant.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Give your AI agents a design superpower. Generate, edit, and publish publication-grade decks, reports, landing pages, resumes, and marketing visuals directly within your agent workflow. Delivering frontier-level design quality at 3× the speed and 53× lower cost -from conversational prompt to live link or vector PDF in minutes.
