--- title: "Figma MCP server: design context and canvas edits for AI agents" canonical_url: https://cookiesforai.app/mcp/figma last_updated: 2026-10-03T10:04:47+02:00 type: mcp summary: "The Figma MCP server gives AI agents design context from Figma files, such as layout, variables and components, to generate code from frames, and can write native content back to the canvas." install: "claude plugin install figma@claude-plugins-official" --- # Figma MCP server The Figma MCP server gives AI agents design context from Figma files, such as layout, variables and components, to generate code from frames, and can write native content back to the canvas. | Fact | Value | |---|---| | Publisher | Figma (official) | | Source | https://github.com/figma/mcp-server-guide | | License | None (no license on GitHub) | | GitHub stars | 2,041 on 2026-10-02 | | Last code push | 2026-10-01 | | Page updated | 2026-10-03 | | Hosted endpoint | https://mcp.figma.com/mcp | | Official MCP Registry | com.figma.mcp/mcp | | Documented clients | Claude Code, Codex, Cursor, VS Code, Xcode, Gemini CLI | | Category | Design | | Free tier | Free plan | | Cost | No separate charge; your tool-call limit depends on your Figma plan and seat, the free Starter plan has a small monthly limit, and canvas writes are free during the beta but will become a paid feature. | | Current prices | https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/ | | Facts checked | 2026-10-02 | ## Connect Claude Code, plugin with MCP settings and skills (recommended by Figma): ``` claude plugin install figma@claude-plugins-official ``` Claude Code, server only: ``` claude mcp add --transport http figma https://mcp.figma.com/mcp ``` Codex CLI: ``` codex mcp add figma --url https://mcp.figma.com/mcp ``` Cursor, plugin (type in agent chat): ``` /add-plugin figma ``` Gemini CLI extension (then run /mcp auth figma inside gemini): ``` gemini extensions install https://github.com/figma/mcp-server-guide ``` VS Code mcp.json: ``` {"servers": {"figma": {"type": "http", "url": "https://mcp.figma.com/mcp"}}} ``` After adding the server, sign in to Figma when the client prompts you. Then copy a link to a frame or layer and ask the agent to implement it; the agent reads the node ID from the link. ## Ask your coding agent ```text Connect the Figma MCP server to my coding agent using its documented setup: https://github.com/figma/mcp-server-guide. ``` ## What it does The Figma MCP server is Figma's own server for giving AI coding agents structured design data. Paste a link to a frame or layer and the agent can pull its layout, components and variables, then write code from it. get_design_context returns a React and Tailwind representation of the selection that the agent can translate into any framework, and get_variable_defs extracts the color, spacing and typography tokens used. The Figma MCP server also works in the other direction. On the remote server, agents can create and modify native Figma content, such as frames, components, variables and auto layout, using your design system as the source. Code Connect links Figma components to components in your codebase so generated code reuses them instead of inventing new ones. Capturing a web page into a Figma design was still rolling out on 2026-10-01. Figma hosts the server at mcp.figma.com/mcp, and a local desktop server runs inside the Figma app. The GitHub repo holds setup docs and skills, not server code, and had 2,041 stars on 2026-10-02; GitHub shows no license for it. Figma's developer docs state that only clients listed in its MCP catalog can connect. Tools it gives your agent: `get_design_context`, `get_variable_defs` ## When to use it - You want the agent to build a component from a specific Figma frame. - You want generated code to use your design tokens instead of hard-coded values. - You want the agent to reuse your existing React components through Code Connect. - You want the agent to draft screens or update components directly in a Figma file. ## When to pick something else - Free or view-only users who need regular use: the Starter plan and View or Collab seats have low monthly tool-call limits. - Any MCP client you like: Figma only lets clients listed in its MCP catalog connect. - Pixel-perfect output without a tidy file: results depend on components, variables, auto layout and named layers in the design. ## What it needs - A Figma account; a Dev or Full seat on a paid plan for regular use - GitHub Copilot enabled, if you use VS Code ## Questions people ask ### Is the Figma MCP server free? It has no separate price, but the number of tool calls depends on your plan and seat: the Starter plan and View or Collab seats get only a few calls a month, and Dev or Full seats on paid plans get daily limits (Figma developer docs read 2026-10-02). ### Can the Figma MCP server edit designs? Yes, on the remote server. It can create and change frames, components, variables and auto layout. Figma says this write feature is free during the beta and will later become usage-based and paid.