What is Talk to Figma MCP?
Talk to Figma MCP is a Model Context Protocol (MCP) integration that enables AI agents like Cursor and Claude Code to communicate directly with Figma. This powerful bridge allows you to read designs, modify them programmatically, and automate complex design workflows using natural language. The integration implements a three-component architecture that facilitates seamless communication between AI agents and Figma:Key Features
Read & Analyze Designs
Extract document structure, selection info, node details, and annotations from your Figma files
Modify Elements
Create shapes, update text content, adjust layouts, and apply styling changes programmatically
Automate Workflows
Bulk text replacement, instance override propagation, and reaction-to-connector conversion
Export Assets
Export nodes as images in multiple formats (PNG, JPG, SVG, PDF)
How It Works
The Talk to Figma MCP consists of three interconnected components:1. MCP Server
The MCP server (cursor-talk-to-figma-mcp) implements the Model Context Protocol and exposes 50+ tools for interacting with Figma. It communicates with AI agents via stdio and with the WebSocket relay via WebSocket connections.
2. WebSocket Relay
A lightweight Bun-based WebSocket server running on port 3055 that routes messages between the MCP server and Figma plugin using channel-based isolation. Multiple clients can work independently by joining different channels.3. Figma Plugin
A Figma/FigJam plugin that runs inside the Figma application, executing commands and returning results to the MCP server through the WebSocket relay.Available Tools
Talk to Figma MCP provides comprehensive tools organized into categories:Document Analysis
- Get document information and current selection
- Read design details without parameters
- Query specific nodes or multiple nodes
- Extract annotations and prototype reactions
Element Creation
- Create rectangles, frames, and text nodes
- Instantiate components with custom properties
- Clone existing nodes with position offsets
Text Operations
- Scan text nodes with intelligent chunking
- Update single or multiple text contents
- Batch text replacement workflows
Layout & Styling
- Configure auto-layout (mode, padding, alignment, spacing)
- Set fill and stroke colors
- Adjust corner radius and sizing modes
- Move and resize nodes
Advanced Features
- Manage component instances and overrides
- Create FigJam connector lines from prototype flows
- Set and batch-create native annotations
- Export nodes as images
All tools use Zod validation for parameters and include 30-second timeouts with automatic inactivity timer resets for long-running operations.
Use Cases
Bulk Text Content Replacement
Bulk Text Content Replacement
Automatically scan and replace text content across hundreds of text nodes in your design system. Perfect for localization, content updates, and A/B testing variations.
Instance Override Propagation
Instance Override Propagation
Extract component instance overrides from a source instance and propagate them to multiple target instances with a single command. Dramatically reduces repetitive design work.
Prototype Flow Visualization
Prototype Flow Visualization
Convert Figma prototype reactions (“noodles”) into visible FigJam connector lines for clearer documentation and flow mapping.
Annotation Conversion
Annotation Conversion
Transform legacy manual annotation markers into Figma’s native annotation system with proper linking and categorization.
Get Started
Quick Start
Get up and running in minutes with the quick start guide
Installation
Detailed installation instructions for all package managers
Requirements
- Bun: JavaScript runtime and toolkit (recommended) or Node.js
- Figma Desktop App or Figma in Browser: For running the plugin
- Cursor or Claude Code: AI agent with MCP support
- Network Access: Localhost WebSocket connection (port 3055)
Architecture Benefits
Channel Isolation
Multiple users can work independently by joining different channels, preventing message collision
Progress Updates
Long-running operations provide real-time progress updates and reset inactivity timers
Auto-Reconnection
WebSocket connections automatically reconnect after 2 seconds on disconnect
Chunked Processing
Large operations (100+ nodes) are chunked to prevent Figma UI freezing
Next Steps
Install Dependencies
Follow the installation guide to set up Bun and configure your environment
Check out the Quick Start guide for a hands-on walkthrough, or explore the full API reference to see all available tools.