Figma MCP server Details
The Figma MCP server enables design context delivery from Figma files to AI agents and code editors, empowering teams to generate code directly from design selections. It supports both a remote hosted server and a locally hosted desktop server, allowing seamless integration with popular editors through Code Connect and a suite of tools that extract design context, metadata, variables, and more. This guide covers enabling the MCP server, configuring clients (VS Code, Cursor, Claude Code, and others), and using a curated set of MCP tools to fetch structured design data for faster, more accurate code generation. It also explains best practices, prompts, and integration workflows that help teams align generated output with their design systems. The documentation includes concrete JSON examples for configuring servers in editors like VS Code and Cursor, as well as command examples for Claude Code integration and plugin installation.
Use Case
The MCP server exposes a structured context of your Figma designs to AI assistants and code editors. It enables prompt-driven extraction of design context, variables, and metadata, so your agent can generate code that matches your design system. Typical use cases include: generating code from a selected frame, extracting variables and tokens for design systems, mapping Figma nodes to code components via Code Connect, and creating design-system rules to guide output. Example workflows include connecting a local desktop MCP server to VS Code for real-time prompts, or using Cursor to point an agent at a remote or local MCP server. You can also use Claude Code to manage MCP servers from the terminal, including listing, inspecting, and removing configured servers. Example snippets from the docs show how to configure servers, start desktop MCP, and run prompts like get_design_context to verify tool availability. Key tools include get_design_context, get_variable_defs, get_code_connect_map, get_screenshot, create_design_system_rules, get_metadata, get_figjam, and whoami (remote only).
Available Tools (8)
Examples & Tutorials
VS Code remote server configuration:
{
"servers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}VS Code desktop server configuration:
{
"servers": {
"figma-desktop": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
}
}
}Cursor (remote and desktop) configurations:
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}{
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}Claude Code (add remote/desktop MCP servers):
claude mcp add --transport http figma https://mcp.figma.com/mcpclaude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcpClaude Code (management commands):
claude mcp listclaude mcp get my-serverclaude mcp remove my-serverClaude Code (Plugin Installation):
claude plugin install figma@claude-plugins-officialOther editors (remote/desktop server config):
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}{
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}Installation Guide
1) Step 1: Enabling the MCP server
Figma provides two ways to use the MCP server. Remotely using our hosted server, and locally using Figma's desktop app.
If you want to use our remote server, there's nothing to enable, it's already available! To get the local desktop server set up, you'll need to follow the steps below.
Enabling the desktop server
Shift + D.Tip: The server runs locally at this location:
http://127.0.0.1:3845/mcpKeep this address handy for your configuration file in the next step.
2) Step 2: Set up your MCP client
Different MCP clients require slightly different setups to get connected to your MCP server. Follow the instructions below for your specific client to add the Figma MCP server.
VS Code
Remote server url - https://mcp.figma.com/mcp
Local server url - http://127.0.0.1:3845/mcp
figma for the remote MCP serverfigma-desktop for the desktop MCP servermcp.json file:Using the remote MCP Server:
{
"servers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}Using the desktop MCP Server:
{
"servers": {
"figma-desktop": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
}
}
}#get_design_context to confirm that the Figma MCP server tools are available. If no tools are listed, restart the Figma desktop app and VS Code.Note: You must have GitHub Copilot enabled on your account to use MCP in VS Code.
For more information, see VS Code's official documentation.
Cursor
Remote:
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}Desktop:
{
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}Claude Code
claude mcp add --transport http figma https://mcp.figma.com/mcpclaude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcpclaude mcp listclaude mcp get my-serverclaude mcp remove my-serverFor more information, see Anthropic's official documentation.
Claude Code (Plugin Installation)
claude plugin install figma@claude-plugins-officialOther editors
Other editors that support Streamable HTTP can connect to the Figma MCP server. If you’re using a different editor, you can manually add the Figma MCP server using:
Remote:
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}Desktop:
{
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}Integration Guides
Frequently Asked Questions
Is this your MCP?
Claim ownership and get verified badge
Sponsored
Note: The Starter plan or View/Collab seats are limited to up to 6 tool calls per month. Per-minute rate limits apply for Dev or Full seats on Professional, Organization, or Enterprise plans, with limits similar to the Figma REST API. Selection-based prompting only works with the desktop MCP server; the remote server requires a link to a frame or layer to extract context. For best results, use Code Connect to reference your codebase and tokens, and follow MCP best practices to structure prompts and rules.
Compare Alternatives
Similar MCP Tools
9 related toolsPlaywright MCP
Playwright MCP server. A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables large language models (LLMs) to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models. The server is designed to be fast, lightweight, and deterministic, offering LLM-friendly tooling and a rich set of browser automation capabilities via MCP tools. It supports standalone operation, containerized deployments, and integration with a variety of MCP clients (Claude Desktop, VS Code, Copilot, Cursor, Goose, Windsurf, and others).
Sequential Thinking MCP Server
Sequential Thinking MCP Server provides a dedicated MCP tool that guides problem-solving through a structured, step-by-step thinking process. It supports dynamic adjustment of the number of thoughts and allows revision and branching within a controlled workflow, making it ideal for complex analysis and solution hypothesis development. This server is designed to register a single tool, sequential_thinking, and is integrated with common MCP deployment methods (NPX, Docker) as well as editor integrations like Claude Desktop and VS Code for quick setup. The documentation provides exact configuration snippets, usage patterns, and building instructions to help you deploy and use the MCP server effectively, including Codex CLI, NPX, and Docker installation examples.
N8N MCP Server
An MCP (Model Context Protocol) server designed to integrate Claude Desktop, Claude Code, Windsurf, and Cursor with n8n workflows. This MCP enables users to build, test, and orchestrate complex workflows by exposing a set of tools that bridge Claude’s capabilities with n8n’s automation platform. The project emphasizes robust trigger handling, multi-tenant readiness, and progressive documentation to help developers understand how tools map to real-world workflow tasks. It also outlines future tooling integration points (such as getNodeEssentials and getNodeInfo) to further enhance node-structure awareness within MCP-powered automations.
Hugging Face MCP Server
Hugging Face Official MCP Server connects your large language models (LLMs) to the Hugging Face Hub and thousands of Gradio AI Applications, enabling seamless MCP (Model Context Protocol) integration across multiple transports. It supports STDIO, SSE (to be deprecated but still commonly deployed), StreamableHTTP, and StreamableHTTPJson, with the Web Application allowing dynamic tool management and status updates. This MCP server is designed to be run locally or in Docker, and it provides integrations with Claude Desktop, Claude Code, Gemini CLI (and its extension), VSCode, and Cursor, making it easy to configure and manage MCP-enabled tools and endpoints. Tools such as hf_doc_search and hf_doc_fetch can be enabled to enhance document discovery, and an optional Authenticate tool can be included to handle OAuth challenges when called.
Shadcn UI MCP Server v4
Shadcn UI v4 MCP Server is an advanced MCP (Model Context Protocol) server designed to give AI assistants comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. It enables multi-framework support (React, Svelte, Vue, and React Native) with fast, cache-friendly access to component source code, demos, and directory structures, empowering AI-driven development workflows. The project emphasizes production-readiness with Docker Compose, SSE transport for multi-client deployments, and smart caching to optimize GitHub API usage while providing rich metadata and usage patterns for rapid prototyping and learning across frameworks.
MarkItDown MCP
MarkItDown-MCP is a lightweight MCP (Model Context Protocol) server provided as the markitdown-mcp package. It exposes a STDIO, Streamable HTTP, and SSE MCP server designed for calling MarkItDown to convert content to Markdown. The package focuses on simplicity and accessibility, enabling you to run the MCP server locally via a simple CLI, or in Docker for containerized workflows, with integration options for Claude Desktop. The core capability is exposed through a single tool, convert_to_markdown(uri), which accepts a URI in http:, https:, file:, or data: schemes to fetch content and convert it to Markdown. This MCP server is easy to install with pip and can be used in various transport modes, including STDIO and HTTP/SSE, making it a flexible choice for automations and integrations.
Chrome MCP Server
Chrome MCP Server is a Chrome extension-based Model Context Protocol (MCP) server that exposes your Chrome browser functionality to AI assistants like Claude, enabling complex browser automation, content analysis, and semantic search. It leverages your existing Chrome environment, including login states and configurations, to allow large language models and chatbots to control the browser natively without needing to launch a separate automation process. The project emphasizes privacy by remaining fully local and offers capabilities such as cross-tab context, streamable HTTP communication, and a built-in vector database for semantic search and content analysis. As an early-stage project, it includes a growing set of tools for browser control, inspection, and automation, with ongoing development to broaden compatibility and features.
MCP server for Appwrite docs
The MCP server for Appwrite docs enables LLMs and code-generation tools to interact with comprehensive Appwrite documentation. It empowers AI assistants to access up-to-date API references, SDK guides, and implementation examples, facilitating intelligent code generation, troubleshooting, and best-practice guidance directly from the official docs. This MCP brings real-time context, semantic search, and seamless integration with popular editors and IDEs to accelerate development workflows around Appwrite's APIs and SDKs.
Appwrite MCP server
Appwrite MCP server is a Model Context Protocol server that enables AI models to interact with Appwrite’s backend. It provides a curated set of MCP tools to manage databases, users, functions, teams, and more within your Appwrite project, enabling powerful AI-assisted workflows and natural-language interactions with your backend. The server ships with the Databases tools enabled by default to keep prompts within context limits and can be extended by enabling additional APIs via command-line flags. This makes it easier to build AI-powered applications that leverage Appwrite APIs securely and efficiently.