Automatically Generate Prototypes in Cursor Using Figma MCP

Learn how to use Figma MCP servers with Cursor to automate prototype generation and streamline your design workflow.

・ Technology #Cursor #Figma #MCP

How to Automatically Generate Prototypes in Cursor Using Figma MCP

Currently, the two most starred Figma MCP servers on GitHub are Figma-Context-MCP and Cursor Talk to Figma MCP. These tools enable seamless integration between Figma and Cursor, allowing for automated prototype generation and design-to-code conversion.

Figma-Context-MCP vs. Cursor Talk to Figma MCP

1. Figma-Context-MCP

Figma-Context-MCP leverages the Figma API key to fetch detailed element data, enabling precise control over design elements and converting designs into code.

How it works:

  • Right-click and copy the Figma element link.
  • Send the link to Cursor.
  • The MCP processes the data and generates the corresponding code.

This method is ideal for developers who need granular control over design elements.

2. Cursor Talk to Figma MCP

Cursor Talk to Figma MCP takes a more conversational approach. By using a local server and a Figma plugin, it allows users to interact with Cursor to automate prototype design directly in Figma.

This method is particularly beginner-friendly, making it accessible even to users with no prior design or coding experience.

In this guide, we’ll focus on setting up and using Cursor Talk to Figma MCP.

How to Use Cursor Talk to Figma MCP

Step 1: Download the Project Files

You can download the project files from the GitHub repository or clone it using:

git clone [repository-url]

If downloading manually, extract the ZIP file to access the Figma plugin.

Step 2: Install the Figma Desktop Client

The plugin required for Cursor Talk to Figma MCP only works with the Figma desktop app—browser-based Figma won’t support it. Download the client from Figma’s official website.

Step 3: Set Up the Environment

  1. Install Bun (a JavaScript runtime):
curl -fsSL https://bun.sh/install | bash
  1. Configure Environment Variables

After installation, manually add Bun to your shell config (e.g., ~/.zshrc or ~/.bashrc).

  1. Run Setup

Navigate to the project folder and execute:

bun run setup

$Note$: The setup claims to auto-install the MCP in Cursor, but in testing, this didn’t work—we’ll manually add it later.

  1. Start the WebSocket Server

Launch the MCP server in Cursor’s terminal:

bun run server

If successful, you’ll see a “Client connected” message.

Step 4: Configure the MCP Server in Cursor

  • Open Cursor’s settings.

  • Navigate to Extensions > MCP Servers.

  • Add the local server address (typically ws://localhost:3000).

Step 5: Install the Figma Plugin

  • Open the Figma desktop app.

  • Go to Plugins > Manage Plugins.

  • Click Install Plugin and select the plugin from the extracted project files.

Step 6: Test the Workflow

Open a Figma design file.

Use the plugin to send commands to Cursor (e.g., “Generate a prototype for this frame”).

Cursor will process the request and automatically generate the prototype.

Conclusion

By integrating Cursor Talk to Figma MCP, designers and developers can significantly speed up prototyping and reduce manual effort. Whether you’re a beginner or an advanced user, this tool offers a flexible way to bridge Figma and Cursor for AI-assisted design automation.

Give it a try and let us know how it works for you! 🚀