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 toolsSkyvern MCP
Skyvern is the complete browser MCP for AI agents. 75+ tools for clicking, filling forms, extracting structured data, logging in with 2FA, uploading files, drag-and-drop, running JavaScript, inspecting network traffic, multi-tab browsing, and building reusable cached workflows. First workflow run uses AI; subsequent runs replay a cached script with zero LLM calls.
pageguard-mcp
pageguard-mcp is an MCP (Model Context Protocol) server that exposes PageGuard privacy compliance scanning as a set of tools for AI coding assistants. It enables seamless integration with Claude Code, Cursor, Windsurf, ChatGPT, and any MCP-compatible environment. The server supports local scans, live URL scans, and AI-generated privacy-related documents, helping developers identify tracking technologies, cookies, and third-party data processing, while also producing tailored privacy policies and compliance materials. With its straightforward MCP configuration and free local scanning capability, pageguard-mcp is designed to empower teams to maintain privacy compliance across their projects and websites.
Prop Firm Deal Finder
Prop Firm Deal Finder (PFDF) is a free MCP server that gives AI assistants real-time access to live discount codes across 20+ proprietary trading firms. It provides 6 tools: get_deals (all current discounts), search_firms (search by name/asset class), compare_firms (side-by-side comparison of challenges), find_cheapest (cheapest challenge by account size with PFDF code applied), get_firm_details (15+ data points per firm), and get_discount_code (universal PFDF code). Covers firms like Topstep, Apex Trader Funding, MyFundedFutures, FTMO, The Funded Trader, and 14 more. No API key required. Install via npx propfirmdealfinder-mcp-server or connect remotely at https://web-production-6607c.up.railway.app/mcp
mcp-server-with-spring-ai
mcp-server-with-spring-ai is a Spring Boot integrated MCP (Model Context Protocol) server example that showcases how to expose executable tools from an MCP server to clients (including LLMs) and how to wire a MCP client to consume those tools. The documentation explains MCP at a high level, outlines the three-layer MCP Java SDK architecture (Client/Server Layer, Session Layer, Transport Layer), and demonstrates two sample tools implemented in SellerAccountTools. This repo emphasizes how an MCP server can connect to external data sources (e.g., a PostgreSQL DB) and expose tools that an AI model can invoke to retrieve data, with the example illustrating tool invocation and automatic tool selection by prompts.
OpenClaw MCP Server
OpenClaw MCP Server is a secure Model Context Protocol (MCP) bridge that connects Claude.ai with a self-hosted OpenClaw assistant, enabling OAuth2 authentication and safe, controlled communication between the Claude AI ecosystem and your local or hosted OpenClaw deployment. This MCP server acts as an orchestration layer that exposes MCP tools to Claude.ai, manages authentication, and enforces security boundaries like CORS and transport options. It is designed to be deployed via Docker or run locally, with detailed installation, configuration, and security guidance provided in the documentation. By serving as a bridge, it enables Claude.ai to delegate tasks to your OpenClaw bot while preserving control over data flow and access controls, in line with MCP specifications and best security practices.
Graphiti MCP Server
Graphiti MCP Server is an experimental implementation that exposes Graphiti's real-time, temporally-aware knowledge graph capabilities through the MCP (Model Context Protocol) interface. It enables AI agents and MCP clients to interact with Graphiti's knowledge graph for structured extraction, reasoning, and memory across conversations, documents, and enterprise data. The server supports multiple backends (FalkorDB by default and Neo4j), a variety of LLM providers (OpenAI, Anthropic, Gemini, Groq, Azure OpenAI), and multiple embedder options, all accessible via an HTTP MCP endpoint at /mcp/ for broad client compatibility. It also includes queue-based asynchronous episode processing, rich entity types for structured data, and flexible configuration through config.yaml, environment variables, or CLI arguments.
Context7 MCP Server
Context7 MCP Server delivers up-to-date, code-first documentation and examples for LLMs and AI code editors by pulling content directly from the source. It supports multiple MCP clients and exposes tools that help you resolve library IDs and retrieve library documentation, ensuring prompts use current APIs and usage patterns. The repository provides installation and integration guides for Cursor, Claude Code, Opencode, and other clients, along with practical configuration samples and OAuth options for remote HTTP connections. This MCP server is designed to keep prompts in sync with the latest library docs, reducing hallucinations and outdated code snippets.
TrendRadar MCP
TrendRadar MCP is an AI-driven Model Context Protocol (MCP) based analysis server that exposes a suite of specialized tools for cross-platform news analysis, trend tracking, and intelligent push notifications. It integrates with TrendRadar’s multi-platform data aggregation (RSS and trending topics) and provides advanced AI-powered insights, sentiment analysis, and cross-platform correlation. The MCP server enables developers to query, analyze, and compare news across platforms using a consistent toolset, with ongoing updates that expand capabilities such as RSS querying, date parsing, and multi-date trend analysis. This documentation references the MCP module updates, tool additions, and architecture changes that enhance extensibility, cross-platform data handling, and AI-assisted reporting.
ChainAware Behavioural Prediction MCP
The ChainAware Behavioural Prediction MCP is an MCP-based server that provides AI-powered tools to analyze wallet behaviour prediction, fraud detection, and rug pull prediction. Designed for Web3 security and DeFi analytics, it enables developers and platforms to integrate risk assessment, predictive wallet behavior insights, and rug-pull detection through MCP-compatible clients. The server exposes three specialized tools and uses Server-Sent Events (SSE) for real-time responses, helping safeguard DeFi users, monitor liquidity risks, and score wallet or contract trustworthiness. Access to production endpoints is API-key gated, reflecting a private backend architecture that supports secure, scalable risk analytics across wallets, contracts, and pools.