figma logo GitHub Copilot

How to use Figma with GitHub Copilot

You want Figma inside GitHub Copilot so it can review design feedback and assign follow-up, audit design system usage across projects, prepare a design handoff, and update shared design tokens safely — without you copy-pasting between tabs. Here is the whole setup, once.

Create your Figma gateway

The gateway is the thing GitHub Copilot connects to, and it is where you decide which Figma tools an agent may use. You create it once and every client reuses it.

  1. Create an Arcade account

    Sign up and open the dashboard. The free tier is enough to follow this through.

  2. Create an MCP Gateway and select your Figma tools

    In the dashboard, create a gateway and pick the Figma tools you want to expose. The gateway is what your client connects to, and it is where tool access is decided.

  3. Copy your gateway URL

    Every client below needs it.

    https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>

Create a Figma gateway Opens the gateway builder in your Arcade dashboard.

Connect the gateway to GitHub Copilot

Heads up

JetBrains IDEs do not support remote MCP servers with Dynamic Client Registration — configure the gateway as “Arcade Headers” in the dashboard first. Setup also differs on Visual Studio, Eclipse and Xcode; check the docs for yours.

  1. In VS Code

    Copilot picks up MCP servers configured in VS Code automatically, so follow the VS Code steps and you are done.

  2. In JetBrains IDEs

    Copilot icon → Open Chat → Agent mode → tools icon → “+ Add More Tools…”, which opens mcp.json.

  3. Add the gateway with Arcade Headers

    {
      "servers": {
        "mcp-arcade": {
          "url": "https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>",
          "requestInit": {
            "headers": {
              "Authorization": "Bearer {arcade_api_key}",
              "Arcade-User-ID": "{arcade_user_id}"
            }
          }
        }
      }
    }

Full GitHub Copilot guide in the docs steps verified 2026-08-13

Start with these Figma prompts

GitHub Copilot can now act on your Figma account. Click a prompt to copy it.

Control file access and write permissions so an agent can inspect designs without changing variables, deleting comments, or editing linked resources. Pair it with Contextual Access policies to require approval for consequential Figma changes.

Ready to actually ship your agent?

Free to start. Ready for enterprise when you are.