Deepsuthar496 Figma MCP Server

🚀 Figma MCP Server

A Model Context Protocol (MCP) server integrating with the Figma API, enabling interactions with Figma files, comments, components, etc.

🚀 Quick Start

The Figma MCP Server offers seamless integration with the Figma API, facilitating diverse operations on Figma resources.

✨ Features

• File Operations

  • Retrieve file information.
  • Obtain file version history.
  • Fetch file components.

• Comment Management

  • List comments in a file.
  • Add new comments.
  • Delete comments.

• Project and Team Features

  • List team projects.
  • Get project files.
  • Retrieve published styles.

• Webhook Management

  • Create webhooks.
  • List existing webhooks.
  • Delete webhooks.

📦 Installation

1. Clone the repository.
2. Install dependencies:

npm install

3. Build the server:

npm run build

📚 Documentation

Configuration

Configure the server in your MCP settings file using a Figma access token:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["path/to/figma-server/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token-here"
      },
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

Available Tools

File Operations

get_file

Retrieve file information.

{
  "file_key": "string"
}

get_file_versions

Obtain file version history.

{
  "file_key": "string"
}

get_file_components

Fetch components in a file.

{
  "file_key": "string"
}

Comment Management

get_file_comments

List comments in a file.

{
  "file_key": "string"
}

post_comment

Add a comment to a file.

{
  "file_key": "string",
  "message": "string"
}

delete_comment

Delete a comment from a file.

{
  "file_key": "string",
  "comment_id": "string"
}

Project and Team Features

get_team_projects

List team projects.

{
  "team_id": "string"
}

get_project_files

Get project files.

{
  "project_id": "string"
}

get_component_styles

Retrieve published styles.

{
  "team_id": "string"
}

Webhook Management

create_webhook

Create a webhook.

{
  "team_id": "string",
  "event_type": "string",
  "callback_url": "string"
}

get_webhooks

List webhooks.

{
  "team_id": "string"
}

delete_webhook

Delete a webhook.

{
  "webhook_id": "string"
}

💻 Usage Examples

Basic Usage

// Example: Use the MCP tool to get file information
<use_mcp_tool>
<server_name>figma</server_name>
<tool_name>get_file</tool_name>
<arguments>
{
  "file_key": "your-file-key"
}
</arguments>
</use_mcp_tool>

📄 License

This project is licensed under the MIT License.

🤝 Contribution Guidelines

1. Fork the repository.
2. Create a feature branch.
3. Commit your changes.
4. Push to the branch.
5. Create a new Pull Request.