figma/mcp-server-guide

What it is

The Figma MCP server gives AI coding agents structured access to Figma design files: design context, variables, components, screenshots, and selected frames. With that context, an agent can generate code that follows your design system instead of guessing from a screenshot. The server also supports writing frames, components, variables, and auto layout back into Figma, though that capability is currently remote-server only and in beta.

This repository is the setup and usage guide: client configuration for VS Code, Cursor, Claude Code, Gemini CLI, and other Streamable HTTP clients, plus prompting advice and workflow skills. It is aimed at product and frontend teams who already use Figma and an MCP-capable coding agent.

Connect a client

The server endpoint is https://mcp.figma.com/mcp. Setup differs per client.

For Cursor, the recommended route is the Figma plugin, installed from Cursor's agent chat:

/add-plugin figma

The plugin bundles MCP configuration and workflow skills. Manual setup is also documented: add https://mcp.figma.com/mcp as an MCP server in Cursor settings.

For Claude Code, install the official plugin:

claude plugin install figma@claude-plugins-official

Manual setup is:

claude mcp add --transport http figma https://mcp.figma.com/mcp

For Gemini CLI:

gemini extensions install https://github.com/figma/mcp-server-guide

Then run gemini, execute /mcp auth figma, and authenticate with Figma.

For VS Code, use the command palette: MCP:Add Server, choose HTTP, paste https://mcp.figma.com/mcp, and set the server ID to figma. MCP in VS Code requires GitHub Copilot enabled on your account. Other Streamable HTTP clients can use the same URL in their MCP configuration.

After connecting, copy a Figma frame or layer link and ask your agent to implement the design at that URL. The client extracts the node ID from the link rather than navigating to it. To confirm tools are available, try #get_design_context in VS Code or inspect the configured server list in your client.

More client-specific detail is in the Figma MCP developer documentation and the official Dev Mode MCP guide.

Usage constraints

Rate limits apply to tools that read Figma data; tools that write to Figma files are exempt. Starter plan and View/Collab seats are limited to 6 tool calls per month. Dev or Full seats on Professional, Organization, or Enterprise plans have per-minute limits matching Tier 1 of the Figma REST API, and Figma may change those limits. See the seat and plan details for Figma pricing and plan features.

The write-to-canvas feature is beta and free during the beta period, but Figma says it will eventually become usage-based paid. Image generation through generate_image requires permission and discloses Figma AI credit usage. Make integration depends on MCP resources support in the client. The repository is a guide and does not declare a license; use of the server and related skills is covered by the Figma Developer Terms.

Generated code quality depends heavily on the Figma file: use components, variables, semantic layer names, and Auto layout, and link components via Code Connect so the agent reuses real code instead of guessing.

Skills and best practices

The guide recommends get_design_context first for a structured React + Tailwind representation, then get_variable_defs for tokens when output lacks design variables, and splitting large selections into smaller components. Project-level rule files for Cursor, Claude Code, and general quality rules are provided so agents reuse design-system components and avoid hardcoded values.

Two standalone skills live in the repository: video-interaction-mapper turns UI recordings into annotated Figma storyboards, and generate-project-plan turns a PRD into a FigJam project plan. The complete tool list is maintained in the tools and prompts documentation.

HotRepo's take

The repository entered the Python daily ranking on 2026-11-10 at position 12 with 6 stars gained that day, putting it in the top tier of that day's list. It is a high-star project (2,169 stars, 216 forks), but it is a documentation and configuration guide rather than a server implementation; the actual MCP server is a hosted Figma endpoint. Its usefulness is tied directly to Figma seats and plan limits, which the guide itself spells out. Readers without a paid Dev/Full seat face a 6-call monthly cap, so the setup effort is only worth it for teams already on those plans.