gate
Sign inGet started

← Figma MCP server

Figma × VS Code

Use the Figma MCP server
in VS Code

Pull design files, frames, and specs into your AI for build-ready context. This guide connects Figma to VS Code (GitHub Copilot's agent mode) 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 VS Code

VS Code adds MCP servers via MCP server configuration. The gateway route takes about two minutes:

  1. Connect Figma to your free gate gateway from the verified directory.
  2. On your gate overview, click 'Add to VS Code' — VS Code prompts to add the gateway as an HTTP MCP server.
  3. Confirm and approve the sign-in.
  4. Copilot's agent mode can now use Figma — logged and governed through your gateway.

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