Zum Hauptinhalt springen
Erkennen Sie Design-Abweichungen, bevor sie ausgeliefert werden. Diese Automatisierung läuft bei jedem Pull Request (PR) mit UI-Änderungen: Sie erstellt Screenshots der aktualisierten Komponenten, ruft die entsprechenden Figma-Frames über das Figma MCP ab und postet ein Inline-Review direkt im PR mit konkreten Hinweisen zu Abständen, Farben, Typografie und Layout-Unterschieden.

Diese Vorlage verwenden

Öffnen Sie Figma Design Review on PR in Devin und erstellen Sie die Automatisierung mit der Standardkonfiguration. Sie können sie vor dem Speichern anpassen.
Sie suchen eine praxisnahe Anleitung? Im Schritt-für-Schritt-Tutorial für Figma Design Review on PR finden Sie eine vollständige Einführung.

​
Was diese Automatisierung macht

Design-Reviews gehören zu den am schwierigsten zu automatisierenden Aufgaben im Frontend-Engineering. Das Figma MCP gibt Devin programmatischen Zugriff auf die verbindlichen Designs — Tokens, Komponentenspezifikationen, Frame-Abmessungen —, sodass es eine gerenderte Komponente mit den tatsächlichen Vorgaben des Designers vergleichen und präzises Feedback zu Abweichungen geben kann.

​
Wie es funktioniert

Auslöser: GitHub-Ereignis — pull.request
  • Ereignis: github:pull_request
    • Bedingungen:
      • action eq opened
      • repository.full_name eq your-org/your-repo
Was Devin tut: Startet eine Sitzung mit vollständigem Ereigniskontext, führt den unten stehenden Prompt aus und benachrichtigt Sie optional im Fehlerfall.

​
Voraussetzungen

  • Integrationen:
  • MCP-Server:

​
Beispiel-Prompt

Diese Vorlage enthält diesen Prompt. Sie können ihn nach einem Klick auf Vorlage verwenden bearbeiten oder unverändert lassen.

​
Einrichtung

  1. Öffnen Sie in Devin Automations → Templates.
  2. Klicken Sie auf Figma Design Review on PR. Die Erstellungsseite öffnet sich mit dieser bereits ausgefüllten Vorlage.
  3. Verbinden Sie alle erforderlichen Integrationen und installieren Sie MCP-Server, falls Sie das noch nicht getan haben.
  4. Ersetzen Sie alle Platzhalterwerte in den Trigger-Bedingungen (zum Beispiel your-org/your-repo durch Ihr tatsächliches Repo).
  5. Prüfen Sie den Prompt und passen Sie ihn an die Sprache, Konventionen und Guardrails Ihres Teams an.
  6. Klicken Sie auf Create automation.
Die meisten Automatisierungsvorlagen enthalten empfohlene ACU- und Aufruflimits, um die Kosten während der frühen Einführungsphase zu begrenzen. Behalten Sie diese zunächst unverändert bei, bis Sie vom Verhalten der Automatisierung überzeugt sind, und erhöhen Sie sie dann entsprechend Ihrer Auslastung.

​
Wann Sie diese Vorlage verwenden sollten

  • Für Teams mit starkem Fokus auf Designsysteme, bei denen visuelle Präzision wichtig ist
  • Für große Frontend-Codebases mit vielen Mitwirkenden und unterschiedlich ausgeprägtem Designverständnis
  • Zur Verringerung von Engpässen bei Design-Reviews (anstatt darauf zu warten, dass ein Designer jede Pull Request (PR) prüft)
  • Zur Sicherstellung visueller Konsistenz über das gesamte Produkt hinweg

​
Ideen zur Anpassung

  • Auf bestimmte Repos, Verzeichnisse oder Dateimuster beschränken
  • Design-Token-Toleranzen konfigurieren (pixelgenau vs. „nah genug“)
  • Zu jeder PR-Vorlage eine erforderliche Figma-Datei-ID hinzufügen
  • Mit einer Lint-Regel für das Designsystem kombinieren, um Merges bei größeren Abweichungen zu blockieren

​
Siehe auch