Skip to main content
Glama

Figma MCP Server

MIT License
41,184
9,204
  • Linux
  • Apple

Geben Sie Cursor und anderen KI-gestützten Codierungstools mit diesem Model Context Protocol- Server Zugriff auf Ihre Figma-Dateien.

Wenn Cursor Zugriff auf die Figma-Designdaten hat, ist er bei der präzisen Erstellung von One-Shot-Designs weitaus besser als bei alternativen Ansätzen wie dem Einfügen von Screenshots.

Demo

Sehen Sie sich eine Demo zum Erstellen einer Benutzeroberfläche in Cursor mit Figma-Designdaten an

So funktioniert es

  1. Öffnen Sie den Chat Ihrer IDE (z. B. Agentenmodus im Cursor).
  2. Fügen Sie einen Link zu einer Figma-Datei, einem Figma-Frame oder einer Figma-Gruppe ein.
  3. Bitten Sie Cursor, etwas mit der Figma-Datei zu tun, z. B. das Design zu implementieren.
  4. Cursor ruft die relevanten Metadaten von Figma ab und verwendet sie zum Schreiben Ihres Codes.

Dieser MCP-Server ist speziell für die Verwendung mit Cursor konzipiert. Bevor er mit Kontext aus der Figma-API antwortet, vereinfacht und übersetzt er die Antwort, sodass dem Modell nur die relevantesten Layout- und Stilinformationen bereitgestellt werden.

Durch die Reduzierung der dem Modell bereitgestellten Kontextmenge wird die KI präziser und die Antworten relevanter.

Erste Schritte

Viele Code-Editoren und andere KI-Clients verwenden eine Konfigurationsdatei zur Verwaltung von MCP-Servern.

Der figma-developer-mcp Server kann konfiguriert werden, indem Sie Ihrer Konfigurationsdatei Folgendes hinzufügen.

HINWEIS: Sie müssen ein Figma-Zugriffstoken erstellen, um diesen Server nutzen zu können. Anweisungen zum Erstellen eines Figma-API-Zugriffstokens finden Sie hier .

MacOS / Linux

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

Windows

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

Oder Sie können FIGMA_API_KEY und PORT im env festlegen.

Wenn Sie weitere Informationen zum Konfigurieren des Framelink Figma MCP-Servers benötigen, lesen Sie die Framelink-Dokumente .

Sternengeschichte

Mehr erfahren

Der Framelink Figma MCP-Server ist einfach, aber leistungsstark. Holen Sie das Beste aus ihm heraus und erfahren Sie mehr auf der Framelink- Website.

Sponsoren

🥇 Gold-Sponsoren

🥈 Silber-Sponsoren

🥉 Bronze-Sponsoren

😻 Kleinere Unterstützer

-
security - not tested
A
license - permissive license
-
quality - not tested

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Ermöglicht Cursor den Zugriff auf Figma-Dateien über das Model Context Protocol und verbessert so seine Fähigkeit, Designdaten für die Codegenerierung genau zu interpretieren und zu nutzen.

  1. So funktioniert es
    1. Erste Schritte
      1. MacOS / Linux
      2. Windows
    2. Sternengeschichte
      1. Mehr erfahren
        1. Sponsoren
          1. 🥇 Gold-Sponsoren
          2. 🥈 Silber-Sponsoren
          3. 🥉 Bronze-Sponsoren
          4. 😻 Kleinere Unterstützer

        Related MCP Servers

        • A
          security
          F
          license
          A
          quality
          Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
          Last updated -
          2
          81
          130
          TypeScript
          • Apple
        • A
          security
          A
          license
          A
          quality
          An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
          Last updated -
          19
          4,887
          4,731
          JavaScript
          MIT License
          • Apple
          • Linux
        • -
          security
          A
          license
          -
          quality
          A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
          Last updated -
          16
          13
          TypeScript
          MIT License
          • Linux
          • Apple
        • A
          security
          F
          license
          A
          quality
          A tool that integrates Figma with Cursor through the Model Context Protocol, allowing users to retrieve, optimize, and convert design data from Figma files into structured CSS and design tokens.
          Last updated -
          1
          JavaScript

        View all related MCP servers

        MCP directory API

        We provide all the information about MCP servers via our MCP API.

        curl -X GET 'https://glama.ai/api/mcp/v1/servers/GLips/Figma-Context-MCP'

        If you have feedback or need assistance with the MCP directory API, please join our Discord server