Listen up, developers! If you're still manually copying design tokens from Figma or screenshotting components like it's 2010, you're doing it wrong. MCP is like having a direct hotline between your editor and Figma. Think of it as your personal Figma assistant that lives right inside Cursor. Pro tip: Replace YOUR_API_KEY_HERE with your actual Figma API key. Restart Cursor, and you're ready to go!
The Figma MCP server gives Cursor structured access to Figma files and tools. It can read design context such as components, variables, layout data, FigJam content, and Make resources, generate code from selected frames, use Code Connect to stay aligned with real components. When moving from Cursor to Figma, you can also write directly to the canvas to create or update native Figma content, and send live web interfaces to Figma as editable layers.
Jump to the setup instructions → This article describes how to set up the Figma MCP server in Cursor. Figma provides two versions of the Figma MCP server: remote and desktop. The remote Figma MCP server is the version most users need and has the broadest set of features. The desktop version is for specific organization and enterprise use cases. You should then see the Figma MCP server is enabled in Cursor and ready to use.
Set up the desktop Figma MCP server
Figma provides the local desktop version of the Figma MCP server for some specific organization and enterprise use cases, but we strongly recommend using the remote version of the Figma MCP server. You should see the Figma MCP tool enabled in Cursor. Press enter or click to view image in full size.
As you might have seen from the articles I’ve been posting, I’ve been using and testing AI tools that help me be faster and focus on what truly matters as a product designer, the final user experience. Until recently, I was relying mostly on v0/lovable to quickly share ideas with my peers and get early feedback without spending hours prototyping. But about a week ago, I started using Figma MCP Server with Cursor, and honestly, it’s been mind-blowing!
Why cursor feels different
With this article, I want to share my experience using this tool and how it compares to others. Recently, I shared an example with my team that illustrates some of the explorations I’ve been doing with it, and in that example, with a single prompt (yes, just one!), I got a nearly pixel-perfect flow. It took me five minutes, 5 minutes, that’s how fast it was!
Why cursor feels different, cursor as a tool, and how it helps me as a designer. I can validate pixel-perfect designs in under 10 minutes, and that’s huge. There are prompts to fine-tune, maybe 3 or 4 iterations, but even then, it still brings a huge boost in speed to day-to-day workflow.
There are some prompts that you’ll need to fine-tune, maybe 3 or 4 iterations but even then, compared to other tools, it still brings a huge boost in speed to my day-to-day workflow. This is the power of using Cursor for sharing product design thoughts. I’m not even talking about the broader potential of designers being able to fix UI/UX issues quickly, reducing the burden on engineers who already have so much on their plates.
Real-world examples and outcomes
Example #1: I needed to share some concerns with my team about a specific flow, and I wanted to quickly illustrate a few ideas for improving it. I immediately recorded a Loom and shared it with my team. Press enter or click to view image in full size
Example #2: I wanted to share with my team the interface behavior and the error message that should appear if the user doesn’t select any option. The following prompt I provided was: 2 things, can you center the CTA and fix the button in the top-right corner to an “X”? Cursor prompt + final result
This is the power of using Cursor for sharing product design thoughts. I’m not even talking about the broader potential of designers being able to fix UI/UX issues quickly, reducing the burden on engineers who already have so much on their plates.
However, like any new tool, there are frictions. The auto-clear chat option is enabled by default, which means you lose your chat history unless you manually turn it off. I like to keep my chats available so I can go back and copy prompts, whether to experiment with them or share them with others. Cursor Settings / auto-clear chat option
Sometimes the model takes a long time to “think,” and I end up cancelling it and resending the prompt. The second time, though, it always works smoothly. Cursor feels simple and smart when it comes to understanding prompts, bringing a new approach compared to older tools.
Step-by-step setup guide
- Step 1: Enable MCP Server in Figma - Open Figma desktop app, click the Figma icon in the top-left corner, go to Preferences, and select Enable Dev Mode MCP Server. Note: MCP Server runs locally, requiring the desktop app, not available on the web version. Press enter or click to view image in full size.
- Step 2: Set Up MCP Client (AI Model) - After enabling the MCP server, connect it with an AI code editor like VS Code, Cursor, Windsurf, or Clude Code. If it isn’t green, restart the connection by toggling it off and on. Press enter or click to view image in full size. Now, Cursor and Figma can seamlessly communicate, allowing Cursor to understand and incorporate your design context.
- Step 3: Building Your Design with Prompts - Use variable tokens, styles, and design system components. Employ Figma’s variables for spacing, colors, and effects. Utilize components from your design system, especially elements like input fields and buttons with multiple variants. These practices ensure accurate context delivery to the AI client, enabling precise code generation. Press enter or click to view image in full size.
As shown above, I’ve used variables for margins, padding, gaps, colors, and effects. Additionally, I’ve used input fields and buttons from the design system, which have variants. This not only accelerates development but also bridges the gap between design and coding, opening new avenues of creativity and productivity.
Table: Key takeaways from Figma MCP in Cursor
| Aspect | Benefit |
|---|---|
| Direct design context | Access to components, tokens, layout data, and FigJam content in real time |
| Code generation | Generate code from selected frames with Code Connect |
| Bidirectional editing | Write to canvas in Figma and push live web interfaces as editable layers |
| Setup variants | Remote MCP server preferred for most users; desktop version for enterprise needs |
Images and videos
To illustrate the integration steps and UI moments, use the following visuals where appropriate.
Figma MCP + Cursor: The New AI Design System Workflow
Remember, the goal is to accelerate the workflow from design to code by preserving rich context rather than relying on static images or manual token copying. The MCP server brings a focused, scalable approach to collaborative design and development, slashing iteration cycles and enabling truly pixel-faithful handoffs.