Design & MediaMCP Registryremote2 toolsA · 88

Figma MCP Server

com.figma.mcp · Updated 1y ago

The Figma MCP server brings Figma design context directly into your AI workflow.

At a glance

Figma MCP Server is an MCP server in the Design & Media category. It is hosted remotely and connects over HTTP, and declares no required credentials. It exposes 2 tools, including get_design_context and get_variable_defs. It scores A (88/100) on the MCP Skills Hub health score as of Oct 27, 2026.

Source 2.1k

One-click install

VS Code VS Code Insiders Cursor

Opens your editor and pre-fills the config. Your editor will ask before adding it.

How to install Figma MCP Server in your AI client

Setup for Claude Code, Claude Desktop, Cursor, Codex, Windsurf, Cline and VS Code — copy-paste ready.

How to install Figma MCP Server in Claude CodeAnthropic's agentic CLI

Add the server

bash

claude mcp add --transport http figma https://mcp.figma.com/mcp

2
Verify it's connected
bash
```
claude mcp list
```
Sharing it with your team?
Add `--scope project` to write it to .mcp.json in the repository root, which you can commit (with the secrets left as environment variables).
Use it in a session
Ask Claude to use the tools this server exposes (e.g. get_design_context, get_variable_defs). It discovers them automatically.

How to install Figma MCP Server in Claude DesktopDesktop app (MCP config)

Open your MCP config
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

Add this server

json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.figma.com/mcp"
      ]
    }
  }
}

Why the wrapper?
This is a remote (HTTP) server and Claude Desktop only launches local processes, so mcp-remote proxies the connection. It will open a browser window if the server needs OAuth.
Restart Claude Desktop
The tools appear under the 🔌 menu once the app reloads.

How to install Figma MCP Server in CursorAI-first code editor

Create / edit .cursor/mcp.json in your project

json

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Enable it
Cursor Settings → MCP → toggle the server on. Tools become available to the Composer/Agent.

How to install Figma MCP Server in Codex CLIOpenAI coding agent

Add to ~/.codex/config.toml

toml

[mcp_servers.figma]
command = "npx"
args = ["-y", "mcp-remote", "https://mcp.figma.com/mcp"]

Why the wrapper?
Codex runs MCP servers as local processes, so mcp-remote bridges this HTTP endpoint to stdio.
Run Codex
Codex loads MCP servers from config.toml on startup and exposes their tools to the agent.

How to install Figma MCP Server in WindsurfCodeium's agentic IDE

Edit ~/.codeium/windsurf/mcp_config.json

json

{
  "mcpServers": {
    "figma": {
      "serverUrl": "https://mcp.figma.com/mcp"
    }
  }
}

Reload
Windsurf → Cascade → refresh MCP servers. Cascade can now call the tools.

How to install Figma MCP Server in ClineVS Code autonomous agent

Open Cline → MCP Servers → Configure
Adds to cline_mcp_settings.json.

Add the server

json

{
  "mcpServers": {
    "figma": {
      "type": "streamableHttp",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

How to install Figma MCP Server in VS CodeCopilot / MCP support

Create .vscode/mcp.json

json

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Start it
VS Code shows a ▶ Start action above the server entry. Agent mode (Copilot Chat) can then use the tools.

What tools does Figma MCP Server expose? (2)

Taken from the project's README — the server itself was not queried, so check its docs for the exact schemas.

get_design_contextprovides a structured React + Tailwind representation of your Figma selection. This is a starting point that your AI assistant can translate into any framework or code style, depending on your prompt.
get_variable_defsextracts the variables and styles used in your selection (color, spacing, typography, etc). This helps the model reference your tokens directly in the generated code.

What the code can do

This is a remote server — nothing is installed or run on your machine, so there is no local code to analyze. What it can reach is described above: your requests go to the provider's host.

Before you install

Signals gathered from the source repo and package registry — not a safety verdict.

What it can reach

Third-party hosted service — Your requests and any data in them are sent to mcp.figma.com.
No local execution — Nothing is installed or run on your machine.

Last commit 7 days ago — Actively maintained.
2.1k GitHub stars — Community adoption signal.
No license declared — Without a license the code is not legally reusable in a commercial project.

Client compatibility

Claude Code: NativeClaude Desktop: Via mcp-remoteCursor: NativeCodex CLI: Via mcp-remoteWindsurf: NativeCline: NativeVS Code: Native

Health score

A · 88

Maintenance, adoption, transparency and packaging — not a safety audit. How this is calculated

Maintenance30%100%
Last commit 7 days ago.
Adoption20%100%
2126 stars.
Transparency20%75%
3/4: ✓ public source repo, ✗ declared license, ✓ documentation, ✓ discoverable tool list.
Provenance15%75%
Links to its own repository; package linkage unverified.
Packaging15%75%
Remote endpoint; authentication requirements not declared.

Documentation

Full README

Figma MCP Server Guide

The Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.

[!NOTE] Rate limits apply to Figma MCP server tools that read data from Figma. Some tools, such as those that write to Figma files, are exempt from the rate limits. Users on the Starter plan or with View or Collab seats on paid plans will be limited to up to 6 tool calls per month. Users with a Dev or Full seat on the Professional, Organization, or Enterprise plans have per minute rate limits, which follow the same limits as the Tier 1 Figma REST API. As with Figma’s REST API, Figma reserves the right to change rate limits.

For the complete set of Figma MCP server docs, see our developer documentation. By using the Figma MCP server and the related resources (including these skills), you agree to the Figma Developer Terms. These skills are currently available as a Beta feature.

Features

Write to the canvas (remote server only): Create and modify native Figma content directly from your MCP client. With the right skills, agents can build and update frames, components, variables, and auto layout in your Figma files using your design system as the source of truth.

Note: We're quickly improving how Figma supports AI agents. The write to canvas feature will eventually be a usage-based paid feature, but is currently available for free during the beta period.

Generate placeholder images: When source, captured, or library images are unavailable, agents can use generate_image after asking permission and disclosing Figma AI credit usage. Generated images are uploaded with upload_assets and applied to the design.

Generate code from selected frames

Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.

Extract design context

Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.

Code smarter with Code Connect

Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

Excerpt — the full document is on GitHub.

Alternatives to Figma MCP Server

Maintain Figma MCP Server? Add a badge to your README

Shows its health grade, and links readers to install steps for every client.

markdown

[![Figma MCP Server on MCP Skills Hub](https://mcp-skills-hub.vercel.app/badge/com-figma-mcp-mcp)](https://mcp-skills-hub.vercel.app/mcps/com-figma-mcp-mcp)

Catalog data refreshed Oct 27, 2026. Something wrong? Report it.