🎨 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

Command	Description
join_channel	Connect to a communication channel
get_document_info	Retrieve Figma document details
get_selection	Get information about selected elements
get_node_info	Get detailed information about a specific node

Creation Commands

Command	Description
create_rectangle	Create a rectangle with custom properties
create_frame	Create a new frame
create_text	Create text elements
create_component_instance	Create an instance of a component

UI Kit & Design System Commands

Command	Description
get_ui_kit_libraries	Get available design system libraries (iOS, Material Design)
get_ui_kit_components	Get components from a specific design system by name and category
create_ui_kit_component	Create a component from a design system with properties
create_ui_kit_layout	Create complete UI layouts using design system components

Styling Commands

Command	Description
set_fill_color	Set fill color (RGBA)
set_stroke_color	Set stroke color and weight
set_corner_radius	Set corner radius (with per-corner control)
set_text_content	Update text content

Layout Commands

Command	Description
move_node	Reposition elements
resize_node	Change dimensions
delete_node	Remove elements

Component & Style Commands

Command	Description
get_styles	Retrieve available styles
get_local_components	Get information about local components
get_team_components	Get information about team components

Export Commands

Command	Description
export_node_as_image	Export as PNG, JPG, SVG, or PDF

💡 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