AI

Claude Code + Figma MCP Server

July 28, 2025

Written By Vishwas Gopinath

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

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 (MCP)

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.

Figma MCP Server

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.

Setting up Figma MCP Server with Claude Code

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:

Step 1: Enable the MCP Server in Figma

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. Keep this handy for the next step.

Step 2: Connect Claude Code

Open your terminal and run this single command:

That's it! Claude Code is now connected to Figma.

To verify:

You should see figma-dev-mode-mcp-server in the list.

Step 3: Start converting designs

Now the fun part. You have two ways to work:

Selection-based: Select any frame or component in Figma, then ask Claude:

Link-based: Copy a Figma link and paste it in your prompt:

Limitations of Figma MCP Server workflow

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.

Fusion: A better design to code workflow

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.

Surgical code updates

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.

Handles complex flows automatically

If you have a carousel design spread across three Figma frames, just drop them in. Fusion recognizes the pattern and generates a single, complete component with navigation, transitions, and responsive behavior. All in one go.

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.

Visual editing of real code

Here's what breaks the traditional workflow: after importing from Figma, you keep working visually. But you're not editing some abstract representation. You're editing production React/Vue/Angular code through a visual interface.

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.

Everyone ships production code

Here's how Fusion lets other teams handle their own changes while you tackle the interesting engineering challenges:

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.

Built for modern team workflows

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 future is already here

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: