cursor-talk-to-figma-mcp

Exposes 40+ design manipulation tools to Cursor AI and Claude Code through the Model Context Protocol (MCP) standard, implementing a schema-validated request-response pipeline with Zod validation. The MCP server (src/talk_to_figma_mcp/server.ts) acts as the interface layer, translating natural language agent intents into structured tool calls that are routed via WebSocket to the Figma plugin for execution. This enables AI agents to treat Figma operations as native capabilities without custom API wrappers.

Implements a channel-based WebSocket bridge (src/socket.ts) that manages real-time communication between the MCP server and Figma plugin using UUID-based request tracking and channel-based routing. Each client joins a named channel before exchanging messages, enabling multiple concurrent sessions with proper request-response matching. The system provides progress updates for long-running operations and comprehensive error handling with detailed validation reporting.

Implements comprehensive error handling and input validation using Zod schemas for all tool parameters and responses. The system validates requests before execution, provides detailed error messages with validation context, and ensures type safety across the MCP-plugin communication boundary. Validation failures are reported with specific field errors and suggestions.

Leverages Bun runtime for fast JavaScript execution with native TypeScript support, enabling rapid development and deployment without transpilation overhead. The MCP server is built on Bun, providing performance benefits for WebSocket communication and tool execution. TypeScript is used throughout for type safety without requiring separate build steps.

Provides batch operation tools (set_multiple_text_contents, set_multiple_annotations) that efficiently update multiple text nodes and annotations in a single operation, reducing round-trip latency and improving performance for large-scale content modifications. The implementation uses Figma's batch API capabilities to apply changes atomically, ensuring consistency across multiple design elements.

Enables transfer of design overrides between component instances using get_instance_overrides and set_instance_overrides tools, allowing AI agents to read override states from one instance and apply them to others. This capability supports design system workflows where component variations need to be synchronized or propagated across multiple instances without manual duplication.

Converts Figma prototype flows to visual connector lines using get_reactions and create_connections tools, enabling AI agents to read prototype interaction definitions and programmatically create visual representations of flow logic. The system reads Figma's reaction objects (which define prototype interactions) and translates them into visual connectors that show the flow relationships.

Provides tools for programmatic management of auto-layout properties, spacing, and positioning within Figma frames. The system allows AI agents to read current layout configurations (direction, spacing, padding) and modify them atomically, enabling design automation workflows that adjust layouts based on content or design requirements without manual frame configuration.

Provides tools for reading Figma document structure and current selection state, enabling AI agents to understand the design hierarchy, node properties, and current context. The system supports hierarchical node traversal to explore parent-child relationships and extract metadata about design elements, allowing agents to make context-aware decisions about which elements to modify.

Exposes tools for reading and modifying text styling properties including font family, size, weight, color, line height, and letter spacing. The system allows AI agents to apply consistent typography across multiple text elements, enabling design system enforcement and automated style updates without manual text property adjustment.

Provides tools for creating new design elements including shapes, frames, and component instances programmatically. The system allows AI agents to instantiate design elements with specified properties, enabling automated design generation workflows that create layouts, components, and visual structures based on data or design rules.

Manages the Figma plugin lifecycle including installation, connection establishment, and UI state management (src/cursor_mcp_plugin/code.js). The plugin provides a connection UI that allows users to establish WebSocket connections to the MCP server, handles authentication/pairing, and maintains connection state. The system supports graceful disconnection and reconnection with proper cleanup.