Guide to Connect Figma to Claude via MCP
Learn how to set up your server and integrate Figma with Claude using MCP ⚙️

I’ve seen some YouTube comments from designers saying that Figma’s native MCP method (through Dev Mode) is too complicated. Disclaimer: this method is even more technical. But if you’re comfortable with terminal commands and configuration files, this custom server offers powerful design system maintenance features that Figma’s native method doesn’t provide.
This method is about governance (auditing and maintaining quality), not implementation!
Use Figma’s native MCP when:
- You want to generate code from designs
- You’re implementing new UI from Figma mockups
- You need Code Connect integration
Use this custom server when:
- You need to audit naming conventions across your design system
- You want to analyze component consistency
- You need bulk queries across hundreds of components
- You want Claude to help maintain design system quality
Most official MCPs (like Figma’s) only work with Dev Mode and follow a freemium model. This server bypasses that limitation by allowing direct access to file data via the public API. And it’s completely free! 💯
Start here ↓
No coding needed, just configuration. Feel free to audit the files yourself, or run them through an LLM for a quick review.
Download the project files
Before starting, download the project files from Github and extract the ZIP to your computer.
This ZIP file contains:
- Pre-compiled server code (ready to use!)
- All configuration files
- Empty
.env
file for your Figma token
Step by Step
Step 1: Install Node.js
What is it? A program that allows you to run JavaScript code on your computer.
How to install:
- Go to: https://nodejs.org/
- Click the big button labeled “Download Node.js (LTS)”
- Wait for the download to finish
- Click the downloaded file and follow the installer
- When finished, click “Finish”
You can test if it worked:
- Windows: Press
Windows + R
, typecmd
and press Enter - Mac: Press
Command + Space
, typeterminal
and press Enter
In the window that opened, type:
node --version
Press Enter. If something like v23.10.0
appears, it worked!
Step 2: Extract project files
- Locate the downloaded ZIP file:
figma-mcp-server-main.zip
- Right-click on the ZIP file
- Choose “Extract All…” (Windows) or “Unzip” (Mac)
- Choose a location (for example, /Documents/ folder)
- Click “Extract”
You should now have a folder called figma-mcp-server-main
with these files inside:
/figma-mcp-server-main/
├── src/ (source code for reference)
│ └── server.ts
├── .env (you'll add your Figma token here)
├── .gitignore
├── package.json
├── package-lock.json
└── tsconfig.json
Step 3: Open terminal in project folder
Windows:
- Open the
figma-mcp-server-main
folder - Hold Shift and right-click in an empty area
- Select “Open PowerShell window here” or “Open Command Prompt here”
Mac:
- Open Terminal (Command + Space, type “terminal”)
- Type
cd
(with a space after) - Drag the
figma-mcp-server-main
folder into the terminal window - Press Enter
Step 4: Install dependencies (usually 3 min)
In the terminal (inside the project folder), type:
npm install
Press Enter and wait (may take 1-3 minutes). This will install all dependencies required to run the server.
When finished, all the necessary libraries will be downloaded into a node_modules
folder.
Step 5: Get your Figma token
5.1: Generate token
- Open your browser
- Go to: https://www.figma.com/
- Log in if necessary
- Click on your name (top left corner) and select Settings
- Click on the Security tab
- Scroll down until you find the “Personal access tokens” section
- Click the “Generate new token” button
- Give the token a name (example: “Claude MCP”)
- Click “Generate token”
- COPY THE TOKEN that appeared (it’s a long sequence like
figd_ABC123...
) - IMPORTANT: Save this token somewhere safe, you won’t be able to see it again once you close Figma’s window.
5.2: Add token to .env file
- In the
figma-mcp-server-main
folder, open the.env
file in a text editor (Notepad on Windows or TextEdit on Mac) - You’ll see just:
FIGMA_ACCESS_TOKEN=
- Paste your copied token after the equals sign
- Should look like:
FIGMA_ACCESS_TOKEN=figd_XYZ123ABC...
- Save the file
Example:
FIGMA_ACCESS_TOKEN=figd_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6
Step 6: Build the server
Now we need to compile the TypeScript code into JavaScript that Node.js can run.
In the terminal (inside the project folder), type:
npm run build
Press Enter and wait. You’ll see some output, and a new build/ folder will be created inside your main folder.
Step 7: Configure Claude desktop (circa 10 min)
7.1: Find your project’s complete path
In the terminal (inside the project folder), type:
Windows:
cd
Mac/Linux:
pwd
Something like this will appear:
- Windows:
C:\Users\YourName\Documents\figma-mcp-server-main
- Mac:
/Users/yourname/Documents/figma-mcp-server-main
Copy this complete path! Write it down, you’ll need it in the next step.
7.2: Find Claude’s configuration file
On Mac:
- Open Finder
- Press
Command + Shift + G
- Paste:
~/Library/Application Support/Claude
- Press Enter
- Look for the file:
claude_desktop_config.json
On Windows:
- Press
Windows + R
- Paste:
%APPDATA%\Claude
- Press Enter
- Look for the file:
claude_desktop_config.json
If the file DOESN’T EXIST:
- Create a new file named
claude_desktop_config.json
in that folder - You can create it in Notepad or TextEdit
7.3: Edit the configuration file
- Open the
claude_desktop_config.json
file in Notepad or TextEdit - DELETE EVERYTHING that’s in there (if anything exists, make a backup first)
- Paste this content:
{
"mcpServers": {
"figma-design-system": {
"command": "node",
"args": [
"PASTE_PATH_HERE/build/server.js"
],
"env": {
"FIGMA_ACCESS_TOKEN": "PASTE_YOUR_TOKEN_HERE"
}
}
}
}
- Replace:
PASTE_PATH_HERE
with the path you copied in Step 7.1PASTE_YOUR_TOKEN_HERE
with your Figma token
Final example (Mac):
{
"mcpServers": {
"figma-design-system": {
"command": "node",
"args": [
"/Users/maria/Documents/figma-mcp-server-main/build/server.js"
],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_ABC123XYZ..."
}
}
}
}
Final example (Windows):
{
"mcpServers": {
"figma-design-system": {
"command": "node",
"args": [
"C:\\Users\\Maria\\Documents\\figma-mcp-server-main\\build\\server.js"
],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_ABC123XYZ..."
}
}
}
}
- Save the file
Step 8: Activate in Claude desktop
- Completely CLOSE Claude Desktop (on Mac: Command + Q, on Windows: right-click taskbar icon and choose “Quit”)
- Open Claude Desktop again
Step 9: Test with Claude
Now go to Claude Desktop and ask:
Claude, show me all the components from my Figma file!
File key: ABC123XYZ
How to get your file key:
- Click the “Share” button in the top-right corner of the Figma interface.
- Select “Copy link” to copy the file URL.
- Paste the link somewhere so you can view it. It will look like one of these:
- Copy the part between /file/ or /design/ and the next /. In this example: ABC123XYZ ← This is your file key.
Verification checklist
- Node.js is installed (check if
node --version
works) - Project files are extracted
npm install
completed successfully.env
file has your Figma tokenclaude_desktop_config.json
has the correct path with proper slashesclaude_desktop_config.json
has your Figma token- Claude Desktop was completely closed and reopened
Design System management commands - What can you ask?
Remember to always provide the file key to Claude in your initial request or whenever you want to analyze a new file. Otherwise, it will ask for it. 😊
Component Audit & Organization
- Claude, show me all components from my Figma file
- Claude, search for “button” components in my design system
- Claude, find all “navigation” components
- Claude, list all component sets and their variants
Component Specifications
- Claude, give me complete specs for the “Button call to action” component
- Claude, show me detailed measurements and styles of the Statusbar
- Claude, extract all colors, fonts, and spacing from the Header component
Quality Control & Consistency
- Claude, analyze naming conventions in my Figma file
- Claude, check for naming inconsistencies across all components
- Claude, identify components that don’t follow kebab-case naming
- Claude, find duplicate or similar component names
Design Tokens & Styles
- Claude, extract all color styles from my design system
- Claude, show me all text styles and typography tokens
- Claude, list all colors and text styles used in the file
Design System Overview
- Claude, give me a complete overview of my design system structure
- Claude, how many pages and components exist in my file?
- Claude, show me the file structure and organization
Component Development
- Claude, get specs for “bottom navigation” and create HTML/CSS code
- Claude, analyze the Statusbar component and generate React code
- Claude, compare all “bottom navigation” variants and document differences
Problem Detection
- Claude, find components without descriptions
- Claude, identify components that should be component sets with variants
- Claude, check which components don’t have properties configured
- Claude, find inconsistent spacing or sizing patterns across similar components
That’s it!
Again, this setup isn’t for everyone, but if you maintain a large component library, having AI help find inconsistencies before they become problems is really useful.
Questions? Want to share what you built with this? Drop me a line! 😎 I’m always up for talking design systems and AI tooling.