Figma Einfuegen aus dem Web vs Screenshot-zu-Design-Plugins vs UnHTML 2026

Figma Einfuegen aus dem Web: was bedeutet das 2026 wirklich

Figma hat keine eingebaute Funktion, die eine lebende Webseite in editierbare Ebenen verwandelt. Fuege einen Link oder ein Bild ein, und du bekommst eine flache Fuellung, keinen Frame mit echtem Text und Vektoren. Screenshot-zu-Design-Plugins kommen naeher heran, indem sie ein Bild der Seite erfassen, aber ein Bild ist immer noch nicht das eigene Markup der Seite. Ein CSS-bewusster Import, die Kategorie, in der UnHTML steht, arbeitet anders: er liest das tatsaechliche DOM und Stylesheet der Seite, sodass er echte Frames, Text, Vektoren und, wo Auto Layout greift, die eigene Flex- oder Grid-Struktur der Seite nachbauen kann. Hier ist, was jeder der drei Ansaetze liefert, was jeder ehrlich als fehlend eingesteht, und wie Figmas eigenes Auto-Layout-Update von 2026 den Vergleich veraendert.

Was Figmas eigenes Einfuegen und Kopieren tatsaechlich leisten

Figmas Kopieren und Einfuegen ist dafuer gebaut, Design-Elemente innerhalb von Figma wiederzuverwenden, nicht dafuer, eine Webseite zu erfassen. Du kannst Objekte zwischen Seiten, Dateien und Frames kopieren und einfuegen, und Multi-Paste wendet ein oder mehrere Objekte gleichzeitig auf mehrere Frames an. Bringst du dagegen etwas von ausserhalb Figmas mit, werden die Optionen schnell enger: Bilder und Videos aus der Zwischenablage, Code in CSS-, iOS- oder Android-Formaten, und PNG-Exporte ausgewaehlter Objekte. Figmas eigene Dokumentation ist eindeutig darin, dass Bilder und Videos keinen eigenen Ebenentyp haben: sie werden als Fuellungen behandelt. Allein diese Tatsache erklaert den groessten Teil der Verwirrung rund um das "Einfuegen einer Webseite" in Figma. Es gibt keinen Weg des Einfuegens aus dem Web, der einen Frame erzeugt, den du auswaehlen, mit Constraints skalieren oder mit Auto Layout versehen kannst. Was ankommt, ist ein statisches Bild, das auf dem Frame liegt, in den du es eingefuegt hast.

Screenshot-zu-Design-Plugins: was sie erfassen und was ihnen entgeht

Plugins in Figmas eigener Community, darunter Werkzeuge wie Codia AI Design und URL Screenshot, gehen von einem Bild der Seite aus, nicht von ihrem Markup. URL Screenshot haelt seine Aufgabe eng begrenzt und ist ehrlich dabei: Link einfuegen, Screenshot bekommen, der als Bild auf der Leinwand landet. Diese Ausgabe ist eine Fuellung, dasselbe Fuellungsverhalten, das Figmas eigene Kopier-und-Einfuegen-Dokumentation fuer jedes externe Bild beschreibt. Codia AI Design geht weiter und rekonstruiert Formen und, wo OCR zum Einsatz kommt, editierbaren Text aus diesem Screenshot. Der Ausgangspunkt bleibt aber ein abgeflachtes Bild, nicht das DOM der Seite. Die Preise dieser Drittanbieter-Plugins wurden zum Zeitpunkt dieses Textes nicht unabhaengig geprueft, daher nennt dieser Artikel ihre Kosten nicht.

Weil die Eingabe ein Screenshot ist, kann keines dieser Plugins das tatsaechliche Auto Layout der Seite wiederherstellen. Es gibt kein justify-content, kein align-items, keinen gap-Wert zu lesen, weil ein Screenshot ueberhaupt kein CSS mitbringt. Was du stattdessen bekommst, ist eine visuelle Annaeherung: Boxen und Text so platziert, dass sie bei einer Groesse richtig aussehen, ohne die zugrunde liegende Struktur, die die urspruengliche Seite responsiv gemacht hat. Fuer eine schnelle Referenz oder eine Seite, die nicht gecrawlt werden kann, ist das in Ordnung. Fuer jeden, der eine editierbare Design-Datei will, die er umstrukturieren kann, ist es eine echte Grenze.

Wie sich ein CSS-bewusster Import unterscheidet, und warum 2026 die Luecke verkleinert

Ein CSS-bewusster Import arbeitet in die entgegengesetzte Richtung. Er liest das eigene HTML und Stylesheet der Seite und mappt diese Struktur auf Figmas Grundbausteine. UnHTMLs Ansatz besteht darin, eine Webseite in echte Frames, Text, Bilder, Vektoren und Auto Layout umzuwandeln, gemappt aus dem tatsaechlichen CSS der Seite, wobei die gelesenen Eigenschaften benannt statt angenaehert werden: justify-content und align-items legen die Auto-Layout-Ausrichtung fest, und gap legt den Abstand zwischen den Kindern fest. Die gap-Eigenschaft ist eine Kurzform fuer row-gap und column-gap in Flex- und Grid-Containern, sodass ein Importer, der sie korrekt liest, denselben Abstand reproduziert, den Figmas Auto Layout sonst von Hand einstellen muesste.

Dieser Vergleich verkleinert sich aus einem bestimmten Grund, der an 2026 gebunden ist. Figmas eigenes Auto Layout wurde aktualisiert, um CSS Flexbox enger zu spiegeln: gap mappt jetzt direkt auf die Flexbox-Eigenschaft gap, Padding wird als Border-Box behandelt und kann nicht unter seinen festgelegten Wert gequetscht werden, und Strokes verhalten sich je nach Position wie CSS border oder outline. Neue Frames verwenden ab Juli 2026 standardmaessig diese aktualisierte Version, und der manuelle Umschalter wird zu einem Update-Button, wobei die Unterstuetzung der alten Version fuer neue Frames im Januar 2027 endet. Praktisch bedeutet das: Ein CSS-bewusster Import, der auf dem aktualisierten Auto-Layout-Modell aufbaut, hat weniger Uebersetzungsarbeit zu leisten als noch vor einem Jahr. Der gap-Wert, den er schreibt, und der gap-Wert, den Figma erwartet, sind jetzt dasselbe Konzept.

Preis und Zugang folgen einer einfachen Aufteilung. UnHTMLs kostenlose Stufe importiert bis zu 500 Ebenen pro Import mit absoluter Positionierung statt Auto Layout. Die Pro-Stufe, ein einmaliger Kauf von 39 Dollar pro Editor, entfernt diese Ebenengrenze und fuegt die oben beschriebene echte Auto-Layout-Konvertierung hinzu, dazu Komponenten und geteilte Textstile. Studio, fuer einmalig 119 Dollar, deckt bis zu fuenf Editoren ab. Auf der Netzwerkseite ist der Standard null Anfragen. Nichts verlaesst die Maschine, auf der der Import laeuft, ausser du aktivierst das Abrufen externer Ressourcen, das isoliert laeuft und nur fuer diese eine Opt-in-Aktion. Der einzige Aufruf, den das Plugin von sich aus macht, ist eine woechentliche Lizenzpruefung, die nur den Lizenzschluessel und eine Figma-Nutzer-ID mitfuehrt. Eigenstaendige HTML-Dateien und Web-Archives brauchen ueberhaupt nichts von aussen, da sie ihre eigenen Ressourcen schon mitbringen. Die aktuellen Preisdetails findest du auf der eigenen Seite des Plugins.

Wo jeder Ansatz an seine Grenzen stoesst

Keinem der drei Ansaetze sollte man zutrauen, eine pixelgenaue Kopie zu liefern, und die ehrlichen sagen das klar, statt auszuweichen. Nicht lokal installierte Schriften werden ersetzt, ueblicherweise durch Inter, und ein guter Import-Bericht listet jeden Tausch auf, damit du ihn korrigieren kannst, bevor du dich auf die Datei verlaesst. Komplexe Grids koennen auf absolute Positionierung zurueckfallen statt auf eine vollstaendige Auto-Layout-Rekonstruktion: ein vernuenftiger Kompromiss, der aber aendert, wie sich der Frame verhaelt, wenn du ihn spaeter skalierst. Dynamischer oder per Skript erzeugter Inhalt ist fuer jedes dieser Werkzeuge eine Grenze, wenn der Inhalt erst erscheint, nachdem JavaScript auf der lebenden Seite fertig ausgefuehrt wurde. Eine eigenstaendige HTML-Datei oder eine Web-Archive-Erfassung umgeht das, da die Ressourcen zum Zeitpunkt der Erfassung schon eingebacken sind. Und die Ebenengrenze von 500 pro Import in der kostenlosen Stufe ist spezifisch fuer einen CSS-bewussten Importer wie UnHTML. Screenshot-Plugins stossen nicht an dieselbe Wand, weil sie von vornherein keine einzelnen strukturellen Ebenen erzeugen, sondern nur ein abgeflachtes Bild oder eine rekonstruierte Annaeherung daran.

Welcher Weg zur Aufgabe passt

Brauchst du nur eine visuelle Referenz einer Seite? Figmas eigenes Einfuegen oder ein Screenshot-Plugin bringen dich in Sekunden dorthin, mit dem Kompromiss, dass ankommt, was ein Bild ist, keine Struktur, die du wie einen nativen Figma-Frame bearbeiten kannst. Eine Seite neu zu gestalten, die nie eine Design-Datei hatte, die Seite eines Mitbewerbers auseinanderzunehmen, um ihr Layout zu verstehen, oder eine alte Seite Abschnitt fuer Abschnitt nachzubauen, ist eine andere Aufgabe. Das DOM und das CSS tragen Informationen, die ein Screenshot nicht liefern kann: den tatsaechlichen Abstand, die tatsaechliche Ausrichtung und, Stand 2026, ein Auto-Layout-Modell auf Figmas Seite, das diese CSS-Werte direkter abbildet als zuvor. Waehle danach, was du eigentlich erreichen willst: ein Bild zum Abpausen, oder eine Datei, die du so umstrukturieren kannst, wie du das CSS der urspruenglichen Seite umstrukturieren wuerdest.