Figma

Figma MCP Server with full API functionality
  • typescript

65

GitHub Stars

typescript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs
{
  "mcpServers": {
    "thirdstrandstudio-mcp-figma": {
      "command": "npx",
      "args": [
        "-y",
        "@thirdstrandstudio/mcp-figma",
        "--figma-token",
        "YOUR_FIGMA_TOKEN"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
      }
    }
  }
}

You can use this Figma MCP Server to access the Figma API through a unified set of MCP tools. It enables you to retrieve files, nodes, images, comments, team data, components, styles, webhooks, and analytics by issuing MCP calls from your client. This server is designed to work with a Figma API token and is structured to handle large files by adjusting depth when needed.

How to use

To work with this MCP server, connect your MCP client to the local or remote server and start issuing tool calls that correspond to Figma API methods. You can fetch files, render images, read and post comments, manage webhooks, and access components, styles, and analytics. Use the provided tool names such as figma_get_file, figma_get_comments, figma_post_comment, figma_post_webhook, and more to perform the corresponding Figma operations. If you deal with large Figma files, you may need to increase depth for certain calls and then adjust as the data retrieval demands.

How to install

Prerequisites: Install Node.js (version 16 or later) and a package manager such as npm or yarn.

# Clone the repository
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# Install dependencies
npm install

# Build the package
npm run build

Additional setup and usage notes

You must provide a Figma API token to authenticate requests. There are multiple ways to configure the token depending on your workflow.

Environment variable method: create a .env file at the project root or export the token in your shell using FIGMA_API_KEY=your_figma_api_key.

Command line argument method: when starting the server, pass the token as a command-line argument using either the long form or the short form.

Claude Desktop integration examples show two local MCP configurations you can use to run the server from your Claude environment. One uses npx to run the package with the token, and the other runs Node.js directly with an environment variable or command-line token.

Examples

Get a Figma file by key using an MCP client: use the figma_get_file tool with the appropriate fileKey.

Development

Development commands include installing dependencies, starting in development mode, and building the server. You can run the server with a Figma API token to begin making calls.

Available tools

figma_get_me

Get information about the current authenticated user.

figma_get_file

Retrieve a Figma file by its key.

figma_get_file_nodes

Fetch specific nodes from a Figma file by node IDs.

figma_get_images

Render images from a Figma file for specified nodes/pages.

figma_get_image_fills

Retrieve image fill data for a file.

figma_get_file_versions

Obtain the version history of a Figma file.

figma_get_comments

Get comments from 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 specific comment.

figma_post_comment_reaction

Add a reaction to a comment.

figma_delete_comment_reaction

Remove a reaction from a comment.

figma_get_team_projects

List projects within a team.

figma_get_project_files

List files within a project.

figma_get_team_components

List components in a team.

figma_get_file_components

List components in a file.

figma_get_component

Get a component by key.

figma_get_team_component_sets

List component sets in a team.

figma_get_file_component_sets

List component sets in a file.

figma_get_component_set

Get a component set by key.

figma_get_team_styles

List styles in a team.

figma_get_file_styles

List styles in a file.

figma_get_style

Get a style by key.

figma_post_webhook

Create a webhook.

figma_get_webhook

Retrieve a webhook by ID.

figma_update_webhook

Update a webhook.

figma_delete_webhook

Delete a webhook.

figma_get_team_webhooks

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

Built by
VeilStrat
AI signals for GTM teams
© 2026 VeilStrat. All rights reserved.All systems operational