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

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

2. Install dependencies:

npm install

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

```bash