Figma MCP Server

🚀 Figma MCP Server

A Model Context Protocol (MCP) server integrated with the Figma API, allowing you to interact with Figma files, comments, components, etc.

🚀 Quick Start

This server provides seamless integration with the Figma API, enabling various operations on Figma resources.

✨ Features

• File Operations

  • Retrieve file information.
  • Get the file version history.
  • Obtain file components.

• Comment Management

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

• Project and Team Features

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

• Webhook Management

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

📦 Installation

Install via Smithery

To automatically install the Figma MCP Server for Claude Desktop via Smithery:

npx -y @smithery/cli install @deepsuthar496/figma-mcp-server --client claude

Manual Installation

1. Clone the repository.
2. Install dependencies:

npm install

3. Build the server:

npm run build

📚 Documentation

Configuration

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

{
  "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

Get the file version history

{
  "file_key": "string"
}

get_file_components

Obtain file components

{
  "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 in a file

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

Project and Team Features

get_team_projects

Get projects in a team

{
  "team_id": "string"
}

get_project_files

Get files in a project

{
  "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"
}

list_webhooks

List webhooks

{
  "team_id": "string"
}

delete_webhook

Delete a webhook

{
  "webhook_id": "string"
}

💻 Usage Examples

Basic Usage

```figma
Figma Client ID: your_client_id_here
Figma Client Secret: your_client_secret_here

To get file information:

curl -X GET 'https://api.figma.com/v1/files/[file_key]'
  -H 'Authorization: Bearer [access_token]'

To get the file version history:

curl -X GET 'https://api.figma.com/v1/files/[file_key]/versions'
  -H 'Authorization: Bearer [access_token]'

To add a comment:

curl -X POST 'https://api.figma.com/v1/comments'
  -H 'Content-Type: application/json'
  -d '{"file_key": "your_file_key", "message": "your_message"}'

📄 License

[License Content]

🤝 Contribution Guidelines

Contributions to this project are welcome! Please follow these steps to contribute:

1. Clone the repository.
2. Create a feature branch.
3. Commit your changes.
4. Push to the remote repository.
5. Submit a pull request.

Please ensure to check the code format before submitting your code and add appropriate documentation for your changes.