Figma MCP Server

What Figma MCP Server does

Figma MCP Server MCP server gives AI coding clients access to design information from Figma files. An agent can use a selected frame or layer to retrieve design context and generate implementation code. The available workflows cover variables, components, layout details, and Code Connect, which helps generated code reuse components connected to a codebase.

The remote server can also create and modify native Figma content. With the relevant skills, agents can work with frames, components, variables, and auto layout. Other supported workflows include generating placeholder images when source, captured, or library images are unavailable, uploading those assets, and applying them to a design. A rolling-out workflow can capture, import, or convert a web page into a Figma design.

How it works

The service uses Streamable HTTP at https://mcp.figma.com/mcp. After connecting a compatible client, copy a link to a Figma frame or layer and include it in a prompt asking the agent to implement the design. The client does not browse the link itself; the server uses the node ID extracted from the URL to identify the requested object.

Figma MCP Server MCP server tools are available to the connected agent, while additional skills may be supplied through the Figma plugin for supported clients. The repository also describes standalone workflow skills for turning video recordings into annotated Figma storyboards and converting a PRD into a FigJam project plan board.

Setup and configuration

VS Code can add the server through the MCP command palette using the HTTP transport and the URL above. GitHub Copilot must be enabled for MCP use in VS Code. Cursor supports a Figma plugin installed with /add-plugin figma, or a manual MCP entry containing the same URL. Claude Code supports the official Figma plugin or the command claude mcp add --transport http figma https://mcp.figma.com/mcp.

Gemini CLI uses the repository extension, installed with gemini extensions install https://github.com/figma/mcp-server-guide, followed by /mcp auth figma. Other editors can connect if they support Streamable HTTP and accept an MCP server configuration with the Figma endpoint.

Tools and capabilities

• Retrieve design context for selected Figma nodes.
• Generate code from selected frames.
• Read variables, components, and layout information.
• Create and modify native Figma canvas content through the remote server.
• Generate placeholder images with generate_image, then upload and apply them with upload_assets.
• Use Code Connect and related skills to reference connected components.

Limitations and notes

Figma applies rate limits to tools that read data. Starter-plan users and View or Collab seats on paid plans can make up to six tool calls per month. Dev or Full seats on Professional, Organization, or Enterprise plans use per-minute limits aligned with Tier 1 Figma REST API limits, which Figma may change.

Writing tools may be exempt from those read limits. Canvas writing is currently a beta feature and is free during the stated beta period, with usage-based pricing planned for later. Image generation requires the agent to ask permission and disclose Figma AI credit usage. Use of the server and related skills is subject to Figma Developer Terms.