Figma MCP Server Guide: connecting Figma design context to Cursor, Claude Code, and VS Code

A remotely hosted HTTP server for design context, not a locally run process

Figma's MCP server lives at https://mcp.figma.com/mcp as a Streamable HTTP endpoint. Connecting to it requires no local installation of server software; any supported MCP client adds the URL and the server responds to tool calls over HTTP. This guide repository documents that connection step for 4 clients: Cursor, VS Code, Claude Code, and Gemini CLI.

The server exposes Figma design files as structured context for AI agents. Instead of a developer manually copying tokens, dimensions, or component names from Figma into a prompt, a connected agent can call design context tools directly and receive the data as structured responses. The primary use case is code generation from Figma frames, where an agent needs exact token values, layout measurements, and component names rather than approximations.

An alternative is calling the Figma REST API directly from a custom integration. The REST API supplies the same design file data, but response parsing, context injection, and agent tool definitions all require custom code. The MCP server structures that work as ready-made tools that MCP-aware agents call without building a custom layer.

Two rate limit tiers: a 6-call monthly hard cap versus per-minute throttling

Read tools are rate-limited, and 2 tiers apply depending on the account. A Starter plan account and any View or Collab seat on a paid plan share a single monthly budget of 6 read calls. Once that budget is spent, no further design context reads are available until the month resets; the README does not describe any way to purchase additional calls within the period.

Accounts with a Dev or Full seat on any of the 3 plans that qualify (Professional, Organization, Enterprise) get a different structure: per-minute throttling that follows the same schedule as the Tier 1 Figma REST API. Figma reserves the right to adjust these limits, as the README states.

Write calls against the canvas are accounted for separately; they do not draw from the 6-call monthly pool. That separation means a Starter plan account can create or modify frames through the agent without touching its read allowance, while even a single verification pass that reads design context costs 1 of its 6 monthly calls. Anyone who expects to read design context repeatedly before committing to code should count their calls carefully against their seat type before adopting this server.

VS Code requires GitHub Copilot and uses a config structure that differs from Cursor's

Of the 4 supported clients, VS Code has 2 requirements the others do not. A NOTE in the README states that GitHub Copilot must be enabled on your account to use MCP in VS Code. No equivalent prerequisite appears for Cursor, Claude Code, or Gemini CLI. VS Code users without Copilot cannot proceed under this setup path.

The JSON configuration format also differs between VS Code and Cursor. VS Code's mcp.json uses "servers" as the top-level key and includes a "type": "http" field:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Cursor's manual config uses "mcpServers" at the top level and omits the type declaration entirely. Copying one format into the other editor produces a broken configuration with no error message that points to the mismatch. After setup in VS Code, type `#get_design_context` in agent mode to confirm the tools are available; if none appear, the README says to restart VS Code.

Cursor uses /add-plugin figma; Claude Code offers a plugin command and a manual alternative

Cursor's recommended path installs the Figma plugin with 1 command in the agent chat:

/add-plugin figma

This command configures the MCP server connection and installs skills for implementing designs, connecting components via Code Connect, and creating design system rules. Asset handling rules are also included.

For Claude Code, the recommended path uses the official plugin marketplace:

claude plugin install figma@claude-plugins-official

The manual alternative registers the server directly without the plugin:

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

3 management commands work after setup: `claude mcp list` shows all configured servers, `claude mcp get my-server` retrieves details for a specific server, and `claude mcp remove my-server` removes one. Gemini CLI installs the extension using the repository URL: `gemini extensions install https://github.com/figma/mcp-server-guide`, then authenticates with `/mcp auth figma` inside the CLI.

The Cursor and Claude Code plugins bundle agent skills; VS Code gets only the raw server connection

Installing via a plugin does more than register the server URL. For Cursor, the plugin bundles skills for 3 specific workflows: implementing Figma designs, connecting components through Code Connect, and creating design system rules. Asset handling rules are also included, covering how the agent should request and apply images from the MCP server.

For Claude Code, the plugin links to Agent Skills. The README references the skills documentation at claude.com/blog/skills but does not enumerate which specific skills are included in the Figma plugin bundle.

VS Code users who follow the manual mcp.json path receive only the server connection. No skills or asset-handling rules accompany the manual setup for VS Code, and the README does not describe any alternative way to add those workflow guides to VS Code. Anyone expecting VS Code parity with the Cursor plugin workflow will need to verify current capabilities through Figma's developer documentation, since the gap is not addressed in the README.

Canvas write access is free now, with a usage-based charge planned for after the beta

Write to canvas lets agents create and modify frames, components, variables, and auto layout in Figma files, treating the design system as the source of truth. No pricing is attached to canvas writing while the beta runs; a future update will add a charge based on usage, but no rate structure or timeline has been documented in the README.

Image generation requires a 2-step sequence. An agent must first ask permission and disclose Figma AI credit usage before calling `generate_image`. After generation, `upload_assets` uploads the result and applies it to the design. This call pair is the only documented multi-tool sequence in the README.

Generating Figma designs from web pages, by capturing or converting a web page from inside an AI coding agent, is listed as rolling out. The README marks this feature separately but gives no detail on availability or prerequisites. Teams planning around web-to-Figma conversion should verify current status in the developer documentation before building on it.

Code Connect reuses existing components; frame selection drives code generation

Code Connect bridges generated code to an existing component library. Without it, an agent working from a Figma frame may write new HTML or define new components that duplicate what already exists in the codebase. When Code Connect maps Figma components to their code equivalents, the agent can reference the existing implementation rather than duplicating it. Setup details are in a separate help article linked from the README.

Design context extraction gives the agent access to variables, components, and layout data from inside the IDE. For teams working with design systems, this means the agent can reference actual token values and component hierarchy rather than inferring them from visual output, which is where the feature is most useful.

Frame-to-code generation is the most direct workflow: select a Figma frame and an agent produces code from it. The README positions this for product teams building new app features or iterating on existing ones. No specific output languages or frameworks are named.

A guide and config package, not the server process

This repository does not contain the Figma MCP server. It holds the guide, plugin configuration directories (.claude-plugin/ and .cursor-plugin/), 4 skills directories (skills/, skills-figquery/, workflow-skills/, figma-power/), and configuration files .mcp.json, server.json, and gemini-extension.json. The primary language is listed as Python in the repository metadata, though the README gives no explanation for this and the visible top-level content is documentation and JSON configuration files.

No license is documented in this repository, and the last push was on 2026-10-05. Any tooling that depends on the plugin configurations or skills files must track the main branch directly, since there is no version scheme for this repo.

The README links to the Figma Developer Terms at figma.com/legal/developer-terms/, which users agree to by connecting to the MCP server. Those terms govern the hosted service, not the configuration files in this repository. Anyone planning to redistribute or fork the plugin configs should check the repository directly for a permissions statement before doing so, since no license statement appears in the available content.

Editorial conclusion

Use the Figma MCP server if you have a Dev or Full seat on a Professional, Organization, or Enterprise plan and want Figma design data available inside Cursor or Claude Code without writing a custom REST API integration. The Starter plan and View or Collab seats on paid plans are capped at 6 tool calls per month, which is not enough for regular use. Before adopting, confirm your Figma seat type, check the current rate limits at developers.figma.com, and note that the canvas write feature will eventually move to a usage-based paid tier with no date specified.

Frequently asked questions

Official sources

1. figma/mcp-server-guide on GitHub
2. Issues
3. Project website
4. README