Figma MCP Server

What is Figma MCP Server?

A Model Context Protocol (MCP) server that connects to Figma’s API, enabling AI tools and LLMs to access and work with your Figma designs. It is designed for designers and developers who want to integrate design data with AI assistants.

How to use Figma MCP Server?

Ensure Node.js 16+ and a Figma Personal Access Token. Clone the repository, install dependencies, create a .env file with FIGMA_API_TOKEN, API_KEY, and TRANSPORT_TYPE (default stdio). Build the server with npm run build and start with npm start. Then configure an MCP client such as Claude for Desktop or Cursor using the provided JSON configuration snippets.

Key features of Figma MCP Server

• Extract components, styles, and text from Figma designs
• Analyze design system consistency and patterns
• Extract and organize all UI copy from designs
• Generate comprehensive development handoff documentation
• Seamless integration with AI tools like Claude and Cursor

Use cases of Figma MCP Server

• Analyze a design system for consistency in colors and typography
• Extract all UI text copy from a Figma file for content management
• Generate development handoff documentation for developers
• Get file information, components, styles, or comments from a Figma file
• Search for specific elements within a Figma file by type or name

FAQ from Figma MCP Server

What runtime does Figma MCP Server require?

Node.js 16 or higher.

What transport types are supported?

The server supports stdio for local connections and sse for remote connections. The default transport is stdio.

How do I obtain a Figma Personal Access Token?

You can generate a Personal Access Token in your Figma account settings under the “Personal Access Tokens” section.

What environment variables are required?

FIGMA_API_TOKEN and API_KEY are required. TRANSPORT_TYPE defaults to stdio, and PORT (used for SSE transport) defaults to 3000