What is Figma Cursor Mcp

Figma-Cursor-MCP is an integration that bridges Cursor AI with Figma, allowing users to create, modify, and read Figma designs using natural language commands, thus enhancing the design workflow with AI-driven capabilities.

Use cases

Use cases for Figma-Cursor-MCP include creating user interfaces quickly using natural language, modifying existing designs through simple text commands, and automating repetitive design tasks to streamline workflows.

How to use

To use Figma-Cursor-MCP, install the required dependencies including Bun and Cursor AI, set up the project, launch the server, and connect it with the Figma plugin to start designing with natural language commands.

Key features

Key features include natural language design commands, bidirectional communication between Cursor AI and Figma, design intelligence for extracting information, AI-assisted component management, styling transformations, precise layout control, integration with design systems, and themed layout creation.

Where to use

Figma-Cursor-MCP can be used in various fields such as UI/UX design, web development, mobile app design, and any area where design automation and AI assistance can enhance productivity.

🎨 Figma Cursor MCP

✨ Design with AI, Effortlessly

Unlock the power of AI-driven design with a seamless bridge between Cursor AI and Figma. This Model Context Protocol (MCP) integration lets you create, modify, and read Figma designs through natural language - revolutionizing your design workflow.

🚀 What You Can Do

• 💬 Natural Language Design - Create and modify Figma elements with simple text commands
• 🔄 Bidirectional Communication - Seamless flow of data between Cursor AI and Figma
• 🔍 Design Intelligence - Extract detailed information from your Figma documents
• 🧩 Component Magic - Work with Figma components through AI
• 🎭 Style Transformation - Apply styling changes with natural language
• 📊 Layout Control - Position, resize, and organize elements with precision
• 📱 Design System Integration - Create professional UI with iOS and Material Design kits
• 🎨 Themed Layouts - Quickly build light/dark themed interfaces with design system components

⚡ Quick Start

Prerequisites

• Bun runtime
• Cursor AI editor
• Figma account

Setup in 60 Seconds

1. Install Dependencies

   # Install Bun if needed
   curl -fsSL https://bun.sh/install | bash
   
   # Setup project
   bun setup
   

2. Launch Server

   bun start
   

3. Connect Figma

   • Open Figma and run the Cursor MCP Plugin (see setup details below)
   • Connect to the running server

4. Start Designing with AI

   • Use Cursor AI to send commands to Figma

🔌 Detailed Setup

Figma Plugin Configuration

1. In Figma, navigate to Plugins > Development > New Plugin
2. Select “Link existing plugin”
3. Choose the src/cursor_mcp_plugin/manifest.json file
4. The plugin will appear in your development plugins

MCP Server Setup

Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

🧰 Command Reference

Essential Commands

Creation Commands

UI Kit & Design System Commands

Styling Commands

Layout Commands

Component & Style Commands

Export Commands

💡 Best Practices

1. Start with Context - Always begin by joining a channel and getting document info
2. Verify Selections - Check what’s selected before making changes
3. Work with Components - Use component instances for design consistency
4. Verify Changes - Use get_node_info after modifications
5. Handle Errors - Commands may throw exceptions, be ready to handle them
6. Explore UI Kits - Use get_ui_kit_libraries to discover available design systems
7. Design System Consistency - Create complete layouts with create_ui_kit_layout for consistent design language
8. Component Properties - Set component properties when creating UI kit components for customization

🏗️ Project Architecture

cursor-talk-to-figma-mcp/
├── src/
│   ├── talk_to_figma_mcp/    # TypeScript MCP server
│   ├── cursor_mcp_plugin/    # Figma plugin
│   └── socket.ts             # WebSocket communication

🛠️ Development

To customize the Figma plugin:

cd src/cursor_mcp_plugin
# Edit code.js and ui.html as needed

📄 License

This project is licensed under the MIT License - design freely!

Made with ❤️ for designers and developers