cursor-talk-to-figma-mcp

4,011
browser_automationdeveloper_tools

Cursor Talk to Figma MCP is an integration that allows communication between Cursor AI and Figma to automate design processes. It facilitates design reading, modification, and automation through various MCP tools and best practices. This project streamlines workflows by connecting Cursor and Figma for enhanced productivity.

Cursor Talk to Figma MCP

This project provides an MCP integration between Cursor AI and Figma, enabling communication for reading and modifying designs programmatically.

Project Structure

  • TypeScript MCP server for Figma integration
  • Figma plugin for communication
  • WebSocket server for facilitating communication

Get Started

  • Install Bun and setup MCP server.
  • Install the Figma plugin from the community page or locally.

Usage

  1. Start the WebSocket server.
  2. Install the MCP server in Cursor.
  3. Run the Cursor MCP Plugin in Figma and connect to the WebSocket server.

MCP Tools

  • Document & Selection: retrieve and manipulate Figma document information.
  • Annotations: manage annotations in documents.
  • Prototyping & Connections: handle prototype reactions and connections.
  • Creating Elements: create rectangles, frames, and text nodes.
  • Modifying text content: update text nodes.
  • Auto Layout & Spacing: configure layout modes and alignments.
  • Styling: manage node colors and borders.
  • Layout & Organization: move, resize, and delete nodes.
  • Components & Styles: handle styles and components.
  • Export & Advanced: export nodes as images.
  • Connection Management: join communication channels.
  • MCP Prompts: guide users through design tasks with strategy prompts.

Development

  • Instructions for building the Figma plugin.

Best Practices

  • Guidelines for effectively using the Figma MCP integration.