Skip to main content
Glama
Sign In
enesjakozh

mcp-figma

by thirdstrandstudio
npmGitHub
TypeScript
MIT License
54
16
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • Supports loading environment variables from .env files for configuration, particularly for storing and accessing the Figma API token securely.

  • Provides complete access to the Figma API, allowing interaction with files, comments, teams, projects, components, styles, webhooks, and library analytics. Enables retrieving file content, managing comments and reactions, accessing design components, and monitoring usage analytics.

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

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

Comment Methods

  1. figma_get_comments - Get comments in a Figma file
  2. figma_post_comment - Add a comment to a Figma file
  3. figma_delete_comment - Delete a comment from a Figma file
  4. figma_get_comment_reactions - Get reactions for a comment
  5. figma_post_comment_reaction - Add a reaction to a comment
  6. figma_delete_comment_reaction - Delete a reaction from a comment

Team and Project Methods

  1. figma_get_team_projects - Get projects in a team
  2. figma_get_project_files - Get files in a project

Component Methods

  1. figma_get_team_components - Get components in a team
  2. figma_get_file_components - Get components in a file
  3. figma_get_component - Get a component by key
  4. figma_get_team_component_sets - Get component sets in a team
  5. figma_get_file_component_sets - Get component sets in a file
  6. figma_get_component_set - Get a component set by key

Style Methods

  1. figma_get_team_styles - Get styles in a team
  2. figma_get_file_styles - Get styles in a file
  3. figma_get_style - Get a style by key

Webhook Methods (V2 API)

  1. figma_post_webhook - Create a webhook
  2. figma_get_webhook - Get a webhook by ID
  3. figma_update_webhook - Update a webhook
  4. figma_delete_webhook - Delete a webhook
  5. figma_get_team_webhooks - Get webhooks for a team

Library Analytics Methods

  1. figma_get_library_analytics_component_usages - Get library analytics component usage data
  2. figma_get_library_analytics_style_usages - Get library analytics style usage data
  3. 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

# 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

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

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

When starting the server, you can pass your Figma API token as a command-line argument:

# 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

// Get a Figma file const result = await callTool("figma_get_file", { fileKey: "abcXYZ123" });

Get Comments from a File

// Get comments from a file const comments = await callTool("figma_get_comments", { fileKey: "abcXYZ123", as_md: true });

Create a Webhook

// 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. This means you are free to use, modify, and distribute the software, subject to the terms and conditions of the MIT License. For more details, please see the LICENSE file in the project repository.

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Figma MCP with full API functionality

  1. Tools
    1. User Methods
    2. File Methods
    3. Comment Methods
    4. Team and Project Methods
    5. Component Methods
    6. Style Methods
    7. Webhook Methods (V2 API)
    8. Library Analytics Methods
  2. Installation
    1. Installing via Smithery
    2. Prerequisites
    3. Installing the package
  3. Setup
    1. 1. Environment Variable
    2. 2. Command Line Arguments
    3. Usage with Claude Desktop
  4. Examples
    1. Get a Figma File
    2. Get Comments from a File
    3. Create a Webhook
  5. Development
    1. License

      Related Resources

      Related MCP Servers

      • Figma MCP Server

        TimHolden
        A
        security
        F
        license
        A
        quality
        Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
        Last updated -
        2
        106
        TypeScript
        • Apple

      • Figma MCP Server

        moonray
        A
        security
        A
        license
        A
        quality
        Facilitates the analysis of Figma file structures by extracting node hierarchies, accessible via REST API or MCP protocol.
        Last updated -
        1
        2
        TypeScript
        MIT License

      • Talk to Figma MCP

        sonnylazuardi
        A
        security
        A
        license
        A
        quality
        An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
        Last updated -
        19
        3,008
        3,410
        JavaScript
        MIT License
        • Apple
        • Linux

      • Claude Figma MCP

        tonycueva
        -
        security
        F
        license
        -
        quality
        A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
        Last updated -
        TypeScript

      View all related MCP servers

      Appeared in Searches

      ID: u05o4bmv6d