Figma's official MCP server, expose live design structure to AI for accurate code generation
Visit WebsiteTL;DR - Figma MCP
- Figma's official MCP server, 16 tools for reading design data and writing to canvas
- AI generates code from real design structure, not screenshots. Code Connect maps components to your actual codebase
- Free plan: 6 calls/month. Need a Dev or Full seat on Pro ($16/mo) for real usage
What Users Say About Figma MCP
Figma's official Dev Mode MCP server reads the live structure of your Figma files — node tree, layout constraints, variables, tokens — and exposes it to AI agents for code generation. Users finally have the answer to 'generate code that matches my design' without screenshot-based guessing. The complaints: it requires a Dev/Full seat on paid Figma (Starter gets only 6 calls/month), and the Code Connect setup is real work.
Highlights
- Reads full design context: node tree, layout constraints, variants, tokens
- Code Connect maps Figma components to your actual React/Vue/Svelte imports
- Write-to-canvas lets agents create and modify designs (free during beta)
- Skills system lets teams customize agent behavior for their design system
- First-party and officially supported by Figma
Limitations
- Requires Dev or Full seat on a paid Figma plan ($12-$90/mo); Starter: 6 calls/month
- No image/asset support yet — images show as gray placeholders
- Code quality depends heavily on design structure (auto-layout, naming, tokens)
- Code Connect setup requires mapping components — real onboarding work
- Beta write-to-canvas features will eventually be paid
Best for: Frontend developers implementing Figma designs in code — especially teams with a well-structured design system. The right pick for anyone who's ever said 'I wish the AI could read my Figma file directly instead of me pasting screenshots.'
Editorial synthesis from industry coverage, product docs, and early user reports
Pros & Cons
Pros
- Code matches the real design, no guessing from screenshots
- Code Connect maps Figma components to your actual imports and prop interfaces
- Remote server works anywhere, no Figma desktop app required
- Write tools are free during beta
- Works with Claude, Cursor, VS Code Copilot, Codex, Gemini CLI
Cons
- Free Starter plan limited to 6 MCP calls per month, essentially unusable
- Requires Full or Dev seat on a paid plan for meaningful usage
- No image/asset support yet, images show as gray placeholders
- Custom fonts not supported
- 20 KB output response limit per tool call
- Beta quality, manual review of AI-generated designs recommended
Key Features
Pricing Plans
Starter
Free
- Unlimited drafts
- UI kits and templates
- 150 AI credits/day, up to 500 AI credits/mo
Professional - Full seat
$15/mo
- Unlimited files and projects
- Team-wide design libraries
- Advanced Dev Mode inspection and MCP Server
- 3,000 AI credits/mo
Professional - Dev seat
$12/mo
- Unlimited files and projects
- Team-wide design libraries
- Advanced Dev Mode inspection and MCP Server
- 500 AI credits/mo
Professional - Collab seat
$3/mo
- Unlimited files and projects
- Team-wide design libraries
- Advanced Dev Mode inspection and MCP Server
- 500 AI credits/mo
Organization - Full seat
$55/mo
- Unlimited teams
- Shared libraries and fonts
- Centralized admin tools
- 3,500 AI credits/mo
Organization - Dev seat
$25/mo
- Unlimited teams
- Shared libraries and fonts
- Centralized admin tools
- 500 AI credits/mo
Organization - Collab seat
$5/mo
- Unlimited teams
- Shared libraries and fonts
- Centralized admin tools
- 500 AI credits/mo
Enterprise - Full seat
$90/mo
- Custom team workspaces
- Design system theming and APIs
- SCIM seat management
- 4,250 AI credits/mo
Enterprise - Dev seat
$35/mo
- Custom team workspaces
- Design system theming and APIs
- SCIM seat management
- 500 AI credits/mo
Enterprise - Collab seat
$5/mo
- Custom team workspaces
- Design system theming and APIs
- SCIM seat management
- 500 AI credits/mo
What is Figma MCP?
Reviews
Be the first to review Figma MCP
Your take helps the next buyer. Verified LinkedIn reviewers get a badge.
Write a reviewBest Figma MCP Alternatives
Top alternatives based on features, pricing, and user needs.
Visual headless CMS and page builder
Transform designs into production-ready frontend code with AI, accelerating development workflows.
Build websites and apps from ideas or designs using AI-powered design-to-code automation.
AI-powered UI generation from Vercel
Explore More
Figma MCP FAQ
Is Figma MCP free?
How do I set up Figma MCP?
mcp.figma.com/mcp — no local install needed. For Claude Code: claude mcp add --transport http figma https://mcp.figma.com/mcp. For Cursor: add the URL in Settings > Tools & MCP. Authentication happens via OAuth in the browser.What is Code Connect?
Can Figma MCP write to my designs?
use_figma tool can create and edit frames, components, variables, styles, and text. The generate_figma_design tool converts rendered web UI into editable Figma layers (Code to Canvas). Write tools require a Full seat for production files.Which AI clients support Figma MCP?
What are the rate limits?
use_figma, generate_figma_design) are exempt from rate limits.Source: developers.figma.com
Guides & Articles
Best MCP Servers in 2026
Features Figma MCP
Best AI Agent Platforms in 2026
Expert guide
Best AI Agent Frameworks in 2026
Expert guide
MCP Server Authentication: OAuth 2.1, API Keys, and Security Best Practices
6 min read
What Is an MCP Client? How Claude, Cursor, and VS Code Connect to MCP Servers
9 min read
Best MCP Servers for Claude Code in 2026: The Complete Setup Guide
11 min read