gate
Sign inGet started

← Figma MCP server

Figma × Claude

Use the Figma MCP server
in Claude

Pull design files, frames, and specs into your AI for build-ready context. This guide connects Figma to Claude (claude.ai and the Claude desktop app) through a governed gateway — one URL that also works in every other MCP client you use, with your rules and a full log attached.

Connect Figma free

Live-probed · Security-scanned · Note: Figma currently restricts third-party sign-ins — API-key path recommended

Setup: Figma in Claude

Claude adds MCP servers via custom connectors in Settings. The gateway route takes about two minutes:

  1. Create a free gate gateway and connect Figma to it from the verified directory (one click — note: Figma currently restricts third-party sign-ins, so use the API-key path if the vendor offers one).
  2. Open claude.ai → Settings → Connectors and click 'Add custom connector'.
  3. Name it 'gate' and paste your gateway URL, then approve the authorization.
  4. Ask Claude something Figma can answer — the call runs through your gateway, with your rules applied and logged.

What to ask once it’s connected

“Pull the specs and spacing from this frame.”
“List the components in our design-system file.”
“Give me build-ready context for this screen.”
“What changed in the design since last week?”

Why route it through a gateway

One URL, every client

The same Figma connection works in Claude Code, ChatGPT, Cursor, VS Code too — no per-client re-wiring.

Rules before regret

Allow, ask, or block every tool Figma exposes — reads can flow freely while writes require your approval.

Every call logged

A plain-language activity log of everything Claude did with Figma — searchable, exportable, auditable.

Scanned and probed

Figma passed a live handshake probe and a security scan before listing — and drift detection watches it after you connect.

Connect Figma freeEverything about Figma MCP →

Also available: Figma in Claude Code · Figma in ChatGPT · Figma in Cursor · Figma in VS Code