---
title: Figma REST API MCP Server
emoji: 🎨
colorFrom: purple
colorTo: blue
sdk: static
pinned: false
tags:
  - mcp
  - model-context-protocol
  - figma
  - api
  - design
  - collaboration
  - claude
  - webhooks
  - variables
license: mit
---

# 🎨 Complete Figma REST API MCP Server

A comprehensive [Model Context Protocol](https://modelcontextprotocol.io/) server that gives Claude Desktop **complete access to the Figma REST API**. Access files, comments, variables, webhooks, projects, teams, dev resources, version history, and more - all through natural language.

## 🎯 Complete API Coverage - 29 Endpoints

**📖 Files & Content:**
- Get complete file structure as JSON with all nodes and components
- Retrieve specific nodes from files
- Render images from nodes in any format (PNG, JPG, SVG, PDF)
- Access image fills and assets

**💬 Comments & Collaboration:**
- Read, create, delete comments with full threading support
- React to comments with emojis
- Reply to threads with @mentions
- Track comment authors and resolution status

**🎨 Variables & Design Systems (Enterprise):**
- Access local and published variables
- Create and update design tokens
- Manage design system synchronization

**🔔 Webhooks & Automation:**
- Create webhooks for file updates and events
- Manage webhook lifecycle (get, update, delete)
- Debug webhook requests

**👥 Projects & Teams:**
- Access team projects and files
- Navigate organizational structure

**🔧 Dev Resources:**
- Attach developer URLs to design nodes
- Bridge design and development workflows

**📜 Version History:**
- Access file version history
- Track design evolution

## 🚀 Quick Start

This MCP server is published on npm and can be used directly with Claude Desktop or any MCP-compatible client using `npx`.

### Installation

Add this configuration to your Claude Desktop config file:

**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`  
**Windows:** `%APPDATA%/Claude/claude_desktop_config.json`

```json
{
  "mcpServers": {
    "figma-comments": {
      "command": "npx",
      "args": ["-y", "mcp-figma-comment-summary"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_token_here"
      }
    }
  }
}
```

**Important:** 
- Replace `your_figma_token_here` with your [Figma Personal Access Token](https://developers.figma.com/docs/rest-api/authentication/#access-tokens)
- Each user needs their own token (secure and private)
- Restart Claude Desktop after updating the configuration

## ✨ Features

- 📄 **29 Endpoints** covering the complete Figma REST API
- 💬 **Comments**: Full CRUD + reactions + @mentions (9 endpoints)
- 📁 **Files**: Complete file access, node retrieval, image rendering (4 endpoints)
- 🎨 **Variables**: Design tokens management - Enterprise (3 endpoints)
- 🔔 **Webhooks**: Event-driven automations (6 endpoints)
- 👥 **Teams & Projects**: Organizational navigation (2 endpoints)
- 🔧 **Dev Resources**: Design-to-dev bridge (3 endpoints)
- 📜 **Version History**: Track file changes (1 endpoint)
- 👤 **Users**: Current user info (1 endpoint)
- 🔒 **Secure**: Each user uses their own Figma token

## 🛠️ Available Tools (29 Total)

### 💬 Comments (9 endpoints)
- `get_figma_comments` - Retrieve all comments with threads
- `summarize_figma_comments` - Generate statistics
- `get_comment_users` - List users for @mentions
- `post_figma_comment` - Create comments with @mentions
- `reply_to_figma_comment` - Reply to threads
- `delete_figma_comment` - Delete comments
- `get_comment_reactions` - Get emoji reactions
- `post_comment_reaction` - Add reactions
- `delete_comment_reaction` - Remove reactions

### 📄 Files (4 endpoints)
- `get_file` - Get complete file structure as JSON
- `get_file_nodes` - Get specific nodes by ID
- `render_images` - Render as PNG/JPG/SVG/PDF
- `get_image_fills` - Get all image fill URLs

### 👤 Users (1 endpoint)
- `get_current_user` - Get authenticated user info

### 📜 Version History (1 endpoint)
- `get_version_history` - Get file version history

### 👥 Projects & Teams (2 endpoints)
- `get_team_projects` - List team projects
- `get_project_files` - List project files

### 🎨 Variables (3 endpoints - Enterprise)
- `get_local_variables` - Get local variables
- `get_published_variables` - Get published variables
- `create_variables` - Create/update variables

### 🔧 Dev Resources (3 endpoints)
- `get_dev_resources` - Get developer URLs
- `create_dev_resource` - Attach URL to node
- `delete_dev_resource` - Remove resource

### 🔔 Webhooks V2 (6 endpoints)
- `create_webhook` - Create webhook for events
- `get_webhook` - Get webhook by ID
- `get_webhooks` - List all webhooks
- `update_webhook` - Update webhook
- `delete_webhook` - Delete webhook
- `get_webhook_requests` - Debug webhook requests

## 📖 Use Cases

**💬 Comments & Collaboration:**
- Design reviews and feedback management
- Automated responses to comment threads
- Comment sentiment analysis
- Team collaboration analytics

**📁 File Management:**
- Extract complete design system structure
- Generate documentation from Figma files
- Export assets and images programmatically
- Navigate file hierarchies

**🎨 Design Systems (Enterprise):**
- Synchronize design tokens across files
- Track variable changes
- Automate design system documentation
- Validate token usage

**🔔 Automation:**
- Set up file update notifications
- Trigger workflows on design changes
- Monitor library publications
- Track team activity

**👥 Team Organization:**
- Audit project file organization
- Generate team activity reports
- Navigate organizational structures

**🔧 Developer Handoff:**
- Attach implementation URLs to designs
- Bridge design-to-development workflow
- Track component implementation status

## 💡 Example Conversations

**💬 Comments:**
```
"Get all comments from file ABC123 and reply to unresolved ones"
"Delete comment 789 and add a 👍 reaction to comment 456"
"Post a comment mentioning @john_designer to review colors"
```

**📁 Files & Nodes:**
```
"Get the complete structure of file ABC123"
"Render nodes 1:5,1:6,1:7 as PNG at 2x scale"
"Export node 123:456 as SVG"
```

**🎨 Variables:**
```
"Get all local variables from file ABC123"
"Create a new color variable named 'primary-blue'"
```

**🔔 Webhooks:**
```
"Create a webhook for FILE_UPDATE events on team T123"
"List all webhooks and show request history"
```

**Combined Workflows:**
```
"Get file structure, find all buttons, render as images, create catalog"
"Analyze comments, group by theme, post summary with @mentions"
"Set up webhook for updates, document all current variables"
```

## 🔍 Finding Your Figma File ID

The File ID is in your Figma file URL:

```
https://www.figma.com/file/ABC123XYZ/file-name
                          ↑
                    This is the File ID
```

## 📦 Installation from npm

```bash
npm install -g mcp-figma-comment-summary
```

Or use directly with `npx` (recommended):

```bash
npx -y mcp-figma-comment-summary
```

## 🔗 Links

- **npm Package**: [mcp-figma-comment-summary](https://www.npmjs.com/package/mcp-figma-comment-summary)
- **GitHub Repository**: [IgnorantesNaturales/mcp-figma-comment-summary](https://github.com/IgnorantesNaturales/mcp-figma-comments)
- **Model Context Protocol**: [modelcontextprotocol.io](https://modelcontextprotocol.io/)
- **Figma API**: [Figma Developers](https://www.figma.com/developers/api)

## 🤝 Contributing

Contributions are welcome! Please visit the [GitHub repository](https://github.com/IgnorantesNaturales/mcp-figma-comments) to contribute.

## 📄 License

MIT License - see the [LICENSE](https://github.com/IgnorantesNaturales/mcp-figma-comments/blob/main/LICENSE) file for details.

## 🙋 Support

If you encounter issues:
- Check the [Troubleshooting Guide](https://github.com/IgnorantesNaturales/mcp-figma-comments#troubleshooting)
- Open an issue on [GitHub](https://github.com/IgnorantesNaturales/mcp-figma-comments/issues)
- Review the [Figma API documentation](https://www.figma.com/developers/api)

---

Made with ❤️ for the MCP community