Figma MCP Server

The Figma MCP server brings Figma design context directly into AI coding workflows: read variables, components, and layout data from Figma files, turn selected frames into code, keep generated code aligned with your own codebase via Code Connect, and retrieve resources from Figma Make files. With the right skills, the agent can also write directly to the canvas — creating or updating frames, components, variables, and auto layout in Figma Design files, editing FigJam boards with stickies, sections, connectors, and shapes, and generating architecture or ER diagrams in FigJam from prompts, code, or structured input. On supported clients, it can additionally capture a web app's live rendered UI into a new Figma file.

Access depends on your Figma plan

Figma runs the server exclusively as a hosted service at https://mcp.figma.com/mcp. Access and usage limits depend on your Figma plan and seat type: on the Starter plan it's up to 20 calls per month, and with a View or Collab seat on a paid plan only up to 6 per month. Only a Dev or Full seat on a paid plan (Professional, Organization, or Enterprise) unlocks a practical quota — up to 200 calls per day on Professional, up to 600 per day on Enterprise, each with an additional per-minute cap. A desktop variant of the server is available for organizations with special requirements, but Figma recommends the remote option for most users. Only MCP clients listed in the Figma MCP Catalog can connect, including Claude Code, Cursor, VS Code, and Xcode.

Why a dedicated MCP server instead of generic screenshot analysis

Before an official Figma MCP server existed, AI coding agents often had to guess design specs from screenshots — leading to inaccuracies in spacing, colors, or component names. The Figma MCP server solves this by delivering structured design data directly from the Figma file: exact variable values, component names, and layout information instead of visual guesswork. For teams with an established design system, this is particularly valuable because generated code is more likely to match the components and tokens actually in use, rather than inventing new, inconsistent values.

Who the server fits

Development teams that work closely with designers and regularly turn Figma designs into code benefit the most: the server noticeably shortens the path from design approval to first code implementation. It's also well suited for automatically generating architecture or database diagrams in FigJam from existing code. For occasional design review without a coding angle, the setup effort is less worthwhile, especially given the plan requirements for a practical usage quota.

In short: without a sufficient Figma plan, the server remains a demo-level feature with only a handful of calls per month; only with a Dev or Full seat on a paid plan does it become a practical, everyday tool for design-to-code workflows.

A Figma account with a paid plan (Professional, Organization, or Enterprise) and a Dev or Full seat for a practical usage quota; a Starter plan or a View/Collab seat works technically but is limited to a handful of calls per month. Additionally, an MCP client from the Figma MCP Catalog (e.g. Claude Code, Cursor, VS Code, Xcode).

In Claude Code, Figma recommends the official plugin, which includes MCP settings and matching agent skills:

claude plugin install figma@claude-plugins-official

Alternatively, set it up manually:

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

Using --scope user makes the server available across all projects instead of only the current one. After setup, run /mcp in Claude Code, select the "figma" entry, choose "Authenticate", and confirm access in the OAuth window that opens.

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

OAuth sign-in to your own Figma account, triggered from the MCP client. For organizations, enterprise-managed authorization via Okta Cross App Access (XAA) is additionally supported, currently only for Claude.

The agent can only access Figma content the signed-in account already has view or edit permissions for. Usage limits depend on plan and seat type (see cost details); write tools such as creating new files are exempt from the read rate limits.

Requests go to Figma-hosted infrastructure at mcp.figma.com. Responses contain design data from accessible Figma files (layout, components, variables, sometimes images) and are passed to the MCP client and its language model. Write tools directly modify content in the connected Figma or FigJam files.

Since the server operates with the permissions of the signed-in Figma account, a misdirected agent with write access can accidentally modify or overwrite design files. Design files can contain confidential product information that reaches the agent's language model. For production design systems, it is advisable to try write access on test files first and use accounts with the narrowest possible file access for automated workflows.