# Figma Comments MCP

A lightweight **Model Context Protocol (MCP)** server that adds **Figma Comments** support to AI assistants such as Claude.

The official Figma MCP provides excellent support for reading and editing designs, but it does not expose Figma comments. This project fills that gap by allowing AI assistants to read, query, and reply to comments using the Figma REST API.

> **Note:** This project is designed to work **alongside** the official Figma MCP, not replace it.

---

## ✨ Features

- 📋 List all comments in a Figma file
- 🔍 Query comments by:
  - Node ID
  - Resolved / Unresolved status
  - Keyword
- 💬 Reply to existing comments
- ⚡ Lightweight and easy to extend
- 🤖 Built using the official Model Context Protocol (MCP) SDK

---

## Example Workflow

Using the **Official Figma MCP** + **Figma Comments MCP**, Claude can:

1. Read a selected frame.
2. Retrieve comments attached to that frame.
3. Understand the requested changes.
4. Modify the design.
5. Reply to the comment once the changes have been completed.

This creates an end-to-end AI-powered design review workflow.

---

# Available Tools

## `list_comments`

Returns all comments from the configured Figma file.

---

## `get_unresolved_comments`

Returns only unresolved comments.

---

## `query_comments`

Returns comments using optional filters.

### Parameters

| Name | Type | Description |
|------|------|-------------|
| nodeId | string | Filter by Figma Node ID |
| resolved | boolean | Filter resolved/unresolved comments |
| contains | string | Search comments by keyword |

Example:

```json
{
  "nodeId": "114:24499",
  "resolved": false
}
```

---

## `reply_comment`

Replies to an existing Figma comment.

### Parameters

```json
{
  "commentId": "1825600097",
  "message": "Implemented. Please review."
}
```

---

# Project Structure

```
figma-comments-mcp/
│
├── src/
│   ├── config/
│   │   └── env.ts
│   │
│   ├── figma/
│   │   ├── client.ts
│   │   └── comments.ts
│   │
│   ├── services/
│   │   └── commentService.ts
│   │
│   └── server.ts
│
├── .env
├── package.json
└── tsconfig.json
```

---

# Installation

Clone the repository

```bash
git clone https://github.com/<your-username>/figma-comments-mcp.git
```

Install dependencies

```bash
npm install
```

Create a `.env` file

```env
FIGMA_TOKEN=your_figma_personal_access_token
FIGMA_FILE_KEY=your_figma_file_key
```

Start the MCP server

```bash
npm run dev
```

---

# Requirements

- Node.js 20+
- Figma Personal Access Token
- Figma File Key

---

# Tech Stack

- TypeScript
- Node.js
- Axios
- Model Context Protocol SDK
- Figma REST API

---

# Roadmap

- [x] List comments
- [x] Query comments
- [x] Reply to comments
- [ ] Remote HTTP MCP support
- [ ] Claude.ai Connector support
- [ ] Better formatted responses
- [ ] Unit tests
- [ ] GitHub Actions CI/CD

---

# Contributing

Contributions, issues, and feature requests are welcome.

If you'd like to improve the project, feel free to open an issue or submit a pull request.

---

# License

MIT License

---

# Acknowledgements

- Anthropic for the **Model Context Protocol (MCP)**
- Figma for the REST API
- The official Figma MCP team for providing the design-side functionality that this project complements.