Figma MCP Server provides AI assistants with programmatic access to the Figma design platform through a complete implementation of Figma's REST API. It enables reading and manipulating design files, managing collaborative workflows, and extracting design system data. Key capabilities include: - File operations: retrieve complete files, specific nodes, rendered images, image fills, and version history - Comment management: read, post, and delete comments along with reaction handling - Design system access: query teams and projects, list components and component sets, and access shared styles - Library analytics: retrieve usage data for components, styles, and design variables - Webhook support: create and manage webhooks for real-time notifications via the V2 API - User information: access current user profile and permissions

Figma MCP Server

[](https://tss.topiray.com)

[](https://smithery.ai/server/@thirdstrandstudio/mcp-figma)

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

File Methods

Comment Methods

Team and Project Methods

Component Methods

Style Methods

Webhook Methods (V2 API)

Library Analytics Methods

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

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

```javascript /