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
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
6 related toolsAnki MCP Server
A Model Context Protocol (MCP) server that enables AI assistants to interact with Anki, the spaced repetition flashcard application. The Anki MCP Server allows AI models to access Anki's card data, enabling features like automated flashcard creation, review, and management.
1MCP Agent
A unified Model Context Protocol server implementation that aggregates multiple MCP servers into one. The 1mcp-app/agent is an open-source project that provides a single entry point for multiple MCP servers, making it easier to manage and interact with various AI models and tools.
Roundtable AI MCP Server
Roundtable AI MCP Server is a zero-configuration local MCP server that unifies multiple AI coding assistants (Codex, Claude Code, Cursor, Gemini) through intelligent auto-discovery and a standardized interface. It coordinates specialized sub-agents from within your IDE to solve engineering problems in parallel, sharing context and synthesizing responses into a single, high-quality output. This documentation details installation, available MCP tools, integration with popular IDEs, and a broad ecosystem of specialized tools and CLIs that can be invoked as part of a roundtable-powered workflow, enabling developers to delegate tasks to the right AI for each facet of a problem without leaving their development environment.
MCPJungle
MCPJungle is a self-hosted MCP Gateway and Registry for AI agents. It serves as a central registry and gateway to manage Model Context Protocol (MCP) servers and the tools they expose. By consolidating MCP server registration, tool discovery, and access control, MCPJungle enables AI agents and clients to discover, group, and securely invoke tools from a single, unified gateway. The project provides a CLI, Docker-based deployment options, and enterprise-ready features such as tool grouping, access control, and observability to streamline MCP-based workflows across organizations.
mcpmcp-server
mcpmcp-server is a focused solution for discovering, setting up, and integrating MCP servers with your favorite clients to unlock AI-powered workflows. It streamlines how you connect MCP-powered servers to popular clients, enabling seamless AI-assisted interactions across your daily tools. The project emphasizes an approachable, config-driven approach to linking MCP servers with clients like Claude Desktop, while directing you to the homepage for variations across apps and platforms. This README highlights a practical JSON configuration example and notes on supported environments, helping you get started quickly and confidently.
Imagen3-MCP
Imagen3-MCP is an image generation service based on Google's Imagen 3.0 that exposes its functionality through MCP (Model Control Protocol). The project provides a server to run a local MCP service that accesses Google Gemini-powered image generation, enabling developers to integrate advanced image synthesis into their applications. The documentation covers prerequisites (Gemini API key), installation steps for Cherry Studio, and a Cursor-based JSON configuration example for embedding the MCP server in broader tooling. This MCP is designed to be deployment-friendly, with configurable environment variables and optional proxy settings to adapt to various network environments.