📌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 connecting with the Figma plugin.
Comprehensive API: Access a wide range of Figma features through a unified API.
Unit and Integration Testing: Includes tests to verify server functionality and design flow.

Modes

Readonly Mode

Extract design information from a Figma file using a URL link. This includes:

File information
Node details
Styles (colors, text, effects)
Variables
Component identification
Variant detection
Responsive design detection

Write Mode

Create or update designs by establishing a connection with the Figma plugin. This includes:

Creating frames, shapes, text, and components
Updating node properties
Deleting nodes

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
npm run test:integration

# Run all tests
npm run test:all

Project Structure

figma-server/
├── src/                      # Source code
│   ├── core/                 # Core functionality
│   ├── readonly/             # Readonly mode implementation
│   ├── write/                # Write mode implementation
│   ├── mcp/                  # MCP server implementation
│   ├── index.ts              # Entry point
│   └── mode-manager.ts       # Mode management (readonly/write)
├── tests/                    # Test files
├── plugin/                   # Figma plugin
└── docs/                     # Documentation

Documentation

For detailed usage instructions, see the 1.

License

ISC

figma-mcp-server