Figma Dev Mode MCP Server
Local MCP server in Figma Dev Mode that pipes design context (variables, components, layout) to AI coding tools like VS Code, Cursor, Windsurf, and Claude Code.
At a Glance
Pricing
Subscription
Engagement
Available On
About Figma Dev Mode MCP Server
The Figma Dev Mode MCP Server exposes design context from an open Figma file to your AI coding tool via the Model Context Protocol (MCP). Run it from the Figma desktop app and connect your editor’s MCP client to http://127.0.0.1:3845/mcp. Once connected, agents can call tools to generate code for a selected frame (get_code – default React + Tailwind), extract tokens and variables (get_variable_defs), fetch a Code Connect mapping to reuse your components (get_code_connect_map), and optionally capture images for layout fidelity (get_image). You can provide selection-based context (current frame) or link-based context (copy a frame URL) and guide output with rule files. The server communicates over SSE and works with editors that support MCP (VS Code, Cursor, Windsurf, Claude Code). Availability: open beta; requires a Dev or Full seat on Professional, Organization, or Enterprise plans.
Best for: developers who want reliable, structured design context in their IDE; teams with Code Connect set up to enforce component reuse and design token fidelity.
Community Discussions
Be the first to start a conversation
Share your experience with Figma Dev Mode MCP Server, ask questions, or help others learn from your insights.
Pricing
Dev seat (Professional)
Professional plan with Access to Dev Mode and MCP Server (open beta) and Editor integration via MCP for power users.
- Access to Dev Mode and MCP Server (open beta)
- Editor integration via MCP
Dev or Full seat (Organization / Enterprise)
Enterprise-grade solution with Access with eligible seats on higher plans and Enterprise admin & security controls and dedicated support.
- Access with eligible seats on higher plans
- Enterprise admin & security controls
Capabilities
Key Features
- Local MCP server in Figma desktop (open beta)
- Selection- or link-based design context for AI agents
- Tools: get_code (React+Tailwind by default), get_variable_defs, get_code_connect_map, get_image
- Supports project rules for consistent output
- SSE transport; HTTP endpoint at http://127.0.0.1:3845/mcp
- Works with VS Code, Cursor, Windsurf, Claude Code
- Code Connect integration to reuse your components