Figma

by jayzeedesign

58 stars

16.5k downloads

Not rated

GitHub

About

Integrates with Figma's API to enable direct access to design files and prototypes for generating code and answering UI implementation queries.

Details

Author: jayzeedesign
Repository: JayZeeDesign/figma-mcp
GitHub stars: 58
Downloads: 16,505
License: MIT License
Categories: Developer Tools, Other, Design, Communication, Productivity, File Management, AI, Frontend, API
Tags: #figma, #integration

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below
Plugin Name Figma

Command (node, npx, python, etc.) figma-mcp
Arguments
- Argument 1 --figma-api-key=your_figma_key
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

From the repository

For Other Ides Like Windsurf Use An Mcp Configuration File E G Mcp Config Json

{ "mcpServers": { "figma-python": { "command": "figma-mcp", "args": [ "--figma-api-key=your_figma_key" ] } } }

curl -LsSf https://astral.sh/uv/install.sh | sh uv venv source .venv/bin/activate uv sync

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Connect AI coding agents to Anima Playground, Figma designs, and your team's design system. Bridge the gap between prototypes and production code.

Integrates Cursor AI with Figma to read and programmatically modify designs.

Integrate Figma design data with AI coding tools using a local MCP server.

Interact with the Figma API to access and manage design files and resources.

Interact with Figma files to view, comment on, and analyze designs.

Enables AI assistants to interact with and automate Figma designs programmatically.

Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.

Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.

Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "--figma-api-key=your_figma_key"
            ],
            "command": "figma-mcp"
        }
    }
}

Linux

{
    "env": [],
    "args": [
        "--figma-api-key=your_figma_key"
    ],
    "command": "figma-mcp"
}

Macos

{
    "env": [],
    "args": [
        "--figma-api-key=your_figma_key"
    ],
    "command": "figma-mcp"
}

Windows

{
    "env": [],
    "args": [
        "--figma-api-key=your_figma_key"
    ],
    "command": "figma-mcp"
}

Allow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements:https://x.com/jasonzhou1993
- In settings, add an MCP server using the command:

figma-mcp --figma-api-key=your_figma_key

- OR Add a.cursor/mcp.jsonfile in your project:

{ "mcpServers": { "figma-python": { "command": "figma-mcp", "args": [ "--figma-api-key=your_figma_key" ] } } }

For other IDEs like Windsurf, use an MCP configuration file (e.g.,`mcp_config.json`):

{ "mcpServers": { "figma-python": { "command": "figma-mcp", "args": [ "--figma-api-key=your_figma_key" ] } } }

curl -LsSf https://astral.sh/uv/install.sh | sh uv venv source .venv/bin/activate uv sync