Figma MCP Server
@thirdstrandstudio
Figma MCP Server with full API functionality
Overview
What is Figma MCP Server?
Figma MCP Server is an MCP server that provides a complete set of Figma API methods through the Model Context Protocol. It enables AI assistants like Claude to interact programmatically with Figma files, comments, components, styles, webhooks, and library analytics.
How to use Figma MCP Server?
You need a Figma API token. Install via npx @thirdstrandstudio/mcp-figma or clone and build the repository. Configure the server in your Claude Desktop config (claude_desktop_config.json) using either the FIGMA_API_KEY environment variable or the --figma-token command‑line argument. Once set up, call any of the 30+ available tools (e.g., figma_get_file, figma_post_comment) from an MCP client.
Key features of Figma MCP Server
- All Figma API methods as MCP tools (30+ tools)
- User, file, comment, team, and project methods
- Component and style retrieval (team & file level)
- Webhook management (V2 API)
- Library analytics for component, style, and variable usage
Use cases of Figma MCP Server
- Extract design data and assets from Figma files using natural language
- Manage comments: read, post, and delete, including reactions
- Set up webhooks to monitor file or team changes
- Analyze library usage: track component and style adoption across teams
FAQ from Figma MCP Server
How do I authenticate with the Figma API?
Set the FIGMA_API_KEY environment variable or pass the --figma-token (or -ft) command‑line argument when starting the server.
What Node.js version is required?
Node.js v16 or later is required.
Can I install this server via Smithery?
Yes. Use npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude for automatic installation.
How do I use it with Claude Desktop?
Add a configuration entry to claude_desktop_config.json using either npx with the --figma-token argument or a direct node path with the FIGMA_API_KEY environment variable.
How should I handle large Figma files?
Start with depth=1 when calling figma_get_file, then increase the depth if more detail is needed.