ignorantesnaturales/mcp-figma-comment-summary

🎨 Complete Figma REST API MCP Server

A comprehensive Model Context Protocol 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

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

npm install -g mcp-figma-comment-summary

Or use directly with npx (recommended):

npx -y mcp-figma-comment-summary

🔗 Links

• npm Package: mcp-figma-comment-summary
• GitHub Repository: IgnorantesNaturales/mcp-figma-comment-summary
• Model Context Protocol: modelcontextprotocol.io
• Figma API: Figma Developers

🤝 Contributing

Contributions are welcome! Please visit the GitHub repository to contribute.

📄 License

MIT License - see the LICENSE file for details.

🙋 Support

If you encounter issues:

• Check the Troubleshooting Guide
• Open an issue on GitHub
• Review the Figma API documentation

---

Made with ❤️ for the MCP community