Figma Context MCP

Name: Figma Context MCP
Author: GLips

von GLipsVersion 0.13.2i★ 16.189iLäuft auf deinem Computer

Name in der Registryio.github.GLips/Figma-Context-MCP

So installierst du es

Überblick

Beschreibung vom Entwickler (englisches Original)

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

Verbindung: Läuft auf deinem Computer
Transport: stdio
Kategorie: Design, Bilder & Audio
Das musst du eintragen: FIGMA_API_KEY

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

3/3 Prüfungen bestanden · Läuft auf deinem Computer

Zuerst: Welche KI nutzt du?

ClaudeWeb · App · HandyChatGPTWebClaude CodeTerminalCursorCode-EditorVS CodeCode-EditorAndereAndere Apps

Wähle deine App, dann erscheinen die Schritte unten.

Klappt mit Claude, aber erst etwas vorbereiten

Du brauchst einen Schlüssel von Figma Context MCP (auf der Seite des Anbieters registrieren, kann kosten) · Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy

Node.js installieren
Nur einmal; gilt für alle Server, die Node.js brauchen
Download-Seite von Node.js öffnen ↗
Erledigt
Bei Figma Context MCP registrieren und Schlüssel erstellen
Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Kann Geld kosten.
Wie du einen Schlüssel bekommst, steht unten im README des Anbieters
Erledigt
Einstellungsdatei der Claude-Desktop-App öffnen
SettingsDeveloperEdit Config
Erledigt

Diese Einstellungen einfügen und speichern

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-value"
      }
    }
  }
}

Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem

Erledigt

Claude beenden und neu öffnen
Erledigt
Ausprobieren
Nutze Figma Context MCP und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Claude sagt, dass es Figma Context MCP nutzt, oder ein Werkzeug von Figma Context MCP in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

ChatGPT kann Figma Context MCP noch nicht verbinden

Figma Context MCP läuft auf deinem Computer, aber ChatGPT verbindet nur Server, die im Web laufen

Das kannst du stattdessen tun

A · Eine App nutzen, die Figma Context MCP verbinden kann

Schritte für Claude →Du brauchst einen Schlüssel von Figma Context MCP (auf der Seite des Anbieters registrieren, kann kosten) · Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy
Schritte für Claude Code →Du brauchst einen Schlüssel von Figma Context MCP (auf der Seite des Anbieters registrieren, kann kosten) · Installiere zuerst Node.js auf deinem Computer (nur einmal)
Schritte für Cursor →Du brauchst einen Schlüssel von Figma Context MCP (auf der Seite des Anbieters registrieren, kann kosten) · Installiere zuerst Node.js auf deinem Computer (nur einmal)
Schritte für VS Code →Du brauchst einen Schlüssel von Figma Context MCP (auf der Seite des Anbieters registrieren, kann kosten) · Installiere zuerst Node.js auf deinem Computer (nur einmal)

B · Andere in Design, Bilder & Audio, die mit ChatGPT funktionieren

Aus den meistgenutzten derselben Kategorie, nur solche, die per Adresse ohne Schlüssel verbinden

Pascal 3D Editor✓ ChatGPT
Semiotic✓ ChatGPT
TypeUI✓ ChatGPT

Klappt mit Claude Code, aber erst etwas vorbereiten

Du brauchst einen Schlüssel von Figma Context MCP (auf der Seite des Anbieters registrieren, kann kosten) · Installiere zuerst Node.js auf deinem Computer (nur einmal)

Node.js installieren
Nur einmal; gilt für alle Server, die Node.js brauchen
Download-Seite von Node.js öffnen ↗
Erledigt
Bei Figma Context MCP registrieren und Schlüssel erstellen
Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Kann Geld kosten.
Wie du einen Schlüssel bekommst, steht unten im README des Anbieters
Erledigt
Terminal öffnen
Mac: Command+Leertaste drücken und Terminal tippen · Windows: PowerShell öffnen
Erledigt
4
Diesen Befehl einfügen und Enter drücken
```
claude mcp add figma-context --env FIGMA_API_KEY=your-value -- npx -y figma-developer-mcp --stdio
```
Ersetze „your-value“ vor dem Enter durch deinen Schlüssel
Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem
Erledigt
/mcp in Claude Code eingeben
Figma Context MCP sollte in der Liste als verbunden erscheinen
Erledigt
Ausprobieren
Nutze Figma Context MCP und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Claude Code sagt, dass es Figma Context MCP nutzt, oder ein Werkzeug von Figma Context MCP in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit Cursor, aber erst etwas vorbereiten

Du brauchst einen Schlüssel von Figma Context MCP (auf der Seite des Anbieters registrieren, kann kosten) · Installiere zuerst Node.js auf deinem Computer (nur einmal)

Node.js installieren
Nur einmal; gilt für alle Server, die Node.js brauchen
Download-Seite von Node.js öffnen ↗
Erledigt
Bei Figma Context MCP registrieren und Schlüssel erstellen
Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Kann Geld kosten.
Wie du einen Schlüssel bekommst, steht unten im README des Anbieters
Erledigt
Mit diesem Button Cursor öffnen
In Cursor öffnen
Cursor fragt nach einer Bestätigung; klicke Install
Erledigt
Schlüssel eintragen
In den Einstellungen von Figma Context MCP ist FIGMA_API_KEY leer; trag deinen Schlüssel ein und speichere
Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem
Erledigt
KI-Chat in Cursor im Agent-Modus öffnen
Erledigt
Ausprobieren
Nutze Figma Context MCP und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Cursor sagt, dass es Figma Context MCP nutzt, oder ein Werkzeug von Figma Context MCP in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Cursor abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit VS Code, aber erst etwas vorbereiten

Du brauchst einen Schlüssel von Figma Context MCP (auf der Seite des Anbieters registrieren, kann kosten) · Installiere zuerst Node.js auf deinem Computer (nur einmal)

Node.js installieren
Nur einmal; gilt für alle Server, die Node.js brauchen
Download-Seite von Node.js öffnen ↗
Erledigt
Bei Figma Context MCP registrieren und Schlüssel erstellen
Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Kann Geld kosten.
Wie du einen Schlüssel bekommst, steht unten im README des Anbieters
Erledigt
Mit diesem Button VS Code öffnen
In VS Code öffnen
VS Code fragt nach einer Bestätigung; klicke Install
Erledigt
Schlüssel eintragen
In den Einstellungen von Figma Context MCP ist FIGMA_API_KEY leer; trag deinen Schlüssel ein und speichere
Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem
Erledigt
KI-Chat in VS Code im Agent-Modus öffnen
Erledigt
Ausprobieren
Nutze Figma Context MCP und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn VS Code sagt, dass es Figma Context MCP nutzt, oder ein Werkzeug von Figma Context MCP in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von VS Code abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Andere Apps mit MCP, etwa Windsurf, Zed oder Gemini CLI, fügen Server unterschiedlich hinzu. Sieh in der App-Liste nach

Alle Apps mit MCP ansehen →

JSON-Einstellungen stehen unten unter „Für Entwickler“

Hängst du fest? Frag Leute, die Figma Context MCP nutzen💬 Diskussion →

Für Entwickler: Terminal-Befehle und JSON-Einstellungen

Auf deinem Computer installiert

Claude Code

claude mcp add figma-context --env FIGMA_API_KEY=your-value -- npx -y figma-developer-mcp --stdio

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-value"
      }
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-value"
      }
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "figma-context": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-value"
      }
    }
  }
}

Werte, die du selbst einträgst

FIGMA_API_KEY geheim erforderlich env
Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Auf einen Blick

GitHub-Sterne i: 16.189
Downloads pro Wochei: 152.142/Wo.
Lizenz i: MIT
Verbindung: Läuft auf deinem Computer
Transport: stdio
Neueste Versioni: 0.13.2
Kategoriei: Design, Bilder & Audio
In der Registry veröffentlichti: 18. Juni 2026
Code zuletzt geänderti: 27. Okt. 2026
Entwickler: GLips
Pakete: npm: figma-developer-mcp
Repo: GLips/Figma-Context-MCP
Registry-Status: Aktiv

Welche Apps ihn nutzen können

Basierend darauf, wie sich dieser Server verbindet, und auf der eigenen Doku jeder App, geprüft am 10. Nov. 2026.

Laufen auf deinem Computer in

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

Alle Apps, mit Vor- und Nachteilen →

Was er kann

Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 12. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto GLips bestätigt, dem das Repo gehört
✓ Bestanden
Wird noch gepflegt
Code zuletzt geändert: vor 16 Tagen
✓ Bestanden
Hat eine Lizenz
Nutzt MIT
– Nicht zutreffend
Endpunkt antwortet
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
– Nicht zutreffend
Anmeldung mit OAuth
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
… Noch nicht geprüft
Keine versteckten Anweisungen in Tool-Beschreibungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen

Diskussion

Fragen, Tipps teilen oder melden, dass etwas nicht geht. Sortiert nach „hilfreich“.

Noch keine Beiträge. Stell die erste Frage oder teile einen Tipp.

Beiträge hier stammen von Nutzern, nicht vom PopNx-Team.

Mit Google anmelden, um zu posten

Nutzerbewertungen

Noch keine Bewertungen

Mit Google anmelden, um zu bewerten

Im Vergleich mit anderen in Design, Bilder & Audioi

Mehr Sterne als 100 % der anderen 2935 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 11 % der anderen 2935 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 100 % der anderen 2935 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Figma Context MCP sicher?

Er hat 3 von 3 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Das musst du eintragen: FIGMA_API_KEY

Läuft er auf meinem Computer oder in der Cloud?

Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt vor 16 Tagen geändert, und die neueste Version (0.13.2) kam vor 5 Monaten in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Next AI Draw.io, Pascal 3D Editor, screenpipe

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:↓ Downloads pro Wochei★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Next AI Draw.io

draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand

von DayuanJiangWeit verbreitet↓ 21.676/Wo.★ 36.873Aktualisiert vor 4 Tagen

Läuft auf deinem Computer

Installieren

Pascal 3D Editor

Create, inspect, validate, and save editable 3D building scenes with Pascal's MCP server.

von pascalorgWeit verbreitet↓ 1037/Wo.★ 25.446Aktualisiert heute

Computer oder Cloud✓ pascal.app

Installieren

screenpipe

Search your local screen recordings, audio transcripts, and computer activity from screenpipe.

von screenpipeWeit verbreitet↓ 6626/Wo.★ 22.346Aktualisiert vor 9 Tagen

Läuft auf deinem Computer

Installieren

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

Framelink MCP for Figma Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

See quickstart instructions →

Demo

Watch a demo of building a UI in Cursor with Figma design data

How it works

Open your IDE's chat (e.g. agent mode in Cursor).
Paste a link to a Figma file, frame, or group.
Ask Cursor to do something with the Figma file—e.g. implement the design.
Cursor will fetch the relevant metadata from Figma and use it to write your code.

This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.

Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.

Getting Started

Many code editors and other AI clients use a configuration file to manage MCP servers.

The figma-developer-mcp server can be configured by adding the following to your configuration file.

NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found here.

MacOS / Linux

"mcpServers": { "Framelink MCP for Figma": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } }

Windows

"mcpServers": { "Framelink MCP for Figma": { "command": "cmd", "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } }

Or you can set FIGMA_API_KEY and PORT in the env field.

If you need more information on how to configure the Framelink MCP for Figma, see the Framelink docs.

Star History

Learn More

The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the Framelink site.

Figma Context MCP

Überblick

Was du damit machen kannst

Installation

Node.js installieren

Bei Figma Context MCP registrieren und Schlüssel erstellen

Einstellungsdatei der Claude-Desktop-App öffnen

Diese Einstellungen einfügen und speichern

Claude beenden und neu öffnen

Ausprobieren

Das kannst du stattdessen tun

Node.js installieren

Bei Figma Context MCP registrieren und Schlüssel erstellen

Terminal öffnen

Diesen Befehl einfügen und Enter drücken

/mcp in Claude Code eingeben

Ausprobieren

Node.js installieren

Bei Figma Context MCP registrieren und Schlüssel erstellen

Mit diesem Button Cursor öffnen

Schlüssel eintragen

KI-Chat in Cursor im Agent-Modus öffnen

Ausprobieren

Node.js installieren

Bei Figma Context MCP registrieren und Schlüssel erstellen

Mit diesem Button VS Code öffnen

Schlüssel eintragen

KI-Chat in VS Code im Agent-Modus öffnen

Ausprobieren

Auf deinem Computer installiert

Werte, die du selbst einträgst

Auf einen Blick

Welche Apps ihn nutzen können

Was er kann

Basischecksi

Entwickler passt zum Repo

Wird noch gepflegt

Hat eine Lizenz

Endpunkt antwortet

Anmeldung mit OAuth

Keine versteckten Anweisungen in Tool-Beschreibungen

Diskussion

Nutzerbewertungen

Im Vergleich mit anderen in Design, Bilder & Audioi

Häufige Fragen

Alternativen

Next AI Draw.io

Pascal 3D Editor

screenpipe

README vom Entwickler

Demo

How it works

Getting Started

MacOS / Linux

Windows

Star History

Learn More