Integrations

Connects to Figma's API to extract components, styles, and text from designs, analyze design system consistency, manage UI content, and generate development documentation.

Figma MCP Server

A Model Context Protocol (MCP) server that connects to Figma's API, allowing AI tools and LLMs to access and work with your Figma designs.

Features

Design Data Extraction: Extract components, styles, and text from your Figma designs
Design System Analysis: Analyze design system consistency and patterns
UI Content Management: Extract and organize all UI copy from designs
Development Handoff: Generate comprehensive documentation for developers
Seamless AI Integration: Connect your designs to AI tools like Claude, Cursor, and other MCP-compatible clients

Getting Started

Prerequisites

Node.js 16 or higher
Figma Personal Access Token (Get it from your Figma account settings)

Installation

Clone the repository:
git clone https://github.com/yourusername/figma-mcp-server.git cd figma-mcp-server
Install dependencies:
npm install
Create a .env file in the project root:
FIGMA_API_TOKEN=your_figma_personal_access_token API_KEY=your_secure_api_key TRANSPORT_TYPE=stdio
Build the server:
npm run build
Start the server:
npm start

Connecting to Clients

Claude for Desktop

Open or create the Claude for Desktop configuration file:
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json
Add the following configuration:
{ "mcpServers": { "figma": { "command": "node", "args": ["/absolute/path/to/figma-mcp-server/build/index.js"], "env": { "FIGMA_API_TOKEN": "your_figma_personal_access_token", "TRANSPORT_TYPE": "stdio" } } } }
Restart Claude for Desktop

Cursor

Global Configuration

Create or edit Cursor's MCP configuration file:

macOS: ~/Library/Application Support/Cursor/mcp.json
Windows: %APPDATA%\Cursor\mcp.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

Project-Specific Configuration

Create a .cursor directory in your project root:
mkdir -p .cursor
Create an mcp.json file inside that directory:
{ "mcpServers": { "figma-mcp": { "url": "http://localhost:3000/sse", "env": { "API_KEY": "your_secure_api_key" } } } }

Available Tools

Tool	Description
`get-file-info`	Get basic information about a Figma file
`get-nodes`	Get specific nodes from a Figma file
`get-components`	Get component information from a Figma file
`get-styles`	Get style information from a Figma file
`get-comments`	Get comments from a Figma file
`search-file`	Search for elements in a Figma file by type, name, etc.
`extract-text`	Extract all text elements from a Figma file

Available Prompts

analyze-design-system - Analyze design system components and styles for consistency
extract-ui-copy - Extract and organize all UI copy from designs
generate-dev-handoff - Generate development handoff documentation based on designs

Usage Examples

Using with Claude:

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

Using with Cursor:

Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.

Environment Variables

Variable	Description	Default
`FIGMA_API_TOKEN`	Your Figma Personal Access Token	(Required)
`API_KEY`	Security key for API authentication	(Required)
`TRANSPORT_TYPE`	Transport method (`stdio` or `sse`)	`stdio`
`PORT`	Port for SSE transport	`3000`

Architecture

This MCP server:

Connects to the Figma API using your personal access token
Exposes a standardized interface following the Model Context Protocol
Provides tools, resources, and prompts that LLMs can use to interact with your Figma designs
Supports both stdio transport (local connections) and SSE transport (remote connections)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

A Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.