Figma MCP server and skills
Gives coding agents design context from Figma (layout, variables, components, Code Connect mappings), and on the remote server lets them write back to the canvas.
Install
-
Claude Code plugin (MCP + skills)
claude plugin install figma@claude-plugins-official -
Claude Code (MCP only)
claude mcp add --transport http figma https://mcp.figma.com/mcp
Figma’s MCP server. It is the most direct way to hand a coding agent a design: frames, variables (design tokens), components and their Code Connect mappings to your real code components. On the remote server, the agent can also write to the canvas: build frames, components, variables and auto layout from your design system. The plugin bundles skills for design-to-code, Code Connect, generating a component library, and design-system rules.
When to use it
- Implementing a screen from a Figma frame using your existing components and tokens.
- Keeping light and dark themes in sync: variables come through as named tokens rather than raw hex values.
- Building or auditing a design-system library in Figma from code.
Before you install
- Rate limits depend on your seat. Starter plans and View/Collab seats get about 6 tool calls a month, so most people need a Dev or Full seat.
- Writing to the canvas is a beta that Figma says will become usage-billed.
- Using it means agreeing to the Figma Developer Terms. The repo carries no open-source license.
- Publisher
- Figma
- Works with
- Claude Code, Claude apps, Cursor, Codex, Gemini, Any agent
- Categories
- UX, UI & design systems, Frontend, MCP & integrations
- License
- Figma Developer Terms (no open-source license in the repo)
- Cost
- Free tier, paid plans