How to Connect Figma to Cursor Using the Figma MCP Server

Connecting Figma to Cursor gives the large language model (LLM) valuable context to implement your designs more accurately. With this integration, it can access details like element sizes, fonts, and exact color, information you can’t get by simply providing an image of your design. I use it regularly when creating new elements as it cuts down the amount of time I spend on styling.

Prerequisites

Before you begin, make sure of the following:

• You have a Dev or Full Seat on a Professional, Organization, or Enterprise Figma plan.
• The Figma Desktop App is installed.

Step 1: Enable the Local MCP Server in Figma

1. First, open the Figma Desktop App.
2. Next, go to Figma menu (top left) → Preferences → Enable Local MCP Server.

A confirmation message will appear at the bottom of your screen with a URL. Copy this URL to use later.

Step 2: Configure MCP in Cursor

Now that you have your URL, it’s time to set up MCP in Cursor.

1. Open Cursor → Settings → Cursor Settings.

2. Select <MCP & Integrations. You’ll see a list of current MCPs (Cursor supports many!).

3. Click New MCP Server. This opens the mcp.json file, where you can add additional MCP servers.

Add the following configuration to mcp.json, replacing the URL with the one you copied earlier:

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Once you save the file, Figma should appear in your MCP & Integrations settings.

Step 3: Share Frames from Figma

With the MCP server set up, you’re ready to share your design context.

1. Navigate to your Figma project.

2. Select the frame or layer you want Cursor to access.

3. Right-click and choose Copy link to selection.

Step 4: Use Figma Context in Cursor

Lastly, paste the copied link into Cursor’s chat and prompt it with your request. Cursor will then use the design context to provide more accurate assistance.

The Figma MCP Server provides six tools. The most commonly used is get_code, which generates code for the Figma selection you’ve shared. By default, it outputs React with Tailwind, but you can prompt Cursor to generate code in whatever stack your project uses.

This tool is typically called automatically anytime you ask Cursor about the details of a frame you’ve provided. For example, I’ve used prompts like:

• “Add the table from this frame into the current page using the currentUsers prop for the data in the table.”

• “Do the colors I’m using on this page match the colors used in this design?”

Overall, I’ve had great success using the Figma MCP Server when implementing designs, and I hope you do too!