"Can Cursor read Figma files yet?"
This might be the most asked question of 2025, probably right behind "what are the best AI coding tools right now?"
It makes sense though. AI has changed how we write code, but we're still manually converting designs to components. That workflow hasn't really evolved.
With the Figma MCP Server, you can now connect Figma directly to Cursor through the Model Context Protocol. But does it actually deliver the design-to-code workflow we've all been waiting for?
Cursor is an AI-powered code editor built on VS Code that directly integrates large language models (LLMs) into your coding workflow. It deeply understands your codebase context and can see your entire project structure, understand your patterns, and generate code that fits naturally into your existing architecture.
This context awareness is exactly why connecting it to Figma seems so promising: if Cursor can understand your code and Figma holds your designs, bringing them together should create the perfect design-to-code pipeline.
Model Context Protocol is an open standard that allows AI assistants to connect with various data sources and tools. Think of it as a universal adapter that lets AI models understand and interact with different types of content beyond just text.
The Figma MCP Server specifically bridges Figma's design data with AI tools that support the MCP standard. It exposes your Figma files, components, and design tokens in a way that AI models can understand and work with. When connected to Cursor, it lets you reference Figma designs in your prompts and generate code that matches your mockups.
The appeal is obvious: instead of describing what you want or taking screenshots, you could theoretically just point to a Figma component and say "build this," and Cursor would understand exactly what you mean.
Let's walk through the setup process.
Before we start, make sure you have:
- Cursor installed (latest version/ version with MCP support)
- A Dev or Full seat Figma account with at least one design file
First, you'll need the Figma desktop app (the MCP server currently requires it):
- Open the Figma desktop app and update to the latest version
- Create or open any Figma design file
- Click the Figma menu in the upper-left corner
- Under Preferences, select "Enable Dev Mode MCP Server"
You'll see a confirmation that the server is running. It runs locally at http://127.0.0.1:3845/sse.
Adding the Figma MCP Server to Cursor is refreshingly simple:
- Navigate to https://docs.cursor.com/tools/mcp
- Find and click the "Add Figma MCP Server" button
- This will open Cursor with all the configuration inputs already prefilled
- Click "Install"
You'll see the Figma MCP Server appear in your MCP tools list with a green dot, indicating it's live and ready to use.
Note: If you don't see the green dot or if the server shows "0 tools", try toggling the Figma MCP Server off and back on to restart it.
Now the fun part. You have two ways to work:
Link-based: Copy a Figma link and paste it in your prompt:
"Convert this card design to React: [figma-link]"Selection-based: Select any frame or component in Figma, then prompt:
"Add a button to this card. Use my current selection in Figma to get the designs"While connecting Figma to Cursor sounds like the holy grail of design-to-code workflows, there are some gaps:
Can't update existing code: The integration is great at generating new components from scratch, but what happens when your design evolves? Without a deep understanding of how your design system works, it's difficult to make surgical updates to existing code, often requiring regeneration or manual edits.
Multi-frame component orchestration: Got a multi-step onboarding flow across five Figma frames? You'll need to prompt Cursor for each frame individually, then write additional prompts to wire them together with proper state management and transitions. Each request burns through tokens and you need careful coordination of how the pieces fit together.
No visual refinement: Want to adjust that hover state or tweak responsive behavior? There's no way to visually iterate on the generated output. You're back to the traditional cycle of editing code, saving, and refreshing. You can keep prompting, but AI can only understand so much from screenshots and you'll just burn through tokens without getting what you want.
Limited to developers: The entire workflow lives in the command line. While this might seem fine at first, it means you become the bottleneck for every change. Every A/B test variant from your PM, every "can we make this text bigger?" request from marketing, and every "the padding feels off" comment from designers all land on your desk. Speaking from experience, these aren't the problems that got us excited about programming in the first place.
Here's the thing about the current AI coding revolution: we've made writing code easier, but we haven't fundamentally changed who can ship to production or how design changes flow through the development process.
This is why we built Fusion differently.
Instead of adding AI to existing developer tools, Fusion reimagines design-to-code as a visual experience that generates code that actually fits into your codebase while saving you from the repetitive parts of implementation.
Fusion doesn't just generate code. It actually understands how your frontend renders and how your design system works. When designs evolve (and they always do), you simply sync the latest from Figma. Fusion applies only the visual changes while preserving all your logic, state management, and integrations. You don't have to start from scratch with every update.
Drop in a five-frame onboarding sequence, and Fusion recognizes the pattern. The output is a single component with navigation, transitions, animations, and responsive behavior. Not five separate files you need to wire together. Not multiple prompts and context windows. One import, one smart component.
The AI understands design patterns like carousels, wizards, and tab interfaces. It generates the complete implementation, not just the pieces.
After import, you keep working visually on real production code. Adjust padding, watch the CSS update. Add interactions, see the event handlers. Test responsive breakpoints, watch your media queries adapt. This isn't a mock-up tool that exports code. You're manipulating your actual React/Vue/Angular components through a visual interface. When it looks right in Fusion, it IS right in production. Same code, same behavior, same performance.
Here's how Fusion lets other teams handle their own changes while you tackle the interesting engineering challenges:
Designers work where they're comfortable: in a visual environment. Import from Figma, see exactly how it renders with your real components, adjust spacing and interactions visually. Every change generates production-ready code that matches your standards. No IDE setup, no terminal commands.
Product Managers can turn mockups into working prototypes using your actual components. That "quick idea" for a new feature? They can build it themselves and share a preview link in Slack.
Marketing teams can finally own their launch timeline. They select components from your design system, customize them visually, and publish to production. All while maintaining your code standards.
Every change happens on a git branch with automatic preview URLs. You can set granular permissions so designers can safely edit specific components while your critical infrastructure stays protected.
The AI even responds to PR comments, fixing build issues and iterating based on team feedback. This isn't a proof-of-concept tool. It's infrastructure that plugs right into how teams actually work today.
Here's how to get started:
- Connect your repo (or start fresh): Link your existing GitHub repository to Fusion (works with React, Next.js, Svelte, Vue, or Angular projects), or if you don't have a project yet, start with a simple prompt like "Create a contact form with form fields and validation."
- Work with your designs: Import single Figma frames, convert multiple frames into features like carousels, transform component variants into proper code components, or use designs as reference to match design tokens.
- Make changes: Use visual editing and AI prompts to build and modify components. Generate new landing pages, dashboards, or any UI elements you need.
- Preview and iterate: See your changes live and iterate visually.
- Create a PR: When you're happy with the results, create a pull request for team review.
With Fusion, your Figma designs become production-ready code in seconds, not sprints.
If you enjoyed this post, check out these related articles on our blog:
