Figma MCP Server

Model Context Protocol for Figma's REST API. Contribute to MatthewDailey/figma-mcp development by creating an account on GitHub.

Overview

The Figma MCP Server is a TypeScript implementation of the Model Context Protocol (MCP) tailored for the Figma API. It provides MCP-compliant access to Figma resources, enabling seamless integration with Figma files, components, and variables. This server is designed to facilitate the interaction between Language Learning Models (LLMs) and Figma, allowing for efficient management and manipulation of design assets.

Created by MatthewDailey

For Product Designers, Project Managers, and Design Leaders, this server offers a standardized method to programmatically access and modify Figma resources. It streamlines design workflows by automating tasks such as retrieving design components, monitoring changes in design files, and integrating design data into other applications. This enhances collaboration and efficiency within design teams.

Key Features

• MCP Resource Handlers:
  • Access and manipulation of Figma files
  • Management of variables and components
  • Implementation of a custom URI scheme (figma:///)
• Robust Implementation:
  • Type-safe implementation using TypeScript
  • Request validation using Zod schemas
  • Comprehensive error handling
  • Token validation and API integration
  • Support for batch operations

Use Cases

• Seamless integration with LLMs for Figma resource management
• Automation of design workflows by programmatically accessing and modifying Figma settings
• Monitoring and responding to changes in Figma resources in real time

Capabilities

• Listing available Figma resources
• Reading content of Figma resources
• Watching for resource changes
• Searching across Figma resources
• Retrieving metadata about resources

How It Works

• Installation:
  • Install the required packages: npm install @modelcontextprotocol/sdk and npm install
• Configuration:
  • Set up your Figma access token: export FIGMA_ACCESS_TOKEN=your_access_token
  • Optionally configure the server port: export MCP_SERVER_PORT=3000
• Starting the Server:
  • Run the server: npm run start
• Using as an MCP Server:
  • The server supports both stdio and SSE transports for client communication.
• Client Integration:
  • Initialize the client using the provided SDK and connect to the server to perform operations like listing resources, reading files, and watching for changes.

✨ New to MCP or wondering why it matters?
Read how I’m using it in real workflows—with Claude, Figma, and Ghost:
👉 What Is Model Context Protocol (MCP)? It Changed How I Design—and Blog