AI has already transformed how we write code. The next frontier? Teaching it to read our designs.
Today, with Claude Code's new MCP server support, that frontier is just a terminal command away. Point it at your Figma files, and what once required hours of manual translation now happens in seconds.
But can AI truly capture the nuance of your designs, respect your component architecture, and generate code you'd actually want to ship?
Claude Code is Anthropic's agentic coding tool that lives in your terminal and helps you turn ideas into code. It can build features from descriptions, debug and fix issues, navigate your codebase to answer questions and automate tedious tasks.
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 Claude Code, it lets you reference Figma designs in your prompts and generate code that matches your mockups.
Before we start, make sure you have:
- Claude Code installed (
npm install -g @anthropic-ai/claude-code) - A Dev or Full seat Figma account with at least one design file
The setup takes just a few minutes. Here's how to get everything running:
- 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. Keep this handy for the next step.
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sseThat's it! Claude Code is now connected to Figma.
To verify:
claude mcp listYou should see figma-dev-mode-mcp-server in the list.
Selection-based: Select any frame or component in Figma, then ask Claude:
"Add a button to this card. Use my current selection in Figma to get the designs"Link-based: Copy a Figma link and paste it in your prompt:
"Convert this sign-up card design to code: [figma-link]"While the Figma MCP Server + Claude Code combination is pretty cool, there are some practical considerations for production workflows:
Can't update existing code: Claude Code 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.
Complex multi-frame flows: Converting a multi-screen flow like a carousel or onboarding sequence requires extra work. You need to convert each Figma frame individually, then prompt Claude Code again to combine them into an interactive component. Each step means more tokens, more time, and careful coordination of how the pieces fit together.
No visual refinement: The visual feedback loop ends once Claude Code generates your component. Want to adjust that padding or tweak the hover state? You're back to editing code manually and refreshing your browser. There's no way to iterate on the generated output visually. 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.
This is where we need to talk about why we built Fusion differently.
We asked ourselves: what if the problem isn't that we need better AI? What if the problem is that we're forcing a visual, collaborative process into a text-based, single-player workflow?
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.
No multiple prompts. No manual assembly. No burning through tokens. It understands how your frames relate to each other and creates components that actually work.
Adjust padding? See the CSS update in real-time. Add a hover effect? Watch the component respond immediately. Test responsive breakpoints? Resize the canvas and see your media queries in action.
When it looks perfect in Fusion, it looks perfect in production. Because it's the same code.
Designers import their Figma designs through a visual interface and see exactly how they'll render in production. No terminal required. They can adjust spacing, refine interactions, and perfect responsive behavior. All while generating clean code.
Product Managers can take any Figma mockup and create 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 build landing pages without begging for developer time. They select components from your design system, customize them visually, and ship 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.
The convergence of AI and design tools is just beginning. In six months, we'll look back at manual HTML/CSS coding the way we now view table-based layouts. It was a necessary step in our evolution, but ultimately primitive.
The question isn't whether AI will transform design-to-code workflows. It's whether you'll adopt tools that democratize this capability across your entire team, or keep it locked in the terminal.
Fusion represents our bet on the future: a world where anyone who can imagine a feature can build it, where design updates flow naturally to production, and where the gap between idea and implementation disappears entirely.
Ready to see what your team could build? Try Fusion for free and ship your first component in minutes, not hours.
If you enjoyed this post, check out these related articles on our blog:
