Overview
What is Figma MCP Server?
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 files, components, and variables.
How to use Figma MCP Server?
Install via npm and set the FIGMA_ACCESS_TOKEN environment variable. Start the server with npm run start. It supports both stdio and SSE transports (e.g., figma-mcp-server --transport sse --port 3000). Use an MCP client to connect and call MCP methods like resources/list or resources/read using the custom URI scheme figma:///.
Key features of Figma MCP Server
- MCP resource handlers for Figma files, variables, and components
- Custom URI scheme (
figma:///) - Type-safe implementation using TypeScript and Zod schemas
- Request validation and comprehensive error handling
- Token validation and Figma API integration
- Supports both stdio and SSE transports
Use cases of Figma MCP Server
- Browse and read Figma files programmatically via LLM clients
- List and retrieve components, variables, and styles from Figma projects
- Watch for changes on specific Figma resources
- Search across Figma resources with pattern matching
- Integrate Figma design data into AI-assisted workflows
FAQ from Figma MCP Server
How do I configure the Figma MCP Server?
Set the FIGMA_ACCESS_TOKEN environment variable with your Figma access token. Optionally set MCP_SERVER_PORT (default 3000 for SSE).
What transports does the Figma MCP Server support?
It supports both stdio transport (piped JSON-RPC messages) and SSE transport (over HTTP).
What Figma resources can I access via the server?
Resources are accessed via figma:/// URIs: files (figma:///file/{key}), components, variables, styles, teams, and projects.
What MCP operations are implemented?
The server implements resources/list, resources/read, resources/watch, resources/search, and resources/metadata.
Are there any known limitations or planned improvements?
The roadmap notes that caching, rate limiting, and additional Figma API endpoints are not yet implemented; these are planned for future releases.
