This content originally appeared on DEV Community and was authored by Deny Herianto
A) Official way (recommended): Figma Dev Mode MCP → Cursor
Prerequisites:
- Figma Desktop app (latest) with a Dev or Full seat on Professional/Organization/Enterprise. (Guide to the Figma MCP server)
- Cursor (latest) with MCP enabled. (Model Context Protocol (MCP) | Cursor Docs)
Steps:
Turn on the MCP server in Figma Desktop
a. Open Figma Desktop → Menu → Preferences → Enable Dev Mode MCP Server.
b. You’ll see it’s running locally at: http://127.0.0.1:3845/mcp. Keep that URL.Add the server in Cursor
Cursor → Settings → Cursor Settings → MCP → + Add new global MCP server, then use this config:
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}
- Verify it worked
Open Cursor chat (Agent/Composer). Type #get_code to see Figma tools (e.g., get_code, get_variable_defs, optionally get_image). If nothing shows, restart both Figma Desktop and Cursor.
- Use it (two easy flows)
- Selection-based: select a frame/layer in Figma, then prompt Cursor to generate code for your selection.
- Link-based: copy a Figma frame/layer link, paste it in chat, and ask for code/tokens.
- Available tools include:
- get_code → produces React+Tailwind by default (you can ask for Next.js/Vue/etc.).
- get_variable_defs → lists variables/styles used (great for tokens).
- Enable Preferences → Dev Mode MCP Server Settings → get_image to include screenshots for layout fidelity; also enable Code Connect to map Figma nodes to your components.
- Troubleshooting quick hits
- Must be Figma Desktop (server runs locally over SSE). Check the URL/port http://localhost:3845/mcp.
- In Cursor, you can view MCP Logs (Output panel → “MCP Logs”) to see connection errors/timeouts.
B) Alternative: Community Figma MCP server (stdio / token-based)
If you want a standalone MCP server that talks to Figma’s REST API (handy for headless/remote setups or deeper API methods), you can run one locally and point Cursor at it.
Pick a server
Example:
GitHub - GLips/Figma-Context-MCP: MCP server to provide Figma layout information to AI coding agents like CursorGet a Figma Personal Access Token (PAT)
Figma → Settings → Security → Personal access tokens → Generate new token (copy it once).Add the Framelink Figma MCP server to your IDE
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}
How to Use:
Option 1: Select a Frame, Then Chat in Cursor
Open the Design
a. In Figma Desktop, open your file.
b. Click the frame or section you want (e.g. Hero, Pricing Page, Dashboard).-
Generate Tokens (recommended)
In Cursor chat, type:#get_variable_defs- Cursor shows colors, fonts, spacing used in your selection.
- Save these into tokens.ts or tailwind.config.ts.
Generate Code
a. In Cursor chat, type:#get_code
b. Then add a prompt like:Generate a Next.js page with React + Tailwind from my current selection. Use components from @/components/ui. Map all values to tokens, no hardcoded hex or px.
c. Cursor will create page.tsx (and child components if needed).Refine
a. If output uses plain , ask Cursor:Replace raw buttons with my <Button /> component.
b. Keep iterating until it matches your system.
Option 2: Copy & Paste a Figma Link
Get the Link
In Figma, right-click the frame → Copy/Paste → Copy link.Paste into Cursor
In Cursor chat, paste the link. Example:https://www.figma.com/file/xxxxxx?node-id=123-456Ask for Code
After the link, add a prompt:Turn this Figma frame into a responsive Next.js page using React + Tailwind. Use my components in @/components/ui. Map to tokens from get_variable_defs.Export Assets (if needed)
Ask Cursor:Export images/vectors from this frame into public/assets/... and update imports.
Which option to Use?
- Frame selection → Best when you already have Figma open. The MCP server passes selection data directly.
- Copy link → Best when someone shares a link in Slack/Docs. Cursor fetches design data for that node.
This content originally appeared on DEV Community and was authored by Deny Herianto
Deny Herianto | Sciencx (2025-11-03T15:19:53+00:00) Simplest Guide to use Figma MCP Server. Retrieved from https://www.scien.cx/2025/11/03/simplest-guide-to-use-figma-mcp-server/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.