💻

Figma MCP Server

Updated June 2026✓ Official⭐ Featured

The Figma MCP server, built by Figma, provides the Figma MCP Server connects AI coding assistants directly to your Figma design files, enabling real-time access to design tokens, component properties, frame layouts, and node data without leaving your editor. It is officially maintained and best for Coding & Dev.

by Figma

About

The Figma MCP Server connects AI coding assistants directly to your Figma design files, enabling real-time access to design tokens, component properties, frame layouts, and node data without leaving your editor. Figma's official MCP integration runs via the Figma Desktop app's Dev Mode — select any frame, component, or layer in your design and Claude, Cursor, or other MCP-compatible clients can read exact colors, typography, spacing, auto-layout properties, and component variants to generate pixel-accurate implementation code. The popular community alternative, Figma-Context-MCP by GLips (6,000+ GitHub stars), uses your Figma Personal Access Token (created in Figma Settings > Personal Access Tokens) to fetch any file your account can access, exposing tools to get full Figma document JSON, retrieve specific nodes by ID, list components with properties, extract text content from frames, and download rendered images of individual nodes. This approach works without the Figma Desktop app and is compatible with Claude Desktop, Windsurf, and Cline. Both routes give Claude the ability to read your exact design specs and translate Figma layouts into accurate React, Tailwind, or plain HTML/CSS code — eliminating the guesswork of approximating designs from screenshots or verbal descriptions. The Figma MCP Server is most powerful in front-end development workflows where design-to-code fidelity matters.

Installation

npm / npx
npx figma-developer-mcp --figma-api-key=YOUR_FIGMA_ACCESS_TOKEN

Frequently Asked Questions

What is Figma MCP Server?
Figma is an MCP server built by Figma. The Figma MCP Server connects AI coding assistants directly to your Figma design files, enabling real-time access to design tokens, component properties, frame layouts, and node data without leaving your editor. Figma's official MCP integration runs via the Figma Desktop app's Dev Mode — select any frame, component, or layer in your design and Claude, Cursor, or other MCP-compatible clients can read exact colors, typography, spacing, auto-layout properties, and component variants to generate pixel-accurate implementation code. The popular community alternative, Figma-Context-MCP by GLips (6,000+ GitHub stars), uses your Figma Personal Access Token (created in Figma Settings > Personal Access Tokens) to fetch any file your account can access, exposing tools to get full Figma document JSON, retrieve specific nodes by ID, list components with properties, extract text content from frames, and download rendered images of individual nodes. This approach works without the Figma Desktop app and is compatible with Claude Desktop, Windsurf, and Cline. Both routes give Claude the ability to read your exact design specs and translate Figma layouts into accurate React, Tailwind, or plain HTML/CSS code — eliminating the guesswork of approximating designs from screenshots or verbal descriptions. The Figma MCP Server is most powerful in front-end development workflows where design-to-code fidelity matters.
Who built Figma MCP Server?
Figma MCP Server was built by Figma.
Is Figma MCP Server free?
Yes, Figma MCP Server has a free option. The MCP server is free and open-source. Figma: Free tier (3 projects). Professional: $15/editor/mo. Organization: $45/editor/mo. Enterprise: $75/editor/mo.
How do I install Figma MCP Server?
Install Figma MCP Server with npm: npx figma-developer-mcp --figma-api-key=YOUR_FIGMA_ACCESS_TOKEN
What does Figma MCP Server integrate with?
Figma MCP Server integrates with Claude Desktop, Cursor, VS Code, Windsurf, Cline.

Live Status

Auth requiredChecked 7d ago
Latency
221 ms

OAuth-gated (HTTP 401): Streamable HTTP error: Error POSTing to endpoint: Unauthorized

Uptime 0% over the last 3 checksRecent uptime

Quick Info

Install Type
npm
Author
Figma
Categories
2
Integrations
5

Related Servers

💻

Everything

Reference/test server with prompts, resources, and tools. Perfect for testing MCP implementations.

Local
💻

Git

Tools to read, search, and manipulate Git repositories. Full Git operations support.

Local
🤖

Sequential Thinking

Dynamic and reflective problem-solving through thought sequences.

Local
💻

21st.dev Magic

Create crafted UI components inspired by the best 21st.dev design engineers.

Local
💻

GitHub MCP Server

The GitHub MCP server is GitHub's official Model Context Protocol integration, giving AI assistants like Claude and Cursor direct, authenticated access to the GitHub platform and its full developer surface. With this MCP server, you can ask your AI to read and write repository files, create and merge branches, open and review pull requests, comment on and close issues, trigger GitHub Actions workflows, search across code repositories with GitHub's code search, and inspect commit history — all through natural-language prompts in your AI interface. Developers use it to supercharge code review workflows, automate issue triage, generate PR descriptions from diffs, bulk-update repository settings, and wire AI agents into CI/CD pipelines. The GitHub MCP server connects via a GITHUB_PERSONAL_ACCESS_TOKEN environment variable with scopes for the operations you need, keeping authentication clean and auditable. Install with Docker: `docker run -e GITHUB_PERSONAL_ACCESS_TOKEN=<token> ghcr.io/github/github-mcp-server` — or configure it as a remote MCP server in Claude Desktop, Cursor, VS Code, Windsurf, and Cline. With over 8,000 GitHub stars, it is the most widely deployed official code-platform MCP server and the reference implementation for AI-native GitHub automation.

Auth required

Sponsored

Better Stack

Free Plan

Get alerted when your APIs, browser tests, payment pipelines, or MCP server dependencies go down. Used by 100K+ developers.

Start monitoring free →