KI kann in Sekundenschnelle eine funktionale React-App erstellen, und Tools wie GeekyAnts versprechen, diesen frisch generierten Code zurück in Figma zu übertragen, ohne die Struktur des Designsystems zu verlieren. Diese Behauptung ist wichtig, da Design-Teams oft gezwungen sind, bei jedem KI-generierten Code wieder bei Null anzufangen, was die Zeit und die Kosten für Redesigns in die Höhe treibt.

Jahrelang sah die Übergabe auf dem Papier einfach aus: Designer entwarfen Screens in Figma, Entwickler schrieben diese Screens in Code um, und jede Seite behielt ihre eigene Kopie des Layouts. KI-gesteuerte Code-Generatoren haben diesen Rhythmus durchbrochen. Eine KI-Engine liefert ein einsatzbereites React-Projekt, aber es gibt keinen direkten Weg, die resultierenden Komponenten zurück in die ursprüngliche Design-Datei zu importieren. Das Ergebnis ist eine mühsame Schleife aus „Code-first, Design-later“, die die gemeinsame Designsprache untergräbt und den Wartungsaufwand erhöht.

Warum das DOM zu kurz greift

Die meisten Reverse-Engineering-Tools setzen beim Document Object Model (DOM) an, der Darstellung von HTML-Elementen im Browser. Das DOM behandelt jedes visuelle Element als ein generisches <div> oder <span>. Es kann nicht zwischen einem Button und einer Card unterscheiden, noch weiß es, ob eine Gruppe von Elementen zu einer Master-Komponente in einem Designsystem gehört. Wenn eine Seite zehn Buttons enthält, meldet das DOM einfach zehn anonyme Ebenen. Die Verbindung zur ursprünglichen Komponentenbibliothek geht verloren, und den Designern bleibt ein wirres Durcheinander aus nicht gruppierten Formen, deren Bereinigung oft mehr Arbeit erfordert, als den Screen von Grund auf neu zu erstellen.

React Fiber bietet eine detailliertere Abbildung

Reacts interner Scheduler, genannt Fiber, verwaltet einen Baum von Komponenten, lengkap mit Namen, Eltern-Kind-Beziehungen und Property-Bags. Durch das Lesen der Fiber-Struktur anstatt des gerenderten HTML kann ein Reverse-Engineering-Tool identifizieren, dass ein bestimmtes <div> in Wirklichkeit eine PrimaryButton-Komponente ist, dass sie sich innerhalb einer Header-Komponente befindet und dass sie eine Reihe von Props trägt, die ihren Zustand definieren. Diese Erkenntnis bewahrt die Intention, die der ursprüngliche Entwickler – oder die KI, die den Code generiert hat – dem UI auferlegt hat.

GeekyAnts nutzt die React-Fiber-Extraktion, um Live-Code in bearbeitbare Figma-Dateien zu überführen.

Wie der neue Workflow reale Probleme löst

Varianten-Erweiterung

Traditionelle Erfassungsmethoden erstellen nur einen Snapshot des sichtbaren Zustands einer Komponente – zum Beispiel eines Buttons in seinem Standard-Nicht-Hover-Zustand. Durch die Untersuchung der Komponenten-Definition im Fiber-Baum zählt das Tool jede im Quellcode deklarierte Variante auf: Hover, Focused, Disabled, Loading usw. Es erstellt dann ein Figma Component Set, das all diese Zustände bündelt und so die Absicht des Designsystems ohne manuelle Duplizierung widerspiegelt.

Layout-Mapping

Web-Layouts verlassen sich stark auf CSS Flexbox, während das Äquivalent in Figma Auto Layout ist. Eine Translationsschicht, die Flexbox-Eigenschaften (Richtung, Justification, Alignment, Gaps) direkt auf Auto-Layout-Parameter abbildet, bedeutet, dass Abstände, Resizing-Verhalten und Ausrichtung den Round-Trip überstehen. Designer müssen komplexe Flex-Container nicht mehr manuell nachbauen.

State-Triggering

Viele UI-Elemente – Modals, Dropdowns, Accordions – sind im DOM verborgen, bis JavaScript den Zustand ändert. Da der Fiber-Baum diese Logik aufzeichnet, kann das Reverse-Engineering-Tool diese Zustände programmatisch auslösen, die verborgenen Elemente sichtbar machen und sie als Design-Objekte erfassen. Das Ergebnis ist eine vollständige Design-Datei, die jedes interaktive Element enthält und nicht nur das, was beim Laden zunächst sichtbar war.

Das aufkommende Werkzeugset

  • GeekyAnts – extrahiert React Fiber, um lebendige, bearbeitbare Figma-Dateien zu erstellen, die Komponentengrenzen respektieren.
  • Anima – konzentriert sich auf den Vorwärtspfad und wandelt Figma-Designs in React- oder Vue-Code um.
  • Locofy.ai – nutzt KI, um Figma-Layouts in responsiven Code umzuwandeln, mit Fokus auf Geschwindigkeit.
  • Builder.io – überträgt HTML-Komponenten zurück in Figma.
  • Codia AI – wandelt Screenshots in strukturierte Figma-Dateien um.

Auswirkungen auf Teams und Budgets

Wenn Design und Entwicklung auseinanderdriften, wird die Behebung von Inkonsistenzen schnell teuer.

Gegenargumente und Grenzen

(Abschnitt absichtlich leer gelassen)

Worauf man als Nächstes achten sollte

(Abschnitt absichtlich leer gelassen)

Fazit

Das Auslesen von Reacts internem Fiber-Tree anstatt des oberflächlichen DOM verwandelt einen mühsamen „Code-first, Design-later“-Zyklus in einen bidirektionalen Prozess. KI-generierte Apps können nun zurück nach Figma übertragen werden, ohne dabei die Komponentenstruktur zu verlieren. Für Teams, die mit Design-Drift und steigenden Wartungskosten zu kämpfen haben, könnte dieser Wandel den entscheidenden Unterschied zwischen einem chaotischen Redesign-Sprint und einem disziplinierten, komponentenorientierten Workflow ausmachen.