Figma HTML to Design: Wenn der Code zur Single Source of Truth wird
Von: Jonas In diesem Video zeigen wir euch, wie der Workflow zwischen Design und Development umgedreht werden kann – indem nicht mehr das Design, sondern der Code als »Single Source of Truth« dient. Wir erklären, warum das klassische Vorgehen (erst Design, dann Code) bei mehreren Zieltechnologien und Rendering-Umgebungen zu Inkonsistenzen führen kann. Anschließend demonstrieren wir mit dem Figma-Plugin »HTML to Design«, wie bestehende Code-Komponenten und Website-Elemente direkt in Figma importiert werden können – inklusive der Nutzung der zugehörigen Chrome-Extension, um gezielt Bereiche einer Live-Website auszuwählen und als Figma-Frames zu übernehmen.
Video
Das Problem: Wo liegt 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.
Der umgekehrte Ansatz: 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.
Transkript
Wenn wir uns den Workflow zwischen Design und Development anschauen, dann stellt sich die Frage, wo ist eigentlich das Original? Also ist das Original unsere Design Datei oder ist das Original im Code? Ich möchte euch aber zeigen, welche Herangehensweisen es da gibt und es hat jetzt nicht direkt mit dem LEV Mod zu tun, sondern.
Aber es ist eine wichtige Entscheidung, die man sich stellen muss, was den gesamten Workflow angeht. Und da gibt es eben durchaus ein bisschen Bewegung in dem Thema und deswegen fasst das für mich jetzt hier einfach in diesen ganzen Themenkomplex Design und Development halt noch sehr gut mit rein, obwohl es jetzt eben nicht direkt ein Dev mod Thema ist. Okay schauen wir uns an, was ich hier vorbereitet habe und zwar eine kleine ficture Datei um das Ganze zu visualisieren und.
Und üblicherweise sieht es so aus, dass wir im Design starten. Das war schon vor 20 Jahren so, mit Photoshop und Illustrator und so weiter und es ist heute mit modernen Design Tools größtenteils eben auch noch so, das heißt, am Anfang steht das Design UX UI Design Teams konzipieren und entwickeln die Oberflächen und bauen Komponenten, das machen wir in Figma ja ganz genauso und anschließend wird das über den Dev Mode.
Auf den Code übertragen, das kann jetzt Agentisch mit KI passieren, das kann sozusagen menschlich durch Development Teams passieren, aber der Code steht sozusagen an zweiter Stelle. Wenn es jetzt also Änderungen gibt an einer Komponente, dann wird diese Änderung erst im Design umgesetzt und anschließend wird sie im Code nachgezogen. Das Problem an diesem Workflow ist ganz einfach, dass es im Design, sage ich mal eine Version gibt, also einen Button, der in Figma gestaltet ist und.
Und den kann ich jetzt sehr, sehr gut umsetzen. Aber ich habe natürlich am Ende verschiedene rendering Situationen, also beispielsweise jetzt bei einem klassischen Button in einer Website hätte ich nicht ein Endergebnis, sondern eben verschiedene, also beispielsweise Browser 2 und Browser 3 noch dazu. Das könnte passieren, das heißt das was es in Figman nur einmal gibt, wird am Ende in verschiedenen Umgebungen ausgeführt.
Das ist ein Problem, was diesen Workflow angeht. Und möglicherweise gibt es das nicht nur für eine Zieltechnologie, sondern möglicherweise dann sogar auch noch für mehrere, so dass ich solche Situationen hier bekomme, wo ich nämlich sage, es gibt ein Design und am Ende gibt es das aber sozusagen einmal in HTML.
So mit Browser, 123 und zusätzlich dann vielleicht noch als React und natürlich auch wieder verschiedene Interpretationen und so weiter das heißt, das Ganze ist sehr multidimensional in der Code Darstellung und im Design habe ich sozusagen nur das eine Original. Deswegen stellt sich da zunehmend die Frage, ob es nicht sinnvoller ist, dass das Original, also die sogenannte Single Source of Truth, dass diese im Code liegt. Das heißt, ich hätte eine Code Datei und würde dann.
Wenn ich das im Design Tool brauche, das einfach nur importieren. Änderungen würden also auch in meinem Code gemacht und das Design Tool ist dann nur noch die Darstellungsoberfläche um mit dieser Ui Komponente im Kontext von Prototypen und so weiter arbeiten zu können. Der Workflow wird dann also eigentlich umgedreht, das heißt es sieht dann so aus, ich lösche das hier alles weg und mein Workflow setzt den Code an den Anfang und hier zwischen findet dann eben ein Nebenport statt.
Ich möchte euch zeigen, wie das ganze Figma funktioniert. Da gibt es ein sehr populäres Plugin, das heißt HTML 2 Design und ich habe jetzt hier unsere Beispiel Dateien noch einmal aufgerufen und importiere das jetzt hier einfach mit in diesen ersten Screen mit rein und hier unten ist das Plugin ganz wichtig, das ist eben kein Dev Mode relevantes Thema, sondern ich bin im Design Mode und hier gibt es dieses HTML 2 Design Plugin und ich rufe das mal eben auf, wir befinden uns jetzt hier in der kostenlosen Version und.
Und in der kostenlosen Version habe ich die Möglichkeit. Ich glaube bis zu 10 Importe pro Monat kostenlos durchzuführen. Da gibt es jetzt verschiedene Möglichkeiten. Ich kann eine ganze URL importieren oder ich kann eben auch über eine Browser extension gehen und kann mir dann einzelne Bereiche einer Website importieren, das möchte ich jetzt zeigen, weil ich das gerade ein bisschen interessanter finde, also hier über diese Browser Extension für Chrome.
Die könnte ich installieren und anschließend in meinem Browser die gewünschte Website aufrufen und das mache ich jetzt auch mal eben kurz. Gehe hier auf die Figma Website und habe hier oben in Chrome dann dieses Plugin auch schon integriert, das rufe ich auf.
Und dann kann ich hier wieder einstellen, für welche viewport Größen und so weiter möchte ich das Ganze denn später importieren und das ist mir jetzt gerade gar nicht so super wichtig, denn ich möchte hier unten gleich einen Ausschnitt der Seite importieren, das ist also das was ich wähle und ich habe hier eingestellt, dass das direkt an das Pigma Plugin gesendet werden soll. Alternativ könnte ich auch eine Datei runterladen, die ich dann mehrfach importieren kann, so, das heißt ich werde.
Capture Selection, also eine Auswahl, muss jetzt ja gewählt werden auf der Seite und ihr seht, ich kann jetzt hier bestimmte Bereiche wählen, so ähnlich wie die Dev Tools in Chrome beispielsweise und dann werde ich mal diese gesamte Navigationsleiste hier oben aus. Wenn ich das jetzt mache, dann wird das über die Browser Extension anders Plugin gesendet. Wenn ich jetzt zurück gehe in **** macht, dann sehe ich, dass das hier eben in dem Abschnitt Extension in diesem Plugin aufgetaucht ist und da kann ich das jetzt importieren.
Da werde ich jetzt gefragt, wie das importiert werden soll. Also ich könnte das auf bestehende Variablen Meppen oder ich könnte eben Auto Layout verwenden oder eben nicht verwenden und so weiter je nachdem was ich importiere werde ich auch gefragt wie Mitschriften umgegangen werden soll. Ist so ein bisschen abhängig davon, was jetzt gerade importiert wird und ich belasse das jetzt hier einfach mal beim Standard, Ich denke für den Prozess ist das soweit völlig ausreichend und dann wird diese Code Komponente.
Mit ihren Layout Optionen eben interpretiert und importiert. Das heißt, wenn im Code eine Flexbox war, dann erkennt, dass dieses Plugin und sagt, Hey, diese Flexbox, das wird doch wahrscheinlich mein Auto Layout und solche Sachen hier sehe ich jetzt, dass die Schriftart die Figma verwendet bei mir nicht vorhanden ist. Das wird jetzt ersetzt durch Helvetica und dann bestätige ich das und bekomme dann im Ergebnis hier eine eine Section und auf dieser Section ist ein Frame und dem ziehe ich mir mal darunter.
Und dann habe ich eben hier diese wunderbare Komponente und wir sehen auch, dass sie eben hier in der Mitte diesen Container beispielsweise benutzt und dann da drin eben die Navigationspunkte und so weiter es ist also sehr, sehr ähnlich aufgebaut, wie das im Ja im Web in der gecordeten Version eben auch der Fall ist. Und ja, von dieser Richtung kann ich natürlich auch kommen. Das heißt, wenn ihr beispielsweise ein Designsystem.
In einem Story Book oder irgendwo in einer Code Dokumentation, die im Browser aufrufbar ist schon vorliegen habt. Dann ist ein denkbarer Weg gar nicht die Bibliothek in Figma aufzubauen und dann an den Code zu übertragen, sondern von der Code Seite zu kommen und das Ganze zurück in die visuelle Umgebung zu importieren um da dann Prototypen beispielsweise erstellen zu können oder auch Iterationen und kleine Updates und so weiter dann direkt hier im Design Tool vornehmen zu können.
