MCP ServerHTTP

Figma MCP Server

The official Figma MCP server, available through Figma's Dev Mode, lets AI models read your design files — frames, components, styles, variables and exported assets — directly through the Model Context Protocol. Ask Claude to describe a component, extract design tokens, or summarise a screen's layout without leaving your conversation.

Hosted URL

https://mcp.figma.com/mcp

Suggested model

Claude Sonnet 4.5

MCP Playground runs 30+ models on the same workflow: switch anytime, or use Compare mode to run several in parallel and balance quality vs. cost.

Auth

Browser-based OAuth via Figma. No personal access token needed — authenticate through your Figma account in the browser.

What the Figma MCP server does

How models use it and what it is built for.

Figma's MCP integration connects through the Figma desktop app, exposing your open design files as structured MCP tool results. Models can read frame hierarchies, inspect component properties and variants, extract colour and typography tokens, list auto-layout constraints, and retrieve asset export URLs. It is designed for developer handoff workflows: instead of a designer writing specs manually, an AI agent can read the Figma file and answer "what font size does the H2 use?" or "list all the components in the Card library." Requires the Figma desktop app and a personal access token.

Tools the Figma MCP server exposes

Typical tools an AI model can call. Exact names vary by version.

  • get_file — read the full node tree of an open Figma file
  • get_node — inspect a single frame, component or group by ID
  • get_styles — list all colour, text and effect styles in the file
  • get_components — enumerate published components and their variants
  • get_variables — read design tokens (colour, spacing, typography variables)
  • get_image — export a frame or node as PNG/SVG

Example prompts to try

Copy any of these into MCP Agent Studio after connecting.

  • List all the colour styles in this file and their hex values.

  • Describe the layout and spacing of the "Card — Product" component.

  • What font families and sizes are used across the design system?

  • Export the "Hero" frame as an SVG and tell me its dimensions.

Models on MCP Playground

This is not a single-model product: you get the same MCP connection with 30+ models (Claude, GPT, Gemini, DeepSeek, open-weight, and more), you can switch mid-conversation, and you can open Compare mode to run the same prompt against multiple models at once. The card above is a suggested starting point for this server — not the only choice.

Default pick for Figma

Claude Sonnet 4.5

Claude Sonnet 4.5 excels at structured design-token extraction and component description. Use Opus 4.7 for complex multi-screen layout reasoning.

Try the Figma MCP server in your browser

Open MCP Agent Studio with the connection pre-filled. Add your token, pick any of 30+ models, and start chatting — no install required.

Open Agent Studio

Figma MCP server — FAQ

Common questions about connecting, scoping and using it safely.

What is the Figma MCP server?

It is an official Figma integration that exposes your open design files as MCP tools. AI models can read frame layouts, component specs, design tokens and exported assets through a natural language conversation — no more copy-pasting specs from Dev Mode.

Do I need Figma Professional or Organisation to use it?

Dev Mode (where the MCP runs) is available on Figma Professional, Organisation and Enterprise plans. It is not available on the free Starter plan.

Does the Figma MCP server need the desktop app?

No. The hosted endpoint at mcp.figma.com/mcp is fully cloud-based. Just authenticate via browser OAuth and connect — no desktop app or local setup required.

What can an AI agent do with the Figma MCP server?

It can read file structure, inspect components and variants, extract design tokens, describe layouts, and retrieve exported images. It cannot yet create or edit Figma files — it is a read-oriented integration focused on developer handoff.

Is it safe to connect my Figma account?

Yes. Authentication uses browser-based OAuth — you log in through Figma's own login page and grant access, so no credentials are shared with MCP Playground. You can revoke access at any time from your Figma account settings.

Other MCP servers

More on MCP Playground

Figma MCP Server — AI Agent for Design Files and Components