figma-mcp-server

figma-mcp-server

Connect Figma to Claude via MCP

---

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, <a href="https://github.com/zeitmaschinen/figma-mcp-server/archive/refs/heads/main.zip" target="_blank">download the project files here</a> 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:

1. Go to: https://nodejs.org/
2. Click the big button labeled "Download Node.js (LTS)"
3. Wait for the download to finish
4. Click the downloaded file and follow the installer
5. When finished, click "Finish"

You can test if it worked:

• Windows: Press Windows + R, type cmd and press Enter
• Mac: Press Command + Space, type terminal 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

1. Locate the downloaded ZIP file: figma-mcp-server-main.zip
2. Right-click on the ZIP file
3. Choose "Extract All..." (Windows) or "Unzip" (Mac)
4. Choose a location (for example, /Documents/ folder)
5. 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:

1. Open the figma-mcp-server-main folder
2. Hold Shift and right-click in an empty area
3. Select "Open PowerShell window here" or "Open Command Prompt here"

Mac:

1. Open Terminal (Command + Space, type "terminal")
2. Type cd (with a space after)
3. Drag the figma-mcp-server-main folder into the terminal window
4. 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

1. Open your browser
2. Go to: https://www.figma.com/
3. Log in if necessary
4. Click on your name (top left corner) and select Settings
5. Click on the Security tab
6. Scroll down until you find the "Personal access tokens" section
7. Click the "Generate new token" button
8. Give the token a name (example: "Claude MCP")
9. Click "Generate token"
10. COPY THE TOKEN that appeared (it's a long sequence like figd_ABC123...)
11. 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

1. In the figma-mcp-server-main folder, open the .env file in a text editor (Notepad on Windows or TextEdit on Mac)
2. You'll see just: FIGMA_ACCESS_TOKEN=
3. Paste your copied token after the equals sign
4. Should look like: FIGMA_ACCESS_TOKEN=figd_XYZ123ABC...
5. 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: ``bash 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:

1. Open Finder
2. Press Command + Shift + G
3. Paste: ~/Library/Application Support/Claude
4. Press Enter
5. Look for the file: claude_desktop_config.json

On Windows:

1. Press Windows + R
2. Paste: %APPDATA%\Claude
3. Press Enter
4. 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

1. Open the claude_desktop_config.json file in Notepad or TextEdit
2. DELETE EVERYTHING that's in there (if anything exists, make a backup first)
3. Paste this content:

{
  "mcpServers": {
    "figma-design-system": {
      "command": "node",
      "args": [
        "PASTE_PATH_HERE/build/server.js"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "PASTE_YOUR_TOKEN_HERE"
      }
    }
  }
}

1. Replace:

• PASTE_PATH_HERE with the path you copied in Step 7.1
• PASTE_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..."
      }
    }
  }
}

1. Save the file

---

Step 8: Activate in Claude desktop

1. Completely CLOSE Claude Desktop (on Mac: Command + Q, on Windows: right-click taskbar icon and choose "Quit")
2. 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:

1. Click the "Share" button in the top-right corner of the Figma interface.
2. Select "Copy link" to copy the file URL.
3. Paste the link somewhere so you can view it. It will look like one of these:

• https://www.figma.com/file/ABC123XYZ/File-Name
• https://www.figma.com/design/ABC123XYZ/File-Name

1. Copy the part between /file/ or /design/ and the next /. In this example: ABC123XYZ ← This is your file key.

---

Verification checklist

1. Node.js is installed (check if node --version works)
2. Project files are extracted
3. npm install completed successfully
4. .env file has your Figma token
5. claude_desktop_config.json has the correct path with proper slashes
6. claude_desktop_config.json has your Figma token
7. Claude Desktop was completely closed and reopened

Fun part begins! What type of questions can you make?

First of all, one tip: 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

1. Claude, show me all components from my Figma file
2. Claude, search for "button" components in my design system
3. Claude, find all "navigation" components
4. Claude, list all component sets and their variants

Component Specifications

1. Claude, give me complete specs for the "Button call to action" component
2. Claude, show me detailed measurements and styles of the Statusbar
3. Claude, extract all colors, fonts, and spacing from the Header component

Quality Control & Consistency

1. Claude, analyze naming conventions in my Figma file
2. Claude, check for naming inconsistencies across all components
3. Claude, identify components that don't follow kebab-case naming
4. Claude, find duplicate or similar component names

Design Tokens & Styles

1. Claude, extract all color styles from my design system
2. Claude, show me all text styles and typography tokens
3. Claude, list all colors and text styles used in the file

Design System Overview

1. Claude, give me a complete overview of my design system structure
2. Claude, how many pages and components exist in my file?
3. Claude, show me the file structure and organization

Component Development

1. Claude, get specs for "bottom navigation" and create HTML/CSS code
2. Claude, analyze the Statusbar component and generate React code
3. Claude, compare all "bottom navigation" variants and document differences

Problem Detection

1. Claude, find components without descriptions
2. Claude, identify components that should be component sets with variants
3. Claude, check which components don't have properties configured
4. Claude, find inconsistent spacing or sizing patterns across similar components