Figma MCP Server — Claude Code MCP server: how to install
Connects Figma design context, variables, and components directly to AI coding agents to generate code and update canvas elements.
claude mcp add --transport http mcp https://mcp.figma.com/mcpWhat Figma MCP Server does
The server runs remotely at https://mcp.figma.com/mcp over HTTP. It supplies coding assistants with design context from selected frames, including layer trees, variables, and auto layout properties. Through Code Connect, agents map Figma elements directly to real components in your codebase.
Canvas writes work on the remote server. During beta, creating native frames, components, and variables remains free of charge. When images are missing, the agent can call generate_image to add placeholders after confirming Figma AI credit usage.
Accounts on the Starter plan or with View seats hit a hard cap of 6 read tool calls per month. Without a Dev or Full seat, active coding against designs will stall almost immediately.
What it helps with
- extract variables, components, and auto layout settings from selected frames
- generate frontend code reusing existing codebase components via Code Connect
- create and update native frames, components, and variables on the Figma canvas
- generate placeholder images in Figma designs with
generate_image
Example prompts for the agent
- Inspect the selected login frame in Figma and implement it in React.
- Connect our existing button component to the Figma design using Code Connect.
- Build a product card frame on the Figma canvas with auto layout.
How to install Figma MCP Server
Platform CLI: remote server
claude mcp add --transport http mcp https://mcp.figma.com/mcpPlatform CLI: remote server
codex mcp add figma-mcp-server --url https://mcp.figma.com/mcpConfig file
{
"mcpServers": {
"figma-mcp-server": {
"url": "https://mcp.figma.com/mcp"
}
}
}Config file
{
"servers": {
"figma-mcp-server": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http figma-mcp-server https://mcp.figma.com/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Figma MCP Server
How to install Figma MCP Server in Claude Code?
Run claude mcp add --transport http figma-mcp-server https://mcp.figma.com/mcp in your terminal. This command registers the remote Figma server over HTTP.
What does Figma MCP Server do?
It provides coding agents with layer hierarchies, layout data, and tokens from selected frames. The server also lets agents create new frames and variables directly on the Figma canvas.
What rate limits apply to Figma MCP server read tools?
Users on the Starter plan or with View seats get up to 6 read tool calls per month. Regular usage requires a Dev or Full seat on a paid plan with Tier 1 REST API limits.
