Skip to main content
Glama
Sign In
enesjakozh

Figma MCP Server

by mohammeduvaiz
GitHub
TypeScript
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

  1. Clone the repository:
    git clone https://github.com/yourusername/figma-mcp-server.git cd figma-mcp-server
  2. Install dependencies:
    npm install
  3. 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
  4. Build the server:
    npm run build
  5. Start the server:
    npm start

Connecting to Clients

Claude for Desktop

  1. 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
  2. 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" } } } }
  3. 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
  1. Create a .cursor directory in your project root:
    mkdir -p .cursor
  2. 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

ToolDescription
get-file-infoGet basic information about a Figma file
get-nodesGet specific nodes from a Figma file
get-componentsGet component information from a Figma file
get-stylesGet style information from a Figma file
get-commentsGet comments from a Figma file
search-fileSearch for elements in a Figma file by type, name, etc.
extract-textExtract 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

VariableDescriptionDefault
FIGMA_API_TOKENYour Figma Personal Access Token(Required)
API_KEYSecurity key for API authentication(Required)
TRANSPORT_TYPETransport method (stdio or sse)stdio
PORTPort for SSE transport3000

Architecture

This MCP server:

  1. Connects to the Figma API using your personal access token
  2. Exposes a standardized interface following the Model Context Protocol
  3. Provides tools, resources, and prompts that LLMs can use to interact with your Figma designs
  4. 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

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

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.

  1. Features
    1. Getting Started
      1. Prerequisites
      2. Installation
    2. Connecting to Clients
      1. Claude for Desktop
      2. Cursor
    3. Available Tools
      1. Available Prompts
        1. Usage Examples
          1. Environment Variables
            1. Architecture
              1. Contributing

                Related MCP Servers

                • MCP Server Make

                  wrale
                  A
                  security
                  A
                  license
                  A
                  quality
                  A Model Context Protocol server that enables LLMs to safely execute make targets from a Makefile, allowing AI assistants to run tests, format code, and automate various development tasks through natural language interaction.
                  Last updated -
                  1
                  2
                  Python
                  MIT License

                • mcp-figma

                  smithery-ai
                  A
                  security
                  F
                  license
                  A
                  quality
                  A Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
                  Last updated -
                  18
                  34
                  1

                • Figma MCP Server

                  1yhy
                  -
                  security
                  A
                  license
                  -
                  quality
                  A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
                  Last updated -
                  124
                  6
                  TypeScript
                  MIT License
                  • Linux
                  • Apple

                • Claude Figma MCP

                  tonycueva
                  -
                  security
                  F
                  license
                  -
                  quality
                  A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
                  Last updated -
                  TypeScript

                View all related MCP servers

                Appeared in Searches

                New MCP Servers

                ID: fecujwllmf