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:
👥 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
