Skip to main content
Glama
Sign In
deenesjakoruzh

Figma MCP Server

by GLips
npmGitHub
TypeScript
MIT License
14,596
6,386
  • Linux
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • Enables Windsurf (a Codeium product) to connect to Figma design data through the MCP server for AI-powered code generation.

  • Provides access to Figma design data via the Figma API, allowing AI-powered coding tools to retrieve file metadata, node information, and design elements for code generation.

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

This server cannot be installed

-
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.

Tools

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 Resources

        Related MCP Servers

        • Figma MCP Server

          TimHolden
          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
          106
          TypeScript
          • Apple

        • Talk to Figma MCP

          yhc984
          -
          security
          F
          license
          -
          quality
          Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
          Last updated -
          TypeScript

        • Figma MCP Server

          1yhy
          -
          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 -
          124
          6
          TypeScript
          MIT License
          • Linux
          • Apple

        • Figma MCP Server

          rlagudals95
          -
          security
          A
          license
          -
          quality
          Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
          Last updated -
          14,596
          TypeScript
          MIT License

        View all related MCP servers

        Appeared in Searches

        New MCP Servers

        ID: kcftotr525