Figma MCP Server

by JayArrowz

73 stars

942 downloads

Not rated

GitHub

Media
API

About

It is a Model Context Protocol (MCP) server that exposes a complete set of Figma API methods as MCP tools. Designed for developers and AI assistants, it allows interacting with Figma files, components, comments, webhooks, and library analytics programmatically.

Details

Author: JayArrowz
GitHub stars: 73
Downloads: 942
Categories: Media, API

- Complete set of Figma API methods as MCP tools.
- User, file, comment, team, component, and style operations.
- Webhook creation and management (V2 API).
- Library analytics for component, style, and variable usages.
- Supports depth parameter for handling large files.
- Works with environment variables or command-line tokens.

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 MCP Server

Command (node, npx, python, etc.)

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 mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

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 mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

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 mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

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 mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

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 mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

From the repository

Install via Smithery (npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude) or clone the repository, run npm install and npm run build. Configure your Figma API token either as the environment variable FIGMA_API_KEY, or pass it via command-line arguments --figma-token or -ft. For Claude Desktop, add the server to your claude_desktop_config.json. On large Figma files, you may need to initially set depth = 1 when calling figma_get_file and increase as needed.

`figma_get_me`

Get the current user

`figma_get_file`

Get a Figma file by key

`figma_get_file_nodes`

Get specific nodes from a Figma file

`figma_get_images`

Render images from a Figma file

`figma_get_image_fills`

Get image fills in a Figma file

`figma_get_file_versions`

Get version history of a Figma file

`figma_get_comments`

Get comments in a Figma file

`figma_post_comment`

Add a comment to a Figma file

`figma_delete_comment`

Delete a comment from a Figma file

`figma_get_comment_reactions`

Get reactions for a comment

`figma_post_comment_reaction`

Add a reaction to a comment

`figma_delete_comment_reaction`

Delete a reaction from a comment

`figma_get_team_projects`

Get projects in a team

`figma_get_project_files`

Get files in a project

`figma_get_team_components`

Get components in a team

`figma_get_file_components`

Get components in a file

`figma_get_component`

Get a component by key

`figma_get_team_component_sets`

Get component sets in a team

`figma_get_file_component_sets`

Get component sets in a file

`figma_get_component_set`

Get a component set by key

`figma_get_team_styles`

Get styles in a team

`figma_get_file_styles`

Get styles in a file

`figma_get_style`

Get a style by key

`figma_post_webhook`

Create a webhook

`figma_get_webhook`

Get a webhook by ID

`figma_update_webhook`

Update a webhook

`figma_delete_webhook`

Delete a webhook

`figma_get_team_webhooks`

Get webhooks for a team

`figma_get_library_analytics_component_usages`

Get library analytics component usage data

`figma_get_library_analytics_style_usages`

Get library analytics style usage data

`figma_get_library_analytics_variable_usages`

Get library analytics variable usage data

Claude Desktop / Cursor

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

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "npx",
                "args": [
                    "@jayarrowz/mcp-figma",
                    "--figma-token",
                    "your_figma_api_key"
                ]
            }
        }
    }
}

McpServers

{
    "figma": {
        "command": "npx",
        "args": [
            "@jayarrowz/mcp-figma",
            "--figma-token",
            "your_figma_api_key"
        ]
    }
}

Figma MCP Server

MCP Server for interacting with the Figma API. This server provides a complete set of Figma API methods through the Model Context Protocol. Sometimes on large figma files you might have to tell it to use depth = 1 for figma_get_file then increase when it needs more.

Tools

This server implements all Figma API methods as MCP tools:

User Methods

1. figma_get_me - Get the current user

File Methods

2. figma_get_file - Get a Figma file by key 3. figma_get_file_nodes - Get specific nodes from a Figma file 4. figma_get_images - Render images from a Figma file 5. figma_get_image_fills - Get image fills in a Figma file 6. figma_get_file_versions - Get version history of a Figma file

Comment Methods

7. figma_get_comments - Get comments in a Figma file 8. figma_post_comment - Add a comment to a Figma file 9. figma_delete_comment - Delete a comment from a Figma file 10. figma_get_comment_reactions - Get reactions for a comment 11. figma_post_comment_reaction - Add a reaction to a comment 12. figma_delete_comment_reaction - Delete a reaction from a comment

Team and Project Methods

13. figma_get_team_projects - Get projects in a team 14. figma_get_project_files - Get files in a project

Component Methods

15. figma_get_team_components - Get components in a team 16. figma_get_file_components - Get components in a file 17. figma_get_component - Get a component by key 18. figma_get_team_component_sets - Get component sets in a team 19. figma_get_file_component_sets - Get component sets in a file 20. figma_get_component_set - Get a component set by key

Style Methods

21. figma_get_team_styles - Get styles in a team 22. figma_get_file_styles - Get styles in a file 23. figma_get_style - Get a style by key

Webhook Methods (V2 API)

24. figma_post_webhook - Create a webhook 25. figma_get_webhook - Get a webhook by ID 26. figma_update_webhook - Update a webhook 27. figma_delete_webhook - Delete a webhook 28. figma_get_team_webhooks - Get webhooks for a team

Library Analytics Methods

29. figma_get_library_analytics_component_usages - Get library analytics component usage data 30. figma_get_library_analytics_style_usages - Get library analytics style usage data 31. figma_get_library_analytics_variable_usages - Get library analytics variable usage data

Installation

Installing via Smithery

To install mcp-figma for Claude Desktop automatically via Smithery:

npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude

Prerequisites

- Node.js (v16 or later) - npm or yarn

Installing the package

```bash

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

figma_get_me

figma_get_file

figma_get_file_nodes

figma_get_images

figma_get_image_fills

figma_get_file_versions

figma_get_comments

figma_post_comment

figma_delete_comment

figma_get_comment_reactions

figma_post_comment_reaction

figma_delete_comment_reaction

figma_get_team_projects

figma_get_project_files

figma_get_team_components

figma_get_file_components

figma_get_component

figma_get_team_component_sets

figma_get_file_component_sets

figma_get_component_set

figma_get_team_styles

figma_get_file_styles

figma_get_style

figma_post_webhook

figma_get_webhook

figma_update_webhook

figma_delete_webhook

figma_get_team_webhooks

figma_get_library_analytics_component_usages

figma_get_library_analytics_style_usages

figma_get_library_analytics_variable_usages

Claude Desktop / Cursor

McpServers

Figma MCP Server

Tools

User Methods

File Methods

Comment Methods

Team and Project Methods

Component Methods

Style Methods

Webhook Methods (V2 API)

Library Analytics Methods

Installation

Installing via Smithery

Prerequisites

Installing the package

Install

More like this

Google Maps

GitLab

FastAPI-MCP

BlenderMCP

AWS MCP Servers

Figma Context (Framelink)

`figma_get_me`

`figma_get_file`

`figma_get_file_nodes`

`figma_get_images`

`figma_get_image_fills`

`figma_get_file_versions`

`figma_get_comments`

`figma_post_comment`

`figma_delete_comment`

`figma_get_comment_reactions`

`figma_post_comment_reaction`

`figma_delete_comment_reaction`

`figma_get_team_projects`

`figma_get_project_files`

`figma_get_team_components`

`figma_get_file_components`

`figma_get_component`

`figma_get_team_component_sets`

`figma_get_file_component_sets`

`figma_get_component_set`

`figma_get_team_styles`

`figma_get_file_styles`

`figma_get_style`

`figma_post_webhook`

`figma_get_webhook`

`figma_update_webhook`

`figma_delete_webhook`

`figma_get_team_webhooks`

`figma_get_library_analytics_component_usages`

`figma_get_library_analytics_style_usages`

`figma_get_library_analytics_variable_usages`