Figma MCP Server

What is Figma MCP Server?

Figma MCP Server is a Model Context Protocol (MCP) server that allows Claude AI to extract design information from Figma files and create or update designs using the Figma plugin. It operates in two modes: Readonly Mode for extracting design data via a URL link and Write Mode for creating or updating designs by connecting with the Figma MCP plugin. It is built for developers and designers who want to interact programmatically with Figma through an AI assistant.

How to use Figma MCP Server?

Clone the repository, install dependencies with npm install, build with npm run build, then set the FIGMA_ACCESS_TOKEN environment variable. Start the server with npm start or for development use npm run dev. For write mode, the Figma MCP plugin must be installed in the Figma desktop app. Run unit tests with npm test and integration tests with npm run test:integration or npm run test:integration-js.

Key features of Figma MCP Server

• Readonly Mode to extract file info, node details, and styles
• Write Mode to create and update frames, shapes, and text
• Comprehensive API covering components, variables, and responsive design
• Unit and integration tests included for reliability
• Plugin connection test to verify WebSocket communication

Use cases of Figma MCP Server

• Extract design tokens (colors, text styles, effects) from a Figma file
• Create new frames and components programmatically via Claude AI
• Identify components, variants, and responsive design properties
• Automate design updates by modifying node properties and fills
• Test the full flow from design creation to data extraction

FAQ from Figma MCP Server

What are the two modes of Figma MCP Server?

Readonly Mode extracts design information using a Figma URL link, while Write Mode creates or updates designs by connecting with the Figma MCP plugin.

What are the prerequisites?

Node.js 18 or higher, a Figma account with an access token, and the Figma MCP plugin installed in the Figma desktop app (required for write mode).

How do I configure and start the server?

Set the FIGMA_ACCESS_TOKEN environment variable, then run npm start. For development, use npm run dev.

What information can be extracted in readonly mode?

File information, node details, styles (colors, text, effects), assets, variables, component identification, variant detection, and responsive design detection.

What actions are supported in write mode?

Creating frames, shapes, text, components, and component instances; updating node properties; setting fills, strokes, and effects; and deleting nodes.