Figma MCP Server
Description
# Figma MCP Server When Claude/Cursor has direct access to Figma design data, it can generate accurate designs in a single step—far more effectively than approaches that rely on screenshots. A Model Context Protocol (MCP) server providing read-only integration with the Figma…
About
# Figma MCP Server When Claude/Cursor has direct access to Figma design data, it can generate accurate designs in a single step—far more effectively than approaches that rely on screenshots. A Model Context Protocol (MCP) server providing read-only integration with the Figma API. Supports core Figma file and project…
Details
- Author
- ishivam06
- Downloads
- 230
- Categories
- Media
Jump to
- Secure authentication with the Figma API
- Read and list Figma file details
- Manage design variables (create, update, delete)
- Create and validate variable references
- Create themes with variable mode configurations
Install Node.js 18+ and obtain a Figma access token with read permissions. Copy .env.example to .env and set FIGMA_ACCESS_TOKEN, optionally configure MCP_SERVER_PORT (default 3000) and DEBUG flags. For Claude Desktop, add the server to your Claude configuration file (examples/claude_desktop_config.json). The server exposes tools such as get-file, list-files, create-variables, update-variables, delete-variables, create-reference, validate-references, and create-theme.
Figma MCP Server
When Claude/Cursor has direct access to Figma design data, it can generate accurate designs in a single step—far more effectively than approaches that rely on screenshots.
A Model Context Protocol (MCP) server providing read-only integration with the Figma API. Supports core Figma file and project access, designed for use with Claude Desktop and other MCP-compatible clients.
Features
- Secure authentication with Figma API
- Figma file operations (read, list)
Prerequisites
- Node.js 18.x or higher
- Figma access token (read permissions)
Configuration
1. Copy .env.example to .env and set your Figma access token:
FIGMA_ACCESS_TOKEN=your_figma_token
MCP_SERVER_PORT=3000
DEBUG=figma-mcp:*
2. For Claude Desktop integration, add the server to your Claude config (see examples/claude_desktop_config.json).
``
Available Tools
- get-file: Retrieve Figma file details
- list-files: List files in a Figma project
- create-variables: Create variables in a Figma file
- update-variables: Update existing variables in a Figma file
- delete-variables: Delete variables from a Figma file
- create-reference: Create a reference between variables
- validate-references: Check for circular references and validate dependencies
- create-theme: Create a theme with variable mode configurations
See src/handlers/figma.ts and src/commands/figma.ts for implementation details.
See src/handlers/figma.ts and src/commands/figma.ts for implementation details.
Project Structure
- src/server.ts — Main server logicsrc/handlers/figma.ts
- — Figma API handlerssrc/commands/figma.ts
- — Command definitionssrc/schemas/
- — Input validation schemassrc/types/
- — TypeScript typesbin/figma-mcp-server
- — CLI entry pointexamples/` — Example Claude Desktop configs
-
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
