📌Overview

Purpose: To provide a Model Context Protocol (MCP) server that facilitates interaction with Figma designs through information extraction and design creation or updates using a dedicated plugin.

Overview: The Figma MCP Server is designed for seamless interaction with Figma design files, enabling users to extract critical design information and create or modify designs efficiently. It operates in two distinct modes: Readonly for information extraction and Write for design updates, catering to diverse user needs within the Figma ecosystem.

Key Features:

Readonly Mode: Allows users to extract comprehensive design details such as file information, node specifics, styles, assets, and component variants using a URL link, valuable for analysis and documentation purposes.
Write Mode: Enables the creation and updating of Figma designs via a plugin connection, offering functionalities like creating shapes, updating node properties, and providing smart element creation capabilities to enhance workflow efficiency.

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 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

Modes

Readonly Mode

In readonly mode, the server extracts design information from a Figma file using a URL link, including:

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 creates or updates designs by connecting with the Figma plugin, including:

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

Clone the repository:

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

Install dependencies:

npm install

Build the server:

npm run build

Configuration

Set the Figma access token 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 verifies that the plugin is running and can connect to the server.

JavaScript versions of the tests are provided as alternatives that don't require TypeScript compilation.

Project Structure

figma-server/
├── src/
│   ├── core/
│   │   ├── config.ts
│   │   ├── logger.ts
│   │   ├── types.ts
│   │   └── utils.ts
│   ├── readonly/
│   │   ├── api-client.ts
│   │   ├── design-manager.ts
│   │   └── style-extractor.ts
│   ├── write/
│   │   ├── plugin-bridge.ts
│   │   ├── design-creator.ts
│   │   └── component-utils.ts
│   ├── mcp/
│   │   ├── server.ts
│   │   ├── tools.ts
│   │   └── handlers.ts
│   ├── index.ts
│   └── mode-manager.ts
├── tests/
│   ├── unit/
│   │   └── server.test.ts
│   └── integration/
│       └── design-flow.test.ts
├── plugin/
│   ├── code.js
│   ├── manifest.json
│   └── ui.html
└── docs/
    └── usage.md

Documentation

For detailed usage instructions, see the usage documentation.

License

ISC

figma-mcp-server