Skip to main content
Möchtest du das nicht manuell einrichten? Füge einen Link zu dieser Seite in eine Devin-Sitzung ein und bitte Devin, alles für dich einzurichten.
1

Figma-MCP verbinden

Bevor Devin deine Designs lesen kann, verbinde den Figma MCP mit einem Konto, das auf die Dateien zugreifen kann, die du verwenden möchtest.
  1. Öffne in Devin Customize > MCPs, wähle Browse marketplace und suche Figma.
  2. Folge den Installationsanweisungen und öffne dann die Verbindungseinstellungen unter Customize > MCPs.
  3. Wähle Personal-Zugriff für einzelne Konten oder Organization-Zugriff, um eine Verbindung mit deiner Organisation zu teilen.
  4. Wähle Connect und autorisiere den Zugriff über den OAuth-Ablauf von Figma.
Verwende für Organization-Zugriff ein eigenes Figma-Konto mit Zugriff auf die Designdateien des Teams. Bei Personal-Zugriff verbindet jedes Mitglied sein eigenes Konto.
Sobald die Verbindung besteht, kann Devin verknüpfte Figma-Dateien lesen, auf die das verbundene Konto zugreifen kann – und direkt aus dem Design Komponentenhierarchien, Farben, Abstände, Typografie und Layout-Constraints extrahieren.
2

Teile einen Design-Link und gib Devin eine Anweisung

Füge die URL einer Figma-Datei zusammen mit dem, was du implementiert haben möchtest, in deinen Prompt ein. Sei konkret, welche Frames umgesetzt werden sollen und welche Teile deiner Codebase verwendet werden sollen.Was einen guten Figma-Prompt ausmacht:
  • Verlinke die konkrete Figma-Datei (nicht nur das Projekt)
  • Benenne den exakten Frame oder die Seite in der Datei – große Dateien können Dutzende Seiten enthalten
  • Verweise auf deine bestehende Komponentenbibliothek und dein CSS-Framework
  • Erwähne, wo deine Design Tokens liegen (z. B. tailwind.config.ts, src/tokens/)
  • Gib den Zieldateipfad für neue Komponenten an
Wenn du merkst, dass du denselben Kontext in mehreren Sessions wiederholst (z. B. “alle neuen Seiten kommen in src/app/” oder “wir verwenden Radix UI Primitives”), gib Devin dieses Feedback und es wird automatisch vorschlagen, es als Knowledge zu speichern – sodass du es beim nächsten Mal nicht wiederholen musst.
3

Devin extrahiert, baut und überprüft

Devin liest die Figma-Datei über das MCP, ordnet Designeigenschaften deiner Codebasis zu, implementiert die Komponenten und öffnet dann den Browser, um das Ergebnis visuell zu überprüfen.
  1. Liest die Figma-Datei – Ruft den Komponentenbaum, Design-Tokens (Farben wie #6366F1, Abstände wie 24px), Typografie (Inter, 18px/28px, 500 weight) und Auto-Layout-Eigenschaften aus dem angegebenen Frame ab
  2. Ordnet Tokens deinem System zu – Ordnet Figma-Farben den am besten passenden Tailwind-Tokens zu (z. B. #6366F1 → indigo-500) und verwendet deine Abstandsskala, anstatt Pixelwerte hart zu kodieren
  3. Baut die Komponenten – Erstellt React-Komponenten, die deinen bestehenden Mustern folgen, und verwendet gemeinsam genutzte Komponenten wie <Card> und <Button> wieder, wo das Design übereinstimmt
  4. Prüft es im Browser – Startet deinen Dev-Server, navigiert zu localhost:3000/pricing und vergleicht das Ergebnis visuell mit dem Figma-Design über mehrere Viewports hinweg
  5. Erfasst Screenshots und Bildschirmaufnahmen – Devin erstellt seitenfüllende Screenshots für Desktop-, Tablet- und Mobile-Breakpoints und nimmt eine Bildschirmaufnahme auf, in der durch die Seite gescrollt und mit Hover-Zuständen interagiert wird. Diese werden direkt in der Session geteilt, damit du das Ergebnis visuell überprüfen kannst – du musst den Branch nicht auschecken und selbst ausführen.
  6. Teilt Nachweise überall – Devin hängt die Screenshots und Aufnahmen an den PR (Pull Request) an, damit Reviewer das visuelle Ergebnis sehen können, ohne den Code auszuchecken. Wenn du Slack verbunden hast, kann Devin sie auch in einem Channel posten, sodass dein Designteam sie prüfen kann, ohne Slack zu verlassen.
  7. Öffnet einen PR – Reicht die Implementierung mit visuellen Nachweisen ein, die zusammen mit den Codeänderungen angehängt sind
4

Überprüfen Sie den Pull Request mit Devin Review

Sobald Devin den Pull Request (PR) eröffnet hat, verwende Devin Review, um die Implementierung zu überprüfen. Devin Review kann visuelle Abweichungen, fehlende responsive Breakpoints und Komponenten erkennen, die nicht deinem Designsystem entsprechen.Wenn etwas angepasst werden muss – der Abstand stimmt nicht, ein Hover-State fehlt, die Farben passen nicht – hinterlasse direkt einen Kommentar im PR und Devin kümmert sich darum. Du musst keine neue Session öffnen oder einen separaten Prompt verfassen.