Verbinden Sie den Figma MCP-Server mit

  • Freigeben Version: Zurich
  • Aktualisiert 13. März 2026
  • 6 Minuten Lesedauer

    • Verbinden Sie den Figma MCP-Server mit Um die Konvertierung von Figma-Designs in Anwendungen der Enterprise-Klasse auf zu beschleunigen ServiceNow AI Platform.

    Vorbereitungen

    Erforderliche Rolle: Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Verbindung des Figma MCP-Servers (Modellkontextprotokoll) mit wird hergestellt Aktiviert Dient zum Zugreifen auf Designdaten aus Figma-Dateien. Diese Verbindung hilft bei Verstehen Sie das Design und seine Absicht, damit es Anwendungen erstellen kann, die dem Design entsprechen.

    Besuchen Sie das Figma-Entwicklerportal, um den Figma-MCP-Server mit zu verbinden . Erstellen Sie eine OAuth-App, um Ihre Client-ID und das geheime Clientgeheimnis abzurufen. Konfigurieren Sie dann ServiceNow IDEDient zur Verarbeitung des OAuth-Prozesses mit den Anmeldeinformationen.

    Prozedur

    1. Konfigurieren Sie eine OAuth-App in Abbildung
    2. Konfigurieren Sie den OAuth-Anbieter in ServiceNow IDE
    3. Verbinden Sie den Figma MCP-Server mit
      Abbildung : 1. Anwendungsgenerierungs-Workflow mit Figma und Build-Agent
      Ein Prozess-Flow-Diagramm, das die Integration von Figma über die OAuth-Authentifizierung zeigt, eine Verbindung zum Figma MCP-Server und dann zum Build-Agent herstellt und schließlich zur Anwendungsgenerierung führt

    Konfigurieren Sie eine OAuth-App in Abbildung

    Erstellen Sie eine OAuth-Anwendung in Figma, damit der Figma MCP-Server Anwender über OAuth authentifizieren und gewähren kann Zugriff auf Figma-Designs.

    Vorbereitungen

    Sie müssen über einen Entwicklungs- oder Vollplatz für einen Figma Pro-, Organisations- oder Unternehmensplan verfügen.

    Erforderliche Rolle: Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Der Figma MCP-Server (Modellkontextprotokoll) verwendet OAuth für die Authentifizierung und macht die Figma-Designdaten für zugänglich Installiert. Dient zum Verbinden des Figma MCP-Servers mit , Sie müssen eine OAuth-App in Abbildung erstellen. Dieser Prozess generiert eine Client-ID und ein geheimes Clientgeheimnis. ServiceNowVerwendet diese Anmeldeinformationen, um den OAuth-Prozess zu initiieren und Anwender mit ihren Figma-Accounts zu authentifizieren.

    Prozedur

    Schritt 1: Erstellen Sie eine OAuth-Anwendung in Figma, um die Client-ID und das geheime Clientgeheimnis abzurufen.
    1. Wechseln Sie zu Figma-Entwicklerseite .
    2. Wählen Sie Aus Erstellen Sie eine neue App .
    3. Geben Sie die folgenden Informationen in das Formular ein.
      FeldBeschreibung
      Name Name für Ihre Anwendung, z. B. ServiceNow-Integration.
      Wählen Sie einen Besitzer für Ihre App aus

      Team oder Organisation, das bzw. die die App besitzen muss.

      Wichtig:
      Der von Ihnen eingegebene Wert kann nicht geändert werden.
    4. Wählen Sie Aus Erstellen Sie eine App .
      Eine Client-ID und ein geheimer Clientschlüssel werden generiert.
    5. Speichern Sie die Client-ID und das geheime Clientgeheimnis sicher, da Sie sie für das OAuth-Setup in benötigen ServiceNow IDE.
      Wichtig:

      Sie können das geheime Clientgeheimnis nach dem Schließen dieses Fensters nicht mehr sehen.

    6. Wählen Sie Fertig.
    Schritt 2: Konfigurieren und veröffentlichen Sie die OAuth-App in Abbildung.
    1. Öffnen Sie die von Ihnen erstellte Anwendung.
    2. Wahlweise: In Allgemein Laden Sie ein Logo für Ihre App hoch, und geben Sie eine kurze Beschreibung an.
    3. In OAuth-Anmeldeinformationen Registerkarte, in Umleitungs-URLs Fügen Sie die folgende URL hinzu: https://<instance name>.service-now.com/oauth_redirect.do . Und ersetzen Sie dann <instance name> Mit ist-Wert ServiceNowInstanzname.
      Der OAuth-Flow funktioniert nur in ServiceNowInstanzen, die in der Liste der Umleitungs-URLs enthalten sind. Stellen Sie sicher, dass Sie dieser Liste alle Instanzen hinzufügen, in denen der OAuth-Flow funktionieren soll.

      Sie können jederzeit eine Umleitungs-URL hinzufügen.

    4. Wählen Sie auf der Registerkarte OAuth-Umfänge im Abschnitt MCP die Option aus mcp:Connect Kontrollkästchen.
      Wichtig:
      Wenn der MCP-Abschnitt nicht sichtbar ist, wenden Sie sich an Ihren ServiceNowAccount-Manager oder ServiceNowSupport ( Wenden Sie sich an den ServiceNow-Support ) Zum Aktivieren des MCP-Verbindungsbereichs. Stellen Sie sicher, dass Sie Ihre Client-ID für sie freigeben, damit sie die MCP-Funktion aktivieren können.
    5. In Veröffentlichen Registerkarte, stellen Sie sicher, dass Privat Kontrollkästchen ist aktiviert, und wählen Sie dann aus Veröffentlichen .

    Konfigurieren Sie den OAuth-Anbieter in ServiceNow IDE

    Richten Sie eine OAuth-Anwendungsregistrierung und -Anmeldeinformationen ein, um zu aktivieren ServiceNow IDEUm eine Verbindung mit Ihrer Figma herzustellen.

    Vorbereitungen

    Erforderliche Rolle: Administrator

    Prozedur

    Schritt 1: Erstellen Sie einen Anwendungsregistrierungsdatensatz.
    1. Navigieren Sie in Ihrer ServiceNow-Instanz zu System-OAuth > Applikationsregistrierung.
    2. Wählen Sie Neu.
    3. Wählen Sie auf der Interceptor-Seite aus Stellen Sie eine Verbindung zu einem externen OAuth-Anbieter her .
    4. Füllen Sie das Formular mit den folgenden Details aus.
      FeldBeschreibung
      Name Ein eindeutiger Name, z. B. Figma-OAuth-Anbieter.
      Client-ID Client-ID, die Sie aus der Figma-App erhalten haben.
      Geheimer Clientschlüssel Geheimer Clientschlüssel, den Sie aus der Figma-App erhalten haben.
      Standardgewährungstyp Wählen Sie Aus Autorisierungscode Aus der Dropdown-Liste.
      Autorisierungs-URL https://www.figma.com/oauth.
      Token-URL https://api.figma.com/v1/oauth/token.
      Umleitungs-URL Die Umleitungs-URL, die Sie in der Figma-App hinzugefügt haben.
      Anmeldeinformationen senden Wählen Sie Aus Als Header Für Standardautorisierung .
    5. Wählen Sie Absenden.
    Schritt 2: Definieren Sie den OAuth-Bereich.
    1. Scrollen Sie im gespeicherten Anwendungsregistrierungsdatensatz nach unten zu den zugehörigen Listen.
    2. Wählen Sie aus OAuth-Entitätsbereiche Registerkarte.
    3. Doppelklicken (oder Tastenkombination verwenden) Fügen Sie eine neue Zeile ein Zum Hinzufügen einer neuen Zeile.
    4. Geben Sie in der neuen Zeile die folgenden Werte ein.
      FeldBeschreibung
      Name Ein Name, z. B. Figma MCP Connect.
      OAuth-Anwendungsbereich Exakter Bereichsname, den Sie in Abbildung (mcp:Connect) definiert haben.
    5. Wählen Sie Aktualisieren.

      Auf der Konfigurationsregisterkarte für OAuth-Entitätsbereiche werden die Felder „Name“ und „OAuth-Bereich“, ein Beispiel „Figma MCP Connect: mcp:Connect“ und Optionen zum Hinzufügen, Aktualisieren oder Löschen von Bereichen angezeigt.
    Schritt 3: Konfigurieren Sie das OAuth-Entitätsprofil.
    1. Wählen Sie im selben Anwendungsregistrierungsdatensatz aus OAuth-Entitätsprofile Registerkarte.

      Auf der Registerkarte „OAuth-Entitätsprofile“ werden vorhandene Profile wie „Figma OAuth-Anbieter“ mit dem Gewährungstyp „Autorisierungscode“ sowie Optionen zum Aktualisieren, Löschen oder Hinzufügen von Profilen angezeigt.
      Sie sehen ein automatisch erstelltes Standardprofil.
    2. Wählen Sie den Profilnamen aus, um den Datensatz zu öffnen.
    3. Benennen Sie das Standardprofil in um Figma_Profile .
    4. Im Datensatz „OAuth-Entitätsprofil“ unter Bereiche des OAuth-Entitätsprofils Zugehörige Liste, doppelklicken (oder Tastenkombination verwenden) Fügen Sie eine neue Zeile ein .
    5. Suchen Sie nach Figma MCP-Verbindung Und wählen Sie es aus.

      Auf der Konfigurationsseite für das Figma-OAuth-Anbieterprofil stellt der OAuth-Entitätsbereich „Figma“ eine Verbindung mit dem „Figma-OAuth-Anbieter default_Profile“ über den Gewährungstyp „Autorisierungscode“ her.
    6. Wählen Sie Speichern.
      Sie werden zurück zum Profildatensatz weitergeleitet.
    7. Wählen Sie Aus Aktualisieren Zum Speichern des Profils.
      Das Standardprofil ist mit dem MCP-Bereich verbunden.

    Verbinden Sie den Figma MCP-Server mit

    Verbinden Sie den Figma MCP-Server (Modellkontextprotokoll) mit Um die Figma-Designs für die Anwendungserstellung zugänglich zu machen.

    Vorbereitungen

    Erforderliche Rolle: Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Wenn die OAuth-Verbindung zwischen eingerichtet ist ServiceNowInstanz und Abbildung können Sie jetzt verknüpfen An Ihren Figma-Account, um mit der Verwendung des Figma MCP-Servers zu beginnen. Die Innerhalb von ServiceNow IDEErmöglicht Ihnen das automatische Erstellen und Aktualisieren ServiceNowAnwendungen.

    Prozedur

    1. Stellen Sie sicher, dass die OAuth-App in Figma konfiguriert ist und dass Sie die Anwendungsregistrierung erstellt haben.
      Tipp:
      Auf ServiceNow IDE, Wechseln Sie zu Alle > System-OAuth > Applikationsregistrierung Um zu überprüfen, ob die OAuth-App in Figma erstellt und konfiguriert wird.

      Konfigurationsschritte finden Sie unter Konfigurieren Sie eine OAuth-App in AbbildungUnd Konfigurieren Sie den OAuth-Anbieter in ServiceNow IDE.

    2. Aktivieren Sie den Figma MCP-Server auf ServiceNow IDE:
      1. Ein ServiceNow IDE, Wählen Sie das Zahnradsymbol aus ZahnradsymbolIn der unteren linken Ecke, und wählen Sie dann aus Einstellungen .
      2. Suchen Sie nach .
        Alle Einstellungen werden aufgelistet.
      3. Aktivieren Sie den Figma MCP-Server, indem Sie auswählen Build-Agent: Aktivieren Sie MCP-Server Kontrollkästchen.
    3. Öffnen Sie Chatbereich.
    4. Suchen Sie das MCP-Symbol MCP-SymbolOben rechts im Chatbereich, und wählen Sie ihn aus, um die MCP-Serverseite zu öffnen.
    5. Wählen Sie Aus Verbinden Um den konfigurierten OAuth-Authentifizierungs-Flow auszulösen.
      Sie werden aufgefordert, sich bei Figma anzumelden und zu autorisieren ServiceNowAnwendung.
    6. Nachdem Sie genehmigt haben ServiceNowVerbindungsanforderung, kehren Sie zurück zu Chatbereich.
      Der Status des Figma MCP-Servers ist grün, was angibt, dass er mit Figma verbunden ist und alle verfügbaren Tools aufgelistet sind. Das generierte Token wird in der IDE-Git-Anmeldeinformationstabelle auf gespeichert ServiceNow IDE.

    Ergebnisse

    Sie können jetzt mit dem Figma MCP-Server in natürlicher Sprache über interagieren .

    Sie können beispielsweise Prompts wie „UI-Seite erstellen und <figma link> erstellen“ verwenden. Die Ruft den Designkontext aus Abbildung ab und erstellt eine Anwendung, die dem Design entspricht.

    Wichtig:
    Das Ausmaß, in dem die Anwendung am ursprünglichen Design ausgerichtet ist, wird stark von der Komplexität und der Gesamtstruktur des Designs beeinflusst. Wenn das Design einfach und unkompliziert ist, spiegelt die Anwendung das beabsichtigte Design in der Regel genau wider. Wenn das Design hingegen kompliziert oder vielschichtig ist, kann die Anwendung erheblich vom ursprünglichen Design abweichen.

    Informationen zum besseren Organisieren Ihrer Figma-Dateien finden Sie unter Strukturieren Sie Ihre Figma-Datei, um die Codierung zu verbessern Und Schreiben Sie effektive Prompts, um die KI zu leiten .

    Tabelle : 1. Problembehandlung: Probleme
    Vorfall Beschreibung Lösung
    Fehler bei nicht autorisiertem Zugriff Der MCP-Server ist manchmal inaktiv, und es kann zu einem Fehler bei nicht autorisiertem Zugriff kommen. Das Problem tritt auf, wenn Figma das Token ablehnt, das nach Abschluss des OAuth-Flows erstellt wurde.
    Führen Sie die folgenden Schritte aus, um das Problem zu beheben:
    1. Navigieren Sie zu Ide-Git-Anmeldeinformationen Tabelle in ServiceNow IDEUnd suchen Sie das relevante Token. Wechseln Sie in der Spalte aktiv den Wert von Wahr Bis Falsch Für dieses Token.
    2. Kehren Sie zurück zu Chatbereich.
    3. Suchen Sie das MCP-Symbol MCP-SymbolOben rechts im Chatbereich, und wählen Sie ihn aus, um die MCP-Serverseite zu öffnen.
    4. Wählen Sie Aus Verbinden Zum Auslösen des OAuth-Authentifizierungs-Flows.