📌Overview

Purpose: The Figma MCP Server is designed to streamline interactions with the Figma API, providing developers with an accessible interface to utilize various Figma functionalities and methods.

Overview: The Figma MCP Server implements a comprehensive set of Figma API methods through the Model Context Protocol. It allows users to effectively access and manipulate Figma files, components, styles, comments, and more, making it a powerful tool for developers working with the Figma design ecosystem.

Key Features:

User Methods: Access current user details using figma_get_me.
File Methods: Retrieve files and their specific nodes, render images, and access version history using methods like figma_get_file and figma_get_file_versions.
Comment Methods: Manage comments on files, including posting, deleting, and reacting to comments.
Team and Project Methods: Obtain information about team projects and files within those projects.
Component and Style Methods: Fetch and manage components and styles within teams and projects, providing robust support for design systems.
Webhook Methods: Create and manage webhooks for real-time data updates on file changes.
Library Analytics Methods: Access analytics data related to component and style usage, helping teams analyze their design libraries effectively.

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. On large Figma files, you might need to start with depth = 1 for figma_get_file and increase it when more detail is needed.

Tools

This server implements all Figma API methods as MCP tools:

User Methods

figma_get_me - Get the current user

File Methods

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

Comment Methods

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

Team and Project Methods

figma_get_team_projects - Get projects in a team
figma_get_project_files - Get files in a project

Component Methods

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

Style Methods

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

Webhook Methods (V2 API)

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

Library Analytics Methods

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

Installation

Installing via Smithery

To install mcp-figma for Claude Desktop automatically:

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

Prerequisites

Node.js (v16 or later)
npm or yarn

Installing the package

# 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

Setup

Set up your Figma API token by one of the following methods:

1. Environment Variable

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

FIGMA_API_KEY=your_figma_api_key

2. Command Line Arguments

Pass your Figma API token as a command-line argument when starting the server:

# Using the long form
node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# Or using the short form
node dist/index.js -ft YOUR_FIGMA_TOKEN

Usage with Claude Desktop

Add the following to your claude_desktop_config.json:

Using npx

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

Direct Node.js (with environment variable)

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

Direct Node.js (with command-line argument)

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

Replace /path/to/mcp-figma with the actual path to your repository.

Examples

Get a Figma File

const result = await callTool("figma_get_file", { 
  fileKey: "abcXYZ123"
});

Get Comments from a File

const comments = await callTool("figma_get_comments", { 
  fileKey: "abcXYZ123",
  as_md: true 
});

Create a Webhook

const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "File update webhook"
});

Development

# Install dependencies
npm install

# Start the server in development mode
npm start

# Build the server
npm run build

# Run with a Figma API token
npm start -- --figma-token YOUR_FIGMA_TOKEN

License

This MCP server is licensed under the MIT License. You are free to use, modify, and distribute the software under the terms of the MIT License. See the LICENSE file in the project repository for details.