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