How to Convert Figma to Code Using Cursor + MCP Manually converting...
Prajwal Tomar@PrajwalTomar_
40 views
Feb 27, 2025
~2 min read
Advertisement
1
How to Convert Figma to Code Using Cursor + MCP
Manually converting Figma designs into code is slow and painful.
Here’s how to automate the entire process:
Manually converting Figma designs into code is slow and painful.
Here’s how to automate the entire process:
2
1/ Why This Method?
Most devs rely on screenshots & plugins to convert Figma to code, which often miss key details.
With Figma-Context-MCP, Cursor pulls real design data and generates code automatically.
It’s open-source and completely free.
Most devs rely on screenshots & plugins to convert Figma to code, which often miss key details.
With Figma-Context-MCP, Cursor pulls real design data and generates code automatically.
It’s open-source and completely free.
3
2/ What is Figma-Context-MCP?
It’s a Model Context Protocol (MCP) that connects Figma → Cursor AI and lets you:
• Extract real UI components
• Get pixel-perfect design replication
• Automate front-end code generation
No more manual copying or rebuilding.
It’s a Model Context Protocol (MCP) that connects Figma → Cursor AI and lets you:
• Extract real UI components
• Get pixel-perfect design replication
• Automate front-end code generation
No more manual copying or rebuilding.
4
3/ Setting It Up (Clone & Install)
To start, clone the following repo:
github.com/GLips/Figma-Co…
Install dependencies:
pnpm install
Now it’s ready to run.
To start, clone the following repo:
github.com/GLips/Figma-Co…
Install dependencies:
pnpm install
Now it’s ready to run.
5
4/ Getting Your Figma Access Token
To connect Figma, you need an Access Token:
• Open Figma → Profile → Settings
• Go to Security → Personal Access Token
• Click Generate New Token
• Set Read-Only permissions
Copy it, you won’t see it again.
To connect Figma, you need an Access Token:
• Open Figma → Profile → Settings
• Go to Security → Personal Access Token
• Click Generate New Token
• Set Read-Only permissions
Copy it, you won’t see it again.
6
5/ Running the MCP Server
Start the Figma-Context-MCP server:
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
If successful, you’ll see:
“New SSE connection established”
Now the server is live and ready to connect to Cursor.
Start the Figma-Context-MCP server:
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
If successful, you’ll see:
“New SSE connection established”
Now the server is live and ready to connect to Cursor.
7
6/ Connecting MCP to Cursor
Inside Cursor AI:
• Open Settings → Features → MCP Servers
• Click Add New Server
• Name it Figma MCP
• Choose SSE as the connection type
• Paste the server URL from your terminal
If connected, the status turns green.
Inside Cursor AI:
• Open Settings → Features → MCP Servers
• Click Add New Server
• Name it Figma MCP
• Choose SSE as the connection type
• Paste the server URL from your terminal
If connected, the status turns green.
8
7/ Importing Figma Designs into Cursor
Bring Figma designs into Cursor AI:
• Open your Figma file
• Right-click a section or frame
• Copy link → Paste into Cursor
Then, ask Cursor to convert it into React code.
Cursor automatically generates code for the design.
Bring Figma designs into Cursor AI:
• Open your Figma file
• Right-click a section or frame
• Copy link → Paste into Cursor
Then, ask Cursor to convert it into React code.
Cursor automatically generates code for the design.
9
8/ Reviewing & Refining the Code
The output includes:
• Accurate layouts with correct spacing & colors
• Responsive components
• Structured front-end code
Small fixes may be needed, but most work is done automatically.
The output includes:
• Accurate layouts with correct spacing & colors
• Responsive components
• Structured front-end code
Small fixes may be needed, but most work is done automatically.
10
9/ Build Front-Ends Faster with AI
Based on my tests, the output was far better than using design screenshots.
With MCP + Cursor, you can:
• Automate UI development
• Save hours of manual coding
• Ship products faster
Based on my tests, the output was far better than using design screenshots.
With MCP + Cursor, you can:
• Automate UI development
• Save hours of manual coding
• Ship products faster
11
Final Thoughts
I tested this on a Figma design for my pricing section, and it worked surprisingly well. Now pushing it further with more complex designs.
Try it out and drop your findings. I’d love to hear how it works for you.
I tested this on a Figma design for my pricing section, and it worked surprisingly well. Now pushing it further with more complex designs.
Try it out and drop your findings. I’d love to hear how it works for you.
