Figma REST API MCP server

This MCP server provides integration with Figma's API through Claude and other MCP-compatible clients, allowing read-only access to Figma files and projects. The server architecture supports more advanced design token and theme management features that could be enabled with expanded API access or plugin development.

Prerequisites

• Node.js 18.x or higher
• Figma access token with appropriate permissions
• Basic understanding of MCP (Model Context Protocol)

Installation

npm install figma-mcp-server

Configuration

Setting Up Environment Variables

Create a .env file based on .env.example:

# Figma API Access Token
FIGMA_ACCESS_TOKEN=your_figma_token

# Server Configuration
MCP_SERVER_PORT=3000

# Debug Configuration
DEBUG=figma-mcp:*

Claude Desktop Integration

Configure the server in your Claude Desktop config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

Important Notes:

• Use ABSOLUTE paths, not relative paths
• On Windows, use double backslashes (\\) in paths
• Restart Claude Desktop after making configuration changes

Usage

Basic Server Setup

import { startServer } from 'figma-mcp-server';

const server = await startServer(process.env.FIGMA_ACCESS_TOKEN);

Available Tools

Get File Details

{
  "name": "get-file",
  "arguments": {
    "fileKey": "your_file_key"
  }
}

List Files in a Project

{
  "name": "list-files",
  "arguments": {
    "projectId": "your_project_id"
  }
}

Create Design System Variables

{
  "name": "create-variables",
  "arguments": {
    "fileKey": "your_file_key",
    "variables": [
      {
        "name": "primary-color",
        "type": "COLOR",
        "value": "#0066FF"
      }
    ]
  }
}

Create and Configure Themes

{
  "name": "create-theme",
  "arguments": {
    "fileKey": "your_file_key",
    "name": "Dark Theme",
    "modes": [
      {
        "name": "dark",
        "variables": [
          {
            "variableId": "123",
            "value": "#000000"
          }
        ]
      }
    ]
  }
}

Limitations and Known Issues

API Restrictions

• Read-Only Operations: Currently limited to read-only operations due to Figma API restrictions
• Rate Limiting: Follows Figma API rate limits
• Authentication: Only supports personal access tokens

Technical Considerations

• Requires absolute paths in configuration
• Must compile TypeScript files before execution
• Server implements caching with a default 5-minute TTL and 500 entry limit

Troubleshooting

Common Issues

JSON Connection Errors

• Use absolute paths in Claude Desktop configuration
• Ensure the server is built (npm run build)
• Verify all environment variables are set

Authentication Issues

• Verify your Figma access token is valid
• Check the token has required permissions
• Ensure the token is correctly set in configuration

Server Not Starting

• Check Node.js version (18.x+ required)
• Verify the build exists (dist/index.js)
• Check Claude Desktop logs:
  • macOS: ~/Library/Logs/Claude/mcp*.log
  • Windows: %APPDATA%\Claude\logs\mcp*.log

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.