UnHTML vs. Elemente aus Chrome DevTools nach Figma kopieren

Nein, Chrome DevTools kann ein Element nicht direkt nach Figma kopieren. Jede dokumentierte Kopieroption erzeugt Text: eine CSS-Deklaration, eine Regel oder dieselben Werte in JavaScript-Syntax. Für bearbeitbare Ebenen brauchst du entweder Figmas eigene Chrome-Erweiterung oder einen Datei-Import. Dieser Artikel vergleicht die drei Wege, damit du nach Eingabe, Tarif und Aufgabe wählen kannst.

Was die DevTools-Kopie dir liefert

Das Styles-Panel in Chrome DevTools hat ein Rechtsklick-Menü für jede CSS-Eigenschaft. Laut der CSS-Referenz von DevTools gibt es diese Optionen:

• Copy declaration: die Eigenschaft und ihr Wert in CSS-Syntax.
• Copy property: nur der Name der Eigenschaft.
• Copy value: nur der Wert.
• Copy rule: die gesamte Regel samt Selektor.
• Copy all declarations: alle Eigenschaften und Werte der Regel.
• Copy declaration as JS und Copy all declarations as JS: derselbe Inhalt in JavaScript-Syntax, was die Referenz als praktisch für CSS-in-JS-Bibliotheken bezeichnet.
• Copy all CSS changes: die Änderungen, die du im Styles-Tab vorgenommen hast, Teil der experimentellen Einstellung "Sync CSS changes in the Styles tab".

Berechnete Styles

Der Computed-Tab zeigt das CSS, das tatsächlich auf ein Element angewendet wird, sodass du überschriebene Deklarationen ignorieren kannst. Mit Show All werden auch vererbte Eigenschaften angezeigt. Die Referenz beschreibt keine Kopierfunktion im Computed-Tab, du liest diese Werte also, statt sie zu exportieren.

Die Lücke

Alle genannten Optionen liefern Text. Nichts im dokumentierten Menü erzeugt einen Frame, eine Textebene oder einen Auto-Layout-Container. Was du kopierst, musst du in Figma von Hand nachbauen.

Kopiertes CSS von Hand nachbauen

Der manuelle Weg sieht so aus: Du kopierst die Regel eines Elements, legst in Figma einen Frame an und übersetzt jede Deklaration selbst. Eine Regel mit display: flex, gap: 16px und justify-content: space-between wird zu einem Auto-Layout-Frame mit 16px Abstand und gleichmäßiger Verteilung (space between). Padding, border radius, Schriftfamilie und Farbe brauchen jeweils einen eigenen Durchgang.

Das reicht für einen Button, eine Karte oder eine schnelle Wertprüfung. Es kippt, sobald die Seite verschachtelte Flex-Container, ein Grid oder fünfzig wiederholte Elemente enthält. Außerdem musst du die Schriften selbst prüfen, denn eine Familie, die auf deinem Rechner nicht installiert ist, wird nicht so dargestellt wie auf der Seite.

Die DevTools-Kopie eignet sich zum Lesen eines Werts. Zum Erzeugen von Ebenen eignet sie sich nicht.

Figmas eigene Chrome-Erweiterung

Figma veröffentlicht eine Chrome-Erweiterung, die direkt von der Seite auf die Arbeitsfläche geht. Laut dem Artikel im Figma Help Center bietet sie zwei Erfassungsmodi:

1. Select element: Fahre über einen Bereich, etwa eine Karte oder einen Button, und klicke, um ihn zu erfassen.
2. Capture page: Die Erfassung enthält auch die Teile der Seite, die außerhalb des sichtbaren Bereichs liegen.

Jede Erfassung landet im Tray der Symbolleiste und wird in die Zwischenablage kopiert. Du fügst sie mit Cmd+V unter macOS oder Strg+V unter Windows und Linux in eine Figma-Design-Datei oder ein FigJam-Board ein. Das Ergebnis sind bearbeitbare Ebenen: Frames, Text, Bilder und Formen.

Die Erweiterung liest den Code hinter den Webelementen und übersetzt ihn. Figma schreibt, sie könne bestimmte Auto-Layout-Eigenschaften, Schrifteigenschaften und Variablen "if available" (sofern verfügbar) anwenden und versuche, vorhandene Farb-, Zahlen- und String-Variablen zu binden, auch aus Bibliotheken.

Zwei Prüfungen, bevor du dich darauf verlässt. Erstens der Tarif: Die Erweiterung ist in allen Tarifen verfügbar, aber laut Figma wird code to canvas aktiv, sobald du in einem kostenpflichtigen Tarif angemeldet bist. Zweitens die Genauigkeit: Der Hilfeartikel nennt keine Einschränkungen, und seine Formulierungen ("certain" Eigenschaften, Variablen "if available") deuten darauf hin, dass die Abdeckung variiert. Teste sie an deiner eigenen Seite, bevor du einen Arbeitsablauf darauf aufbaust.

Was ein Datei-Import stattdessen tut

UnHTML ist ein Figma-Plugin, das mit einer Datei statt mit einem Live-Tab arbeitet. Es akzeptiert drei Eingaben: eine eigenständige .html-Datei, ein Safari-.webarchive oder eine scene.json, die mit der Open-Source-CLI erfasst wurde. Du wählst Desktop (1440px), Mobile (390px) oder eine eigene Breite und ziehst die Datei auf das Plugin.

Es bildet flex und grid auf Auto Layout ab. Kann ein Frame die erfasste Geometrie nicht nachbilden, fällt es auf absolute Positionierung zurück. Schriften, die du nicht hast, werden ersetzt (standardmäßig Inter), und jede Ersetzung steht in einem Import-Bericht. Das Ergebnis sind bearbeitbare Ebenen, kein pixelgenauer Klon.

Beim Datenschutz gilt standardmäßig: null Netzwerkanfragen. Das Nachladen von Remote-Inhalten ist optional, und Skripte, Inline-Event-Handler und javascript:-URLs werden vor dem Rendern aus dem Markup entfernt. Für Live-Seiten, Remote-Assets oder mit JavaScript gebaute Seiten erfasst die CLI oder das Bookmarklet zuerst eine scene.json.

Der Preis ist einmalig und laut Anbieter "launch pricing, and it may change" (Einführungspreis, kann sich ändern). Geprüft am 2026-10-10:

Ein Knotenbudget schützt zudem vor ausufernden Importen, daher kann eine sehr große Seite vor einer vollständigen Umwandlung enden.

Welcher Weg zu welcher Aufgabe passt

Nutze die DevTools-Kopie, wenn du CSS liest. Nutze die Erweiterung, wenn du einen kostenpflichtigen Figma-Tarif hast und ein Live-Element oder eine Seite aus einem geöffneten Tab willst. Nutze einen Datei-Import, wenn du eine ganze Seite aus einer gespeicherten Datei willst, wenn dir die kostenlose Grenze von 500 Ebenen reicht oder wenn nichts deinen Rechner verlassen soll. Für Seiten hinter einem Login siehe, wie die Erfassung einer Seite hinter einem Login mit einer gespeicherten Datei funktioniert.

So testest du jeden Weg an deiner eigenen Seite

Wähle eine echte Seite und führe bei jedem Weg dieselben drei Prüfungen durch, damit der Vergleich auf deinen Inhalten beruht und nicht auf einer Demo.

1. Zähle die Ebenen. Notiere, wie viele Ebenen das Ergebnis hat und ob wiederholte Elemente (eine Reihe von Karten, eine Navigationsliste) als getrennte Frames ankommen. Die kostenlose Stufe des Datei-Imports endet bei 500 Ebenen pro Import, eine lange Seite ist also ein guter Belastungstest.
2. Prüfe das Auto Layout. Wähle einen Flex-Container aus dem Quell-CSS, zum Beispiel einen mit display: flex, gap: 24px und align-items: center. Prüfe, ob der Figma-Frame Auto Layout mit 24px Abstand und zentrierter Ausrichtung hat. Zeigt er absolute Positionierung, ist das ein Rückfall und kein Fehler deiner Seite.
3. Kontrolliere die Schriften. Öffne die Textebenen und vergleiche die Familie mit dem font-family der Seite. Eine fehlende Schrift wird ersetzt, eine Überschrift kann also auf den ersten Blick stimmen und trotzdem die falsche Familie tragen.

Notiere, was abweicht. Ein Weg, der bei diesen drei Prüfungen zu deiner Seite passt, genügt meist auch für die übrige Arbeit, und ein Weg, der eine davon nicht besteht, zeigt dir, wo du manuelle Nacharbeit einplanen musst.

Fazit

DevTools ist zum Lesen und Debuggen von CSS gebaut, und das Kopiermenü spiegelt das wider: Es liefert Text. Ebenen kommen aus einem Erfassungswerkzeug. Figmas eigene Erweiterung ist die nächstliegende Alternative, wenn du bereits einen Tarif mit code to canvas bezahlst; ein Datei-Import ist die Alternative, wenn du die Seite als gespeicherte Eingabe und standardmäßig ohne Netzwerkverkehr willst. Egal, wofür du dich entscheidest: Teste es an deiner echten Seite und lies das Ergebnis. Jeder Weg hier hat Grenzen. Wenn du den Datei-Weg in der Praxis sehen willst, beginne auf der Startseite.