gate
Sign inGet started

← Figma MCP server

Figma × Claude Code

Use the Figma MCP server
in Claude Code

Pull design files, frames, and specs into your AI for build-ready context. This guide connects Figma to Claude Code (the terminal agent) 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 Code

Claude Code adds MCP servers via the `claude mcp add` command. The gateway route takes about two minutes:

  1. Connect Figma to your free gate gateway from the verified directory.
  2. In your terminal: claude mcp add gate https://gateturbo.com/api/mcp --transport http
  3. Approve the sign-in when Claude Code opens it in your browser.
  4. Figma's tools now appear in every Claude Code session — with per-tool allow/ask/block rules if you want them.

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, 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 Code 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 · Figma in ChatGPT · Figma in Cursor · Figma in VS Code