Figma MCP Server

by MCP-Mirror

API/Clients & Integration Figma TypeScript API

A TypeScript server implementing the Model Context Protocol (MCP) for the Figma API, enabling standardized context provision for LLMs. It allows LLM applications to seamlessly integrate with Figma resources.

View on GitHub

Last updated: N/A

What is Figma MCP Server?

This server provides MCP-compliant access to Figma resources, allowing LLM applications to seamlessly integrate with Figma files, components, and variables. It implements the full MCP specification while providing specialized handlers for Figma's unique resource types.

How to use Figma MCP Server?

Set up your Figma access token. 2. Configure the server (optional). 3. Start the server using npm run start. 4. Use the server as an MCP server with stdio or SSE transport. 5. Integrate with a client using the @modelcontextprotocol/sdk library.

Key features of Figma MCP Server

MCP Resource Handlers for Figma files, variables, and components
Custom URI scheme (figma:///)
Type-safe implementation using TypeScript
Request validation using Zod schemas

Use cases of Figma MCP Server

Integrating Figma designs into LLM-powered design tools
Providing context from Figma files to AI assistants
Automating design tasks using LLMs
Building intelligent design systems with LLM integration

FAQ from Figma MCP Server

What is the Model Context Protocol (MCP)?

MCP is a standard protocol for providing context to LLMs.

What is the Figma API?

The Figma API allows developers to programmatically access and manipulate Figma files.

What is the `figma:///` URI scheme?

It's a custom URI scheme for accessing Figma resources, such as files, components, and variables.

How do I set up my Figma access token?

Set the FIGMA_ACCESS_TOKEN environment variable with your Figma personal access token.

What transport methods are supported?

The server supports both stdio and SSE transports for the Model Context Protocol.