AI-Powered Design Automation: Building a Figma MCP with Cursor

Github: https://github.com/xxflux/figma_MCP

Design systems are evolving rapidly, and the integration of AI into design workflows is transforming how designers and engineers collaborate. In this article, I’ll explore how to build a Model Context Protocol (MCP) for Figma using Cursor Agent, enabling natural language commands to automate design tasks.

What Is Model Context Protocol (MCP)?

MCP is a standardized communication protocol that allows Large Language Models (LLMs) like those in Cursor to interact with external tools. For designers and engineers, this means being able to generate and modify designs through natural language prompts.

The Architecture

The Figma MCP system consists of three main components:

1. MCP Server: A Node.js/Bun server that implements the Model Context Protocol
2. Figma Plugin: A plugin that executes design operations in Figma
3. Cursor Agent: The AI assistant that processes natural language prompts

Let’s explore how these components work together:

User Prompt → Cursor Agent → MCP Server → Figma Plugin → Design Changes

Setting Up the System

Prerequisites

• Bun for running the MCP server
• Node.js for building the Figma plugin
• Figma account
• Cursor with Agent access
• Figma access token

1. MCP Server Setup

The MCP server acts as the bridge between Cursor Agent and the Figma plugin:

# Clone the repository
git clone <repository-url>
cd figma-mcp

# Configure the server
cd figma-mcp-server
cp .env.example .env
# Add your Figma access token to .env

# Install dependencies and start
bun install
bun run index.ts

This server exposes two important interfaces:

• A RESTful API endpoint that Cursor Agent connects to
• A WebSocket server that communicates with the Figma plugin

2. Figma Plugin Setup

cd figma-plugin
npm install
npm run build

Then import the plugin into Figma:

1. Open Figma
2. Go to Plugins > Development > Import plugin from manifest
3. Select the manifest.json file

3. Configure Cursor Agent

1. Open Cursor
2. Go to Settings > Agent > MCP Servers
3. Add the MCP server:

{
  "mcpServers": {
    "figma-mcp": {
      "type": "sse",
      "url": "http://localhost:3000/sse-cursor"
    }
  }
}

How It Works: Under the Hood

The Communication Flow

1. Request Handling: When you send a prompt to Cursor Agent, it constructs a structured MCP request
2. Server Processing: The MCP server translates this request into specific Figma operations
3. WebSocket Communication: The server sends commands to the Figma plugin via WebSocket
4. Plugin Execution: The plugin executes these operations in your Figma document

Key Technical Components

The server’s WebSocket connection enables real-time bidirectional communication with the Figma plugin:

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  // Handle connections from Figma plugins
  
  ws.on('message', (message) => {
    // Process messages from plugin
  });
});

// Function to send operations to plugin
const sendOperationToPlugin = (operation) => {
  for (const [clientId, client] of figmaClients.entries()) {
    client.send(JSON.stringify(operation));
  }
};

The Figma plugin listens for these operations and executes them:

figma.ui.onmessage = async (msg) => {
  switch (msg.type) {
    case 'create-rectangle':
      await createRectangle(msg.position, msg.size, msg.color);
      break;
    case 'create-text':
      await createText(msg.text, msg.position, msg.fontSize, msg.color);
      break;
    // Other operations...
  }
};

Creating Designs with Natural Language

Once your system is running, you can use natural language prompts in Cursor Agent to create designs:

Basic Elements

Create a blue rectangle with rounded corners at position x=100, y=100, width=300, height=200.
Add a headline "Welcome to Our Site" at the top of the page with font size 48px and centered alignment.

Complete Layouts

Design a product page with:
- A navigation bar with links to Home, Features, Pricing, and Contact
- A hero section with heading "The Future is Now" 
- A features section with 4 feature cards
- A call-to-action section with a button
- A footer with company information

Practical Applications

For UX/UI Designers

• Rapid Prototyping: Generate initial layouts in seconds
• Design Iterations: Experiment with multiple variations quickly
• Consistent Design Systems: Ensure elements adhere to your design system

For Engineers

• Frontend Implementation: Generate design components that match your code
• Responsive Testing: Create variations for different screen sizes
• Component Library: Build out consistent UI component libraries

Benefits of the MCP Approach

1. Efficiency: Automate repetitive design tasks through natural language
2. Collaboration: Bridge the gap between design and development
3. Consistency: Maintain design system adherence
4. Accessibility: Make design tools more accessible to non-designers

Future Enhancements

The current implementation can be extended to support:

1. Design System Integration: Connect with existing design systems
2. Component Libraries: Create and use reusable components
3. Style Controls: More granular control over styles and themes
4. Export Options: Generate code or assets from designs

Conclusion

Building a Figma MCP with Cursor Agent opens up new possibilities at the intersection of AI, design, and development. By enabling natural language design generation, we’re removing barriers between idea conception and implementation.The combination of Figma’s powerful design capabilities with Cursor’s AI assistant creates a workflow that’s not just faster but fundamentally changes how designers and engineers collaborate. As these technologies evolve, we can expect even more sophisticated ways to translate natural language into beautiful, functional designs.Start exploring today by setting up your own Figma MCP and see how it transforms your design workflow!