Give Claude Code eyes and hands on your Figma design files using MCP
Why I stopped being the translation layer between Figma and Claude Code
If you’re still uploading screenshots and writing paragraphs explaining your UI to Claude Code, you’re working way too hard.
A few days ago, I was talking to a friend who built an entire product with Claude Code. Took them only a few months to get the product ready for market. Impressive stuff, especially given that they are not engineers.
But the way they described building it was very April 2025.
Screenshot. Upload. “This button is 16px from the edge. The background is #F5F5F5. The card has 24px padding and a 12px border radius. The font is Helvetica Neue at 14px...”
That works. It’s also super slow and error prone.
There’s a better way…
What Figma MCP Actually Does
MCP stands for Model Context Protocol, an open standard for how AI tools connect to external data sources.
Figma’s MCP server exposes your design files directly to Claude Code. Not as screenshots. As structured data: layer hierarchy, spacing values, typography scales, color tokens, component properties, layout constraints, etc.
Instead of Claude guessing what your design looks like from a screenshot, or having to granularly describe the design file, it reads the actual Figma file. It knows that button uses your primary-500 color token. It knows that card has auto layout with 16px gap. It knows which components are instances of your design system.
The Setup (Under 5 Minutes)
You have two options: Remote or Desktop.
Option A: Remote Server (Easiest)
No Figma desktop app required. Works with just a link.
claude mcp add --transport http figma https://mcp.figma.com/mcp
Restart Claude Code. Run /mcp, select figma, and authenticate with your Figma account.
Option B: Desktop Server (More Powerful)
Requires the Figma desktop app, but gives you selection-based prompting—select a frame in Figma, and Claude already knows what you’re working on.
Open Figma desktop → Preferences → Enable Dev Mode MCP Server
You’ll see a confirmation that it’s running at
http://127.0.0.1:3845/mcpAdd to Claude Code:
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
Restart Claude Code. Verify with /mcp.
The desktop server is selection-based. Whatever you select in Figma becomes the context. The remote server is link-based - you paste a Figma URL into your prompt.
I use both. Remote for quick access and desktop when I’m deep in a build.
The Three-Step Workflow
Step 1: Solid Figma Designs
This is the unglamorous prerequisite. Figma MCP is only as good as the file it reads.
What “good” looks like:
Auto Layout everywhere. This is how Claude understands responsive intent.
Components for reusable elements. Buttons, cards, inputs - anything used twice should be a component.
Variables for design tokens. Colors, spacing, radius, typography. Named semantically.
Semantic layer names.
CardContainertells Claude something.Group 47tells it nothing.
If your Figma file is a mess, random frames, no auto layout, hardcoded colors, Claude will still generate code. But you’ll spend more time fixing it than you saved.
The cleaner the file, the closer to production-ready the output.
Step 2: Connect and Authenticate
Described, above.
Step 3: Prompt with Context
Here’s where the magic happens.
Remote server:
Convert this Figma design to React with Tailwind: [paste Figma link]
Desktop server: Select your frame in Figma, then:
Implement my current Figma selection as a React component using Tailwind.
That’s it. Claude reads the design structure, pulls the tokens, and generates code.
What Claude Actually Gets from Figma
The MCP server exposes several tools. Understanding them helps you prompt better.
get_design_context: The main one. Returns structured XML of your selection: layer hierarchy, positions, sizes, styles, component properties. Default output is React + Tailwind, but it adapts to your project.
get_variable_defs: Returns all variables and styles used in your selection. Colors, spacing, typography tokens. Useful for implementing design tokens you haven’t added to your codebase yet.
get_code_connect_map: If you’ve set up Code Connect (more on this below), returns the mapping between Figma components and your actual code components. This is how Claude knows to use your Button, not generate a new one.
take_screenshot: Captures your selection visually. Claude uses this to verify layout fidelity. Adds tokens but improves accuracy.
create_design_system_rules: Generates a rules file that teaches Claude your conventions: token naming, folder structure, component patterns. Run this once and save it.
The Secret Weapon: Code Connect
Here’s what separates “pretty good” output from “production-ready.”
Code Connect links your Figma components to actual code components in your repository. When Claude sees a Button instance in Figma, it doesn’t generate a new button—it imports your Button from your component library.
Two ways to set it up:
Code Connect UI (easier): Inside Figma, connect to your GitHub repo and link components visually. Good for design-heavy teams.
Code Connect CLI (more powerful): Define mappings in your codebase with property mappings and code snippets. The MCP server then includes your exact implementation patterns.
Without Code Connect, Claude is guessing which components to use. With it, Claude knows exactly which imports to reach for.
This is the difference between “rebuild everything from scratch” and “extend my existing system.”
Teaching Claude Your Codebase
The MCP server knows your Figma file. It doesn’t know your codebase.
Fix this with your CLAUDE.md (for example):
## Figma Integration
When implementing Figma designs:
1. Use `get_design_context` to read the design structure
2. Use `get_variable_defs` if you need token definitions
3. Always check for Code Connect mappings before creating new components
### Project Conventions
- Components live in `src/components/`
- Design tokens are in `src/styles/tokens.css`
- Use existing components from our design system before creating new ones
- All spacing uses our defined tokens: `space-1` through `space-12`
### Framework
- React 18 with TypeScript
- Tailwind CSS
- All components should be functional with proper TypeScript interfaces
This context compounds. The more you define, the more consistent Claude’s output.
You can also run the create_design_system_rules tool once, it generates a rules file based on your existing codebase that Claude can reference.
The Compound Effect
When the cost of translating designs drops to near-zero, you translate more. When you translate more, you iterate faster. When you iterate faster, you ship more!
Figma MCP gets you to 80% instantly. You iterate your way to 95%.