Invite an AI to Look Upon Your Figma Designs

Who will look upon your work before the world does? Let it be an AI, quietly, inside Figma, reading each frame and pinning its honest thoughts to the very place they belong.

Let Claude, GPT, Gemini, or any AI model wander through your designs, offer its quiet counsel, and leave its thoughts pinned upon the Figma canvas.

A gentle word before you begin. This hands an AI model real power over your Figma files. It may leave comments upon the canvas, and take them away again. So begin where nothing is precious, on a blank, new, or draft file, where a mistake carries no sorrow. Try a few reviews, watch how the assistant speaks, and learn the prompts that answer you kindly. When trust has grown between you, carry it to the files that matter.

---

The purely local Figma MCP Server with full Figma REST API coverage opens a door through which any AI assistant that speaks MCP may come and look upon your designs. It keeps company with clients such as GitHub Copilot in VS Code, Claude Desktop, and Cursor, and with models such as Claude, GPT, and Gemini. The assistant reads your work, offers its honest reflection, and pins its comments to the canvas. And because it runs upon your own machine, your Figma token never wanders from your hands.

What you can do with it

Speak to your assistant in plain, unhurried language, and it can:

• Look upon your frames. It renders a screenshot of any screen, then reads the layers and components beneath when it needs to see closer.
• Weigh the design. It's hierarchy, spacing, contrast, alignment, and consistency.
• Hold the work against your design system, it's tokens and components.
• Leave its feedback in Figma, pinned to the very frame it speaks of.
• Move through the comments already there. It reads every open thread, gathers them, sets them in order of urgency, and turns them into a clear list of things to do.

Before you start

Three small things must be gathered first:

1. An AI client that supports MCP, such as GitHub Copilot in VS Code, Claude Desktop, or Cursor.
2. Bun.sh installed. It runs the server.
3. A Figma personal access token, which you create in Step 1.

With these three in hand, the path ahead is short.

Step 01: Get your Figma token

1. In Figma, go to Settings → Security → Personal access tokens.
2. Name it, and check all items under the Users and Files scopes. Files lets the assistant read your designs and post comments; Users lets it identify who is commenting. These are the minimum scopes it needs.
3. Click Generate token.
4. Copy it now, for Figma will show it only this once. Guard it as you would a password.

Step 02: Connect the server to your AI client

Point your client toward the server but once, and offer it your token. Most clients will keep it safe in your system's secret storage, never lying bare in a plain file.

VS Code (GitHub Copilot)

• Open the folder you want to work in. Any project root or test folder works.
• Inside it, create a folder named .vscode, and inside that a file named mcp.json.
• Paste this into mcp.json and save:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-api-key",
      "description": "Figma API Key",
      "password": true
    }
  ],
  "servers": {
    "figma": {
      "command": "bunx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "${input:figma-api-key}"
      }
    }
  }
}

• Open the Command Palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows) and run MCP: List Servers.
• Pick figma, then Start Server.
• Paste the token from Step 01 when prompted. VS Code stores it in your OS secret storage: macOS Keychain, Credential Manager on Windows, or your keyring on Linux.

Claude Desktop, Cursor, and other clients

Add the same server to your client's MCP config:

{
  "mcpServers": {
    "figma": {
      "command": "bunx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key_here"
      }
    }
  }
}

This block keeps the token in plain sight, so keep this file away from version control. Restart the client, then see that the Figma server has joined you in its MCP settings. Seek the mode that lets the assistant reach for outside tools; each client calls it by a different name, be it agent, tools, or MCP.

Once the bond is made, the server brings forth the Figma tools. In VS Code, the Output console shows the connection alive and names the tools it may use, such as reading frames and leaving comments:

[info] Connection state: Starting
[info] Connection state: Running
[info] Discovered Figma tools

Step 03: Grab a frame link

To point the assistant at a single frame is swifter and more sure than to hand it the whole file. It attends to what you care for, rather than wandering through everything.

In Figma, right-click the frame and choose Copy/Paste as → Copy link to selection. You get a URL like this:

figma.com/design/AbCdEf123456/Project?node-id=42-1337
                 ^^^^^^^^^^^^                 ^^^^^^^
                 file key                     frame

Paste that link into your prompt just as it is. The file key tells the assistant which file to enter, and the node-id which frame to seek. To review several frames, offer a link for each, or point the assistant at a whole page and ask it to consider every top-level frame upon it.

A word on cost and limits. Every review spends model tokens, and the Figma API sets a limit on how often you may ask within a span of time. To review whole files, or many frames at once, wears through both the sooner. Begin with a few frames, and should you meet a limit, wait a little while and ask for less.

Step 04: Ask for a review

First, give the assistant its bearings. Tell it the purpose of the screen, the device it is made for, and the people who will meet it. A frame seen alone, without its story, will be faulted for what was meant all along, its states, its breakpoints.

Open your AI client and let it reach for tools or act as an agent, so it may call upon the Figma tools. In VS Code, open Copilot Chat and turn it to Agent mode. Then paste the frame link and tell it what to look for:

Review this frame: https://www.figma.com/design/AbCdEf123456/Project?node-id=42-1337. Check spacing consistency, color contrast, and visual hierarchy. List the top issues before posting anything.

The assistant enters the frame, considers it, and returns a gathered list. It will name the very components and layers, not merely "the blue button somewhere."

Should it say it cannot reach the frame, look again at the token scopes from Step 1, and be sure the link leads to a frame you yourself may open.

Step 05: Post it to the canvas

When the notes sit right with you, send them home to Figma:

Post each issue as a comment, pinned to the frame it's about. Suffix every comment with "(Added by Claude)" so we know which model left it.

Ask the assistant to sign what it leaves (say, "Added by Claude" or "Added by Gemini"). This matters most when many hands, or many models, tend the same file: every word stays known by its author. Choose a prefix or a suffix, and hold to it.

The comments settle where the trouble lies. Your companions open Figma and find the review pinned upon the work itself, marked with the name of whoever wrote it.

---

When not to use it

The assistant looks upon a rendered image and the data of the layers. It cannot feel motion, nor follow a prototype's flow, nor know the touch of real use; and it does not stand in place of testing with people, or of true research.

Why it's worth it

Set it up but once, and a design review becomes a single sentence spoken to your assistant. The reviews keep their steady voice across many designers, they catch the small faults of spacing and contrast before the handoff, and they lighten the rounds of review. The same quiet helper can later read your design tokens, weigh your components, or trace a file's history, all through plain conversation.

When your work is finished. Take the key from your config, then remove the token in Figma under Settings → Security. And so it is fully revoked.

Explore Figma MCP Server ↗