Figma HTML to Design: Wenn der Code zur Single Source of Truth wird
Von: Jonas Mit dem Figma-Plugin »HTML to Design« können bestehende Code-Komponenten und Website-Elemente direkt in Figma importieren werden. Der Code wird somit zur Single Source of Truth.
Video
Was ist das Original?
Im klassischen Workflow zwischen Design und Entwicklung steht das Design am Anfang. UX/UI-Teams gestalten Oberflächen und Komponenten in Tools wie Figma, und anschließend wird das Ergebnis in Code übertragen – ob manuell durch Entwickler oder automatisiert durch KI. Änderungen werden zuerst im Design umgesetzt und danach im Code nachgezogen.
Dieses Vorgehen hat einen grundlegenden Nachteil: Was in Figma als einzelne Komponente existiert – etwa ein Button – wird in der Praxis in verschiedenen Umgebungen gerendert. Unterschiedliche Browser, verschiedene Zieltechnologien wie HTML und React, und diverse Rendering-Engines führen dazu, dass aus einem einzigen Design-Original eine multidimensionale Code-Darstellung entsteht. Die Single Source of Truth im Design wird durch die Vielfalt der Implementierungen aufgeweicht.
Code als Single Source of Truth
Die Alternative besteht darin, den Workflow umzudrehen. Statt im Design zu starten und den Code abzuleiten, wird der Code selbst zum Original. Änderungen finden direkt in der Code-Basis statt, und das Design-Tool – in diesem Fall Figma – dient als Darstellungsoberfläche, um mit den UI-Komponenten im Kontext von Prototypen und Iterationen arbeiten zu können.
Dieser Ansatz ist besonders dann sinnvoll, wenn bereits ein ausgereiftes Design-System als Code-Bibliothek vorliegt, beispielsweise in einem Storybook oder einer browserbasierten Komponentendokumentation. Statt die Bibliothek in Figma von Grund auf aufzubauen und anschließend an den Code zu übertragen, kommt man von der Code-Seite und importiert die Komponenten zurück in die visuelle Umgebung.
HTML to Design: Das Figma-Plugin für den Import
Das Figma-Plugin HTML to Design ermöglicht genau diesen Weg. Es ist im Design-Modus verfügbar (nicht im Dev Mode) und bietet in der kostenlosen Version etwa 10 Importe pro Monat. Es gibt zwei Hauptwege für den Import: Die direkte Eingabe einer URL, um eine komplette Seite zu importieren, oder die Nutzung einer Chrome-Extension, mit der gezielt einzelne Bereiche einer Live-Website ausgewählt und an Figma gesendet werden können.
Die Chrome-Extension funktioniert ähnlich wie die Browser-DevTools: Man wählt auf der gewünschten Website den gewünschten Bereich aus – etwa eine Navigationsleiste – und sendet ihn direkt an das Plugin in Figma. Dort stehen verschiedene Import-Optionen zur Verfügung, etwa ob Auto Layout verwendet werden soll oder wie mit Schriften umgegangen wird.
Was das Plugin erkennt und umsetzt
Beim Import interpretiert das Plugin die Code-Struktur intelligent. Flexbox-Layouts werden automatisch als Auto Layouts erkannt, Container-Strukturen und Verschachtelungen werden beibehalten. Das Ergebnis ist ein Figma-Frame, der die tatsächliche Code-Architektur widerspiegelt – mit korrekten Hierarchien, Abständen und Layout-Eigenschaften.
Falls verwendete Schriftarten lokal nicht verfügbar sind, bietet das Plugin einen automatischen Ersatz an, etwa durch Helvetica. So entsteht ein arbeitsfähiges Figma-Element, das als Ausgangspunkt für weitere Design-Arbeit, Prototypen oder Iterationen dienen kann.
