cursor-talk-to-figma-mcp

Cursor Talk to Figma MCP is a project that facilitates seamless integration between Cursor AI and Figma through the Model Context Protocol (MCP). This integration allows for programmatic interaction with Figma designs, enabling tasks such as reading design information, modifying elements, and automating repetitive design processes. The project is structured with a TypeScript MCP server for Figma integration, a Figma plugin for communication, and a WebSocket server to facilitate the connection. Users can install the necessary tools using Bun, set up the WebSocket server, and run the MCP server to start interacting with Figma. The project also includes a variety of tools for document management, annotations, prototyping, element creation, text modification, styling, layout management, and more. Additionally, it provides strategies and best practices for efficient design automation and management.

Features

• Seamless integration between Cursor AI and Figma using MCP.
• Automated design modifications and bulk text content replacement.
• Comprehensive set of tools for document management, annotations, and prototyping.
• Support for creating and modifying design elements programmatically.
• Strategies and best practices for efficient design automation.

MCP Tools

• {'Document & Selection': 'Tools for getting document info, selection details, and node information.'}
• {'Annotations': 'Tools for managing annotations with markdown support.'}
• {'Prototyping & Connections': 'Tools for managing prototype reactions and creating connections.'}
• {'Creating Elements': 'Tools for creating rectangles, frames, and text nodes.'}
• {'Modifying text content': 'Tools for scanning and setting text content in nodes.'}
• {'Auto Layout & Spacing': 'Tools for managing layout modes, padding, and spacing.'}
• {'Styling': 'Tools for setting fill colors, stroke colors, and corner radii.'}
• {'Layout & Organization': 'Tools for moving, resizing, and deleting nodes.'}
• {'Components & Styles': 'Tools for managing components and styles.'}
• {'Export & Advanced': 'Tools for exporting nodes as images.'}
• {'Connection Management': 'Tools for managing communication channels.'}
• {'MCP Prompts': 'Helper prompts for guiding complex design tasks.'}

Usage with Different Platforms

Windows + WSL Guide

Guide for setting up the MCP server on Windows with WSL.

Manual Setup and Installation

Instructions for manually setting up the MCP server and WebSocket server.

Figma Plugin

Steps for installing and linking the Figma plugin.