Figma

by thirdstrandstudio

20 stars

656 downloads

Not rated

GitHub

About

Integrates with Figma's API to enable viewing, manipulating, and collaborating on design files through comprehensive access to file operations, comments, components, and team resources.

Details

Author: thirdstrandstudio
Repository: thirdstrandstudio/mcp-figma
GitHub stars: 20
Downloads: 656
License: MIT License
Categories: Developer Tools, Other, Design, API, Workplace, File Management, AI, Communication, Frontend, Infrastructure

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.) npx
Arguments
- Argument 1 @thirdstrandstudio/mcp-figma
- Argument 2 --figma-token
- Argument 3 your_figma_api_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": [
                "@thirdstrandstudio/mcp-figma",
                "--figma-token",
                "your_figma_api_key"
            ],
            "command": "npx"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "@thirdstrandstudio/mcp-figma",
                "--figma-token",
                "your_figma_api_key"
            ],
            "command": "cmd"
        }
    }
}

JSON

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

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

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "@thirdstrandstudio/mcp-figma",
                "--figma-token",
                "your_figma_api_key"
            ],
            "command": "cmd"
        }
    }
}

JSON

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

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

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "@thirdstrandstudio/mcp-figma",
                "--figma-token",
                "your_figma_api_key"
            ],
            "command": "cmd"
        }
    }
}

JSON

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

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

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "@thirdstrandstudio/mcp-figma",
                "--figma-token",
                "your_figma_api_key"
            ],
            "command": "cmd"
        }
    }
}

JSON

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

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

JSON

{
    "mcpServers": {
        "figma": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "@thirdstrandstudio/mcp-figma",
                "--figma-token",
                "your_figma_api_key"
            ],
            "command": "cmd"
        }
    }
}

JSON

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

From the repository

To use this MCP server, you need to set up your Figma API token. You can do this in one of three ways:

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

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

npm install Create a .env file in the project root or set the environment variable directly:

FIGMA_API_KEY=your_figma_api_key

Add the following to your claude_desktop_config.json:

json
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/path/to/mcp-figma/dist/index.js"],
"env": {
"FIGMA_API_KEY": "your_figma_api_key"
}
}
}
}
```

`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.

This server implements all Figma API methods as MCP tools:

Claude Desktop / Cursor

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

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

Linux

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

Macos

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

Windows

{
    "env": [],
    "args": [
        "/c",
        "npx",
        "@thirdstrandstudio/mcp-figma",
        "--figma-token",
        "your_figma_api_key"
    ],
    "command": "cmd"
}

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

Linux

Macos

Windows

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

Sequential Thinking

Sentry

Github

Filesystem

EverArt

Google Drive

`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`