How to Review Figma Content Against Your Style Guide Using Claude

Your content guidelines live in Notion or Confluence. Your designs live in Figma. Every review cycle, you manually open each screen, cross-check text against rules you half-remember, and paste violation notes into a Slack message no one reads twice. This guide shows you a better way. You set up one tool — Figma Console MCP — and Claude reads your Figma text layers directly, checks them against your live guidelines, and posts violation comments pinned to the exact layers in Figma. No copy-paste. No plugin exports. No separate review document.

What You Will Need

• Claude Desktop (free download at claude.ai/download) — this workflow runs in Claude Desktop, not the browser version

• Node.js 18 or higher — check by opening Terminal and typing node --version. If you do not have it, download from nodejs.org.

• Figma Desktop app (not just the web version — the desktop app is required)

• A Figma Personal Access Token — you will create this in Step 2. Takes 2 minutes.

• Your content guidelines in Notion or Confluence (either works)

• Estimated setup time: 15–20 minutes, one time only. Every review after that takes 5 minutes.

You do not need to know how to code. You are installing one npm package and editing one config file. Every step is written out exactly.

Part 1: Install Figma Console MCP (One-Time Setup)

Step 1: Check your Node.js version

Open Terminal (Mac) or Command Prompt (Windows). Type this and press Enter:

You need to see v18 or higher (e.g. v20.11.0). If you see a lower number or "command not found", go to nodejs.org, download the LTS version, install it, then come back here.

Step 2: Get your Figma Personal Access Token

1. Go to figma.com and log in

2. Click your profile photo (top left) → Settings

3. Scroll down to Security → click Generate new token

4. Give it a name: Figma Console MCP

5. Set expiry to No expiration (or 90 days if your org requires it)

6. Copy the token — it starts with figd_. You will not see it again after closing this window.

Keep this token somewhere safe — your Notes app, 1Password, or a text file. You need it in Step 3.

Step 3: Add Figma Console MCP to Claude Desktop

Open Terminal and run this single command. Replace figd_YOUR_TOKEN_HERE with your actual token from Step 2:

This looks like a lot. It is not. You are running one command that installs the package and registers it with Claude Desktop automatically.

Step 4: Connect the Desktop Bridge plugin in Figma

1. Open Figma Desktop

2. Go to Plugins → Development → Import plugin from manifest...

3. Navigate to the figma-console-mcp folder and select manifest.json inside the figma-desktop-bridge folder

4. The plugin now appears in your Plugins → Development list

Tip: You do this import once. After that, the plugin stays in your Development list permanently. Just run it whenever you start a review session.

Step 5: Restart Claude Desktop and test the connection

Quit Claude Desktop completely and reopen it. Open any Figma file. Run the Desktop Bridge plugin (Plugins → Development → Figma Desktop Bridge → Run). Then open Claude Desktop and type:

Claude should respond with connection details including your open file name. If it does, setup is complete.

Part 2: Connect Your Content Guidelines (One-Time Setup)

Step 6: Add your Notion or Confluence connector to Claude Desktop

Go to Claude Desktop → Settings → Connectors → Add custom connector.

If your guidelines are in Notion:

• Name: Notion

• URL: https://mcp.notion.com/mcp

If your guidelines are in Confluence:

• Name: Confluence

• URL: https://mcp.atlassian.com/v1/mcp

Click Connect and sign in via OAuth when prompted. One-time only.

That is the setup done. You now have three things connected to Claude Desktop: Figma Console MCP, your guidelines source, and your Figma Desktop file. You never need to configure this again.

Part 3: Run a Content Review

Step 7: Open your Figma file and run the Desktop Bridge plugin

Open Figma Desktop. Navigate to the screen you want to review. Run Plugins → Development → Figma Desktop Bridge. Confirm it shows "Connected" in the plugin panel.

Step 8: Send the review prompt to Claude Desktop

Open Claude Desktop. Start a new conversation. Paste this prompt — replacing the two placeholders with your actual values:

Step 9: Watch Claude work

Claude runs through all five steps automatically — fetching your Figma file data, pulling guidelines from Notion or Confluence, running the review, and posting pinned comments to your Figma file. This takes 1–3 minutes.

Step 10: Check your Figma file for pinned comments

Switch back to Figma Desktop. You will see comment pins sitting directly on the layers that have violations. Click any pin to see the violation detail: which guideline was broken, the current text, and the suggested fix.

Step 11: Review the summary in Claude Desktop

Back in Claude Desktop, scroll down to see the summary. It looks like this:

Step 12 (optional): Clean up resolved comments

Once a designer has fixed a violation, ask Claude to remove the comment:

Common Mistakes

Running the review without starting the Desktop Bridge plugin first. Claude cannot reach your Figma file if the plugin is not running. Before every review session, open Figma Desktop, open your file, and run the Desktop Bridge plugin. It takes 10 seconds.

Using Claude.ai in a browser instead of Claude Desktop. Figma Console MCP runs as a local server on your computer. It only connects to Claude Desktop (the app), not to claude.ai in a browser. Download Claude Desktop from claude.ai/download.

Selecting the wrong frame before running the review. Tell Claude specifically which frame name to focus on in your Step 8 prompt. This keeps the review fast and the comments accurate.

Expecting comments on layers that passed. Claude only posts comments on violations. Layers that pass are listed in the summary but get no comment pin — you do not want green "all good" pins cluttering the file.