Figma MCP Server: Official Design-to-Code for Claude
Figma's official remote MCP server gives Claude design context, variables and Code Connect data, plus canvas writes. Claude Code setup, use cases and limits.
By Claudekit Team Published 1 min read
- Type
- MCP Server
- Pricing
- Freemium
- Repository
- github.com
- GitHub stars
- 2,107
- Website
- developers.figma.com
The Figma MCP server is Figma’s official Model Context Protocol server. It gives coding agents like Claude Code structured design context from your Figma files: frames, components, variables, layout data and, with Code Connect, the real components from your codebase. The figma/mcp-server-guide repository holds the setup guide and the agent skills that ship with the plugin.
Who it is for
Product teams who design in Figma and want Claude to implement screens accurately, and design-system owners who want generated code to reuse existing components instead of inventing new ones.
Install in Claude Code
The recommended route is the Figma plugin from Anthropic’s official marketplace, which bundles the MCP configuration and skills:
claude plugin install figma@claude-plugins-officialManual setup against the hosted server:
claude mcp add --transport http figma https://mcp.figma.com/mcpRun /mcp in a session to complete the Figma sign-in. Our plugins guide explains how marketplace installs work.
Use cases
- Implement a frame: paste a Figma link and ask Claude to build it in your framework.
- Design tokens: pull variables and styles so generated CSS matches the design system.
- Code Connect: map Figma components to code components so output reuses them.
- Write to canvas (beta, remote only): have the agent create or update frames, components and auto layout in Figma.
Pros
- Official, maintained by Figma, with OAuth instead of pasted tokens.
- Richer context than screenshots, including variables and component mappings.
- Plugin install adds skills for common design-to-code workflows.
Cons and caveats
- Rate limits are tied to your seat; Starter and View/Collab seats get very few calls per month.
- Canvas writes are free during beta but Figma says they will become usage-based.
- Large frames can produce big responses; select smaller frames to save context.
Links
- Docs: developers.figma.com/docs/figma-mcp-server
- Guide repo: figma/mcp-server-guide
- Community alternative: Framelink MCP for Figma
- Pair it with the frontend-design skill and our MCP servers guide.
Frequently asked questions
Is the Figma MCP server free?
Access depends on your Figma seat. Starter plans and View or Collab seats are limited to a handful of tool calls per month; Dev or Full seats on paid plans get normal rate limits.
Do I need the Figma desktop app?
No for the remote server at mcp.figma.com. Canvas write features are only available on the remote server.
How is this different from Framelink?
This is Figma's own hosted server with OAuth, Code Connect and write support. Framelink is a community server that uses a personal access token and trims API responses.