Figma MCP Server
Give Claude live design context from Figma files and let it write to the canvas.
Officialby FigmaHosted or on your computerChecked October 18, 2026
Figma's own MCP server hands Claude structured design context such as layout, variables, components and screenshots, so it can turn frames into code that matches the design. The hosted server can also create and edit native Figma content, while a local server built into the Figma desktop app is offered for organizations with specific enterprise needs.
Who it is for
- Product and UI designers
- Frontend developers turning designs into code
- Design system teams
Prompts to try
Once it is connected, ask in plain words. Claude decides when to use the server and asks before it changes anything important.
Turn the selected Figma frame into a responsive React component that reuses our existing Button and Card components.List the color and spacing variables used in this frame and map them to our Tailwind config.Create a new settings page in Figma that follows the layout and components of our profile page.How to connect it
In Claude Code
claude mcp add --transport http figma https://mcp.figma.com/mcp
In the Claude desktop app
Customize > Connectors > Discover: search Figma, then select Connect to Claude
Hosted address: https://mcp.figma.com/mcp
Good to know
Run /mcp in Claude Code to sign in. Starter plans and View or Collab seats are capped at about 20 tool calls a month; the desktop app server runs at http://127.0.0.1:3845/mcp.
Unlock the setup steps
Free. Leave your email once to open the setup steps for all 150 servers, and get the best new connectors each month.
How we checked it
Checked Figma's developer docs (remote and desktop setup, limits by plan and seat), the figma/mcp-server-guide repo, the registry entry (com.figma.mcp/mcp) and the Claude directory listing; the hosted endpoint answers with an OAuth challenge.