Skip to main content
Glama
Sign In
figma-mcp-server

figma-mcp-server

by karthiks3000
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

Figma MCP Server

A Model Context Protocol (MCP) server for interacting with Figma designs. This server allows Claude AI to extract design information from Figma files and create or update designs using the Figma plugin.

Features

  • Readonly Mode: Extract design information from Figma files using a URL link

  • Write Mode: Create or update designs by establishing a connection with the Figma plugin

  • Comprehensive API: Access to a wide range of Figma features through a unified API

  • Unit Testing: Includes tests to verify server functionality

  • Integration Testing: Tests the flow from creating designs to reading them

Related MCP server: Claude Talk to Figma MCP

Modes

Readonly Mode

In readonly mode, the server can extract design information from a Figma file using a URL link. This includes:

  • File information

  • Node details

  • Styles (colors, text, effects)

  • Assets (images)

  • Variables

  • Component identification

  • Variant detection

  • Responsive design detection

Write Mode

In write mode, the server can create or update designs by establishing a connection with the Figma plugin. This includes:

  • Creating frames, shapes, text, and components

  • Creating component instances

  • Updating node properties

  • Setting fills, strokes, and effects

  • Deleting nodes

  • Smart element creation

Prerequisites

  • Node.js 18 or higher

  • A Figma account and access token

  • The Figma MCP plugin installed in the Figma desktop app (for write mode)

Installation

  1. Clone the repository:

git clone https://github.com/your-username/figma-server.git
cd figma-server

  1. Install dependencies:

npm install

  1. Build the server:

npm run build

Configuration

The server requires a Figma access token to be set in the environment:

export FIGMA_ACCESS_TOKEN=your_figma_access_token

Usage

Starting the Server

npm start

Development Mode

npm run dev

Running Tests

# Run unit tests
npm test

# Run integration tests (TypeScript)
npm run test:integration

# Run integration tests (JavaScript)
npm run test:integration-js

# Run all tests
npm run test:all

# Test plugin connection
npm run test:plugin-connection-js

The plugin connection test is a simple WebSocket server that listens for connections from the Figma plugin. It's useful for verifying that the plugin is running and can connect to the server.

The JavaScript versions of the tests are provided as alternatives that don't require TypeScript compilation, which can be more reliable in some environments.

Project Structure

figma-server/
├── src/                      # Source code
│   ├── core/                 # Core functionality
│   │   ├── config.ts         # Configuration management
│   │   ├── logger.ts         # Logging utilities
│   │   ├── types.ts          # Common type definitions
│   │   └── utils.ts          # Utility functions
│   ├── readonly/             # Readonly mode implementation
│   │   ├── api-client.ts     # Figma REST API client
│   │   ├── design-manager.ts # Design information extraction
│   │   └── style-extractor.ts # Style extraction utilities
│   ├── write/                # Write mode implementation
│   │   ├── plugin-bridge.ts  # WebSocket server for plugin communication
│   │   ├── design-creator.ts # Design creation utilities
│   │   └── component-utils.ts # Component utilities
│   ├── mcp/                  # MCP server implementation
│   │   ├── server.ts         # Main MCP server
│   │   ├── tools.ts          # Tool definitions
│   │   └── handlers.ts       # Tool handlers
│   ├── index.ts              # Entry point
│   └── mode-manager.ts       # Mode management (readonly/write)
├── tests/                    # Test files
│   ├── unit/                 # Unit tests
│   │   └── server.test.ts    # Server tests
│   └── integration/          # Integration tests
│       └── design-flow.test.ts # Design flow tests
├── plugin/                   # Figma plugin
│   ├── code.js               # Plugin code
│   ├── manifest.json         # Plugin manifest
│   └── ui.html               # Plugin UI
└── docs/                     # Documentation
    └── usage.md              # Usage instructions for Claude AI

Documentation

For detailed usage instructions, see the usage documentation.

License

ISC

Available Tools

9 tools
detect_responsiveC

Detect responsive variations of components

Inputs: figmaUrl (required).

detect_variantsC

Detect component variants and group them

Inputs: figmaUrl (required).

extract_stylesB

Extract color, text, and effect styles from a Figma file

Inputs: figmaUrl (required).

get_assetsB

Get image URLs for nodes in a Figma file

Inputs: figmaUrl (required), scale, format, nodeId.

get_file_infoB

Get basic metadata about a Figma file

Inputs: figmaUrl (required).

get_node_detailsB

Get detailed information about a specific node (component, frame, etc.)

Inputs: figmaUrl (required), nodeId, properties, detailLevel.

get_variablesB

Get variables and variable collections from a Figma file (new Figma Variables API)

Inputs: figmaUrl (required).

identify_componentsA

Identify UI components in a Figma design (charts, tables, forms, etc.)

Inputs: figmaUrl (required), nodeId.

validate_tokenA

Test if the configured token has access to a Figma file

Inputs: figmaUrl (required).

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A3.6/5.0

    Scored across 9 tools

    Disambiguation5/5

    Each tool targets a distinct aspect of Figma data: token validation, file metadata, node details, styles, assets, variables, and three specific component analyses (identification, variants, responsive). The overlapping-sounding component tools are clearly differentiated by their descriptions.

    Naming Consistency5/5

    All tool names follow a consistent verb_noun pattern using clear verbs (validate, get, extract, identify, detect) and specific nouns. The convention is uniform across the entire set.

    Tool Count5/5

    Nine tools is well within the ideal range for a specialized server, covering a cohesive set of read-only Figma operations without redundancy or bloat. Each tool earns its place.

    Completeness4/5

    The server covers the core read-only surface for Figma: file access, node introspection, styles, assets, variables, and component analysis. No create/update operations are included, but the server's apparent purpose is analysis; minor gaps like commenting or file search are not critical.

    Resources

    Related MCP Connectors

    Related MCP Servers