How I connected Figma to Cursor using MCP

A step-by-step guide on how to connect Figma to Cursor using MCP (Model-Client-Protocol), enabling seamless design-to-code workflow and improving developer productivity through direct design system integration.

This weekend, I was - again - mind blown by technology.

As I was working on OpenBB, and needed to copy the style from the Figma mockups - I stumbled upon Figma MCP.

Here's what I said on the LinkedIn post.

And this is the video that I added to the post:

So, in this short post, I'm going to tell you how you can do the same in a couple of steps.

Enabling MCP Server on Figma

1. Make sure you are using Figma desktop app.

2. Go into "Dev Mode" on the bottom toolbar.

3. Enable MCP Server.

Set up MCP client (Cursor)

1. Open Cursor Settings

2. Add a new MCP server

When clicking on "Add Custom MCP", copy paste the following block of code:

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

Then save it, like this:

Once you close that file, you'll see that Cursor Settings MCP tab now displays "Loading tools":

After a few seconds you can toggle the Figma MCP and you should be able to see a few tools.

Usage

The usage is very simple.

You just need to select the layout you want to pass to Cursor on Figma, and then right click on it and select "Copy link to selection".

Then you paste that link to Cursor and you prompt accordingly.

Note: I recommend to be explicit with the model to utilize MCP.

That's it. I hope this is helpful.

Happy hacking.