Skip to main content

Von Figma zu pixelgenauem Code

Verbinde das Figma-MCP und lass Devin Design-Tokens extrahieren, Komponenten aufbauen und das Ergebnis visuell mit deinen Mockups abgleichen.
AuthorCognition
CategoryFeature-Entwicklung
FeaturesMCP
1

Figma-MCP verbinden

Bevor Devin deine Designs lesen kann, benötigt es Zugriff auf deine Figma-Dateien über den Figma MCP. Sobald die Verbindung hergestellt ist, steht der MCP allen in deiner Organisation zur Verfügung – jedes Teammitglied kann Figma-Dateien in seinen Devin-Sitzungen verknüpfen.
  1. Klicke in Figma auf dein Profilbild > Settings > Security
  2. Klicke unter Personal access tokens auf Generate new token
  3. Gewähre ihm mindestens read-Berechtigungen für File content und Dev resources
  4. Kopiere den Token
  5. Gehe in Devin zu Settings > MCP Marketplace, suche Figma und klicke auf Enable
  6. Füge deinen Token ein, wenn du dazu aufgefordert wirst
Erwäge, ein eigenes Figma-Konto für Devin zu erstellen (z. B. devin@yourcompany.com) mit Betrachterzugriff auf deine Designdateien. So vermeidest du, den MCP an ein persönliches Konto zu binden, und kannst den Zugriff leicht verwalten, während dein Team wächst.
Sobald die Verbindung besteht, kann Devin jede Figma-Datei lesen, die du verknüpfst – 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
feat: Implement pricing page from Figma design

New files:
  src/app/pricing/page.tsx              (pricing page route)
  src/components/pricing/TierCard.tsx   (individual pricing card)
  src/components/pricing/CompareTable.tsx (feature comparison)

Updated:
  tailwind.config.ts                    (added 2 missing color tokens)

Verified at: 1440px, 768px, 375px viewports
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.