GeekyAnts hat ein auf React Fiber basierendes Plugin vorgestellt, mit dem Entwickler Live-React-Komponenten direkt in bearbeitbare Figma-Dateien importieren können – ein Versprechen für einen echten Roundtrip zwischen Code und Design. Das Tool bekämpft den wachsenden „Design-Code-Drift“, der Teams dazu zwingt, Arbeit zu wiederholen, sobald UI-Änderungen die Grenze zwischen Design und Entwicklung überschreiten.

Warum der herkömmliche DOM-zentrierte Ansatz zu kurz greift

Traditionelle Import-Tools lesen das gerenderte HTML Document Object Model (DOM) aus – die flache Liste von <div, <span und anderen Tags im Browser. Das DOM teilt einem Tool zwar mit, dass eine Schaltfläche existiert, kann aber nicht erkennen, dass diese Schaltfläche eine Instanz einer gemeinsamen Komponente in einem Designsystem ist. Exportiert man zehn Schaltflächen, erhält man zehn unabhängige Ebenen in Figma, die jeweils von der Master-Komponente entkoppelt sind. Designer müssen dann Varianten neu erstellen, Constraints erneut anwenden und im Wesentlichen das nachbauen, was der Code bereits weiß.

Dieser Verlust an Komponenten-Intelligenz führt zu Design-Schulden (Design Debt). Jedes Mal, wenn ein UI-Element im Code angepasst wird, muss die entsprechende Figma-Datei manuell aktualisiert werden, andernfalls driften die beiden Darstellungen auseinander. Diese Divergenz treibt die Wartungskosten in die Höhe.

React Fiber als das fehlende Bindeglied

React Fiber ist die interne Reconciliation-Engine, die Komponentennamen, Hierarchie und State über verschiedene Renderings hinweg verfolgt. Im Gegensatz zum DOM bewahrt Fiber die semantische Bedeutung jedes UI-Elements. Durch das Auslesen des Fiber-Trees anstelle der HTML-Ausgabe kann ein Tool eine <Button>-Komponente direkt einer Figma-Komponente zuordnen und so die Verbindung zum ursprünglichen Design Token aufrechterhalten.

Das Plugin von GeekyAnts nutzt diese Erkenntnis. Es liest React Fiber aus, um Live-Code in bearbeitbare Figma-Dateien zu bringen. Das Ergebnis ist ein Satz von Ebenen, die ihre ursprünglichen Varianten-Beziehungen beibehalten.

Wie die Pipeline funktioniert

Der Importprozess folgt drei deutlichen Phasen:

  • Variant Expander – Durchsucht den Komponentencode nach State-Definitionen (hover, disabled, active) und generiert einen vollständigen Satz an visuellen Varianten. Diese werden in Figma Component Sets gebündelt, sodass Designer Zustände umschalten können, ohne die Datei zu verlassen.
  • Layout Mapping – Übersetzt CSS-Flexbox-Regeln in Figma Auto Layout Constraints. Dies bewahrt das responsive Verhalten und ermöglicht es Designern, Abstände direkt im UI-Editor anzupassen.
  • State Triggering – Führt Code-Pfade aus, die Modals, Dropdowns oder andere dynamische UI-Elemente öffnen, um sicherzustellen, dass das Plugin jede mögliche Ansicht erfasst.

Zusammen erzeugen diese Phasen eine originalgetreue, bearbeitbare Replik der Live-UI, statt eines statischen Screenshots.

Das entstehende Ökosystem

GeekyAnts ist nicht allein in dem Versuch, den Design-Code-Kreislauf zu schließen:

  • Anima konzentriert sich auf die entgegengesetzte Richtung und konvertiert Figma-Designs in React- oder Vue-Code.
  • Locofy.ai bietet eine KI-gestützte Generierung von responsivem Code aus Design-Dateien.
  • Builder.io bietet einen HTML-zu-Figma-Import an, der jedoch weiterhin auf dem DOM basiert und somit dessen Einschränkungen übernimmt.
  • Codia AI konvertiert Web-Elemente in strukturierte Figma-Dateien.

Was den Fiber-basierten Ansatz unterscheidet, ist das Bewusstsein für die Semantik der Komponenten, das den DOM-zentrierten Tools fehlt.

Wer gewinnt, wer verliert

Ein automatisierter Ansatz, der Komponenten respektiert, reduziert Design-Schulden.

Worauf man als Nächstes achten sollte

Das Kernversprechen ist klar: Durch die Verlagerung des Import-Fokus vom DOM auf React Fiber bieten Tools wie das Plugin von GeekyAnts Designern eine Live-Ansicht der Produktions-UI, die komponentenbewusst ist. Dieser Wandel könnte die langjährige Lücke zwischen Design und Code endlich schließen und das, was früher ein kostspieliger, fehleranfälliger Hand-off war, in einen reibungslosen, bidirektionalen Workflow verwandeln.