Figma MCP Server: Full API Integration

The Figma MCP Server is a powerful implementation that provides full access to the Figma API through the Model Context Protocol (MCP). This server enables seamless interaction with Figma files, users, comments, components, styles, and more, making it an essential tool for developers and designers working with Figma.

Overview

The Figma MCP Server implements all Figma API methods as MCP tools, allowing you to interact with Figma programmatically. It supports a wide range of functionalities, including file management, user details, comments, components, styles, and webhooks. The server is designed to handle large Figma files efficiently, with options to adjust depth for better performance.

Tools

The server implements the following 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 the Figma MCP Server for Claude Desktop automatically via Smithery:

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

Prerequisites

• Node.js (v16 or later)
• npm or yarn

Installing the Package

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

# Install dependencies
npm install

# Build the package
npm run build

Configuration

To use the Figma 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, 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": ["@jayarrowz/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 project is licensed under the MIT License. For more details, see the LICENSE file.

About

The Figma MCP Server is developed by JayArrowz and provides full API functionality for interacting with Figma. It is a valuable tool for developers and designers looking to integrate Figma into their workflows programmatically.

Resources

• Readme
• MIT License

Activity

• Stars: 16
• Watchers: 1
• Forks: 1

Contributors

• JayArrowz
• smithery-ai[bot]

Languages

• TypeScript: 87.1%
• JavaScript: 12.7%
• Dockerfile: 0.2%