Figma-Import aufräumen: Ballast löschen, nur flatten, was du nicht mehr bearbeitest

Um einen Import in Figma aufzuräumen, gehst du in fester Reihenfolge vor: Version sichern, Ballast löschen, überflüssige Hüllen entgruppieren, Frames mit Auto Layout schützen und zuletzt flatten. Flatten kommt zuletzt, weil es der einzige Schritt ist, den du nicht wieder auseinandernehmen kannst. Alles davor lässt sich günstig rückgängig machen.

Dieses Tutorial richtet sich an Designerinnen, Designer und Entwickler, die gerade eine Webseite als Ebenen nach Figma geholt haben. Du brauchst die importierte Seite in einer Datei, in der du Bearbeitungsrechte hast. Ein Import liefert echte Frames, Text und Vektoren. Eine echte Seite bringt aber auch versteckte Elemente, leere Boxen und Schichten von Wrapper-Markup mit. Die folgenden Schritte entfernen das, ohne das Layout zu beschädigen, das du behalten willst.

Schritt 0: Version sichern, bevor du etwas anfasst

Flatten ist destruktiv. Die Figma-Hilfe sagt, dass sich die einzelnen Ebenen eines geflatteten Objekts nicht mehr trennen lassen und dass der Rückweg über Rückgängig oder das Wiederherstellen einer Version aus dem Versionsverlauf führt.

Beginne also damit, eine Version zu benennen. Öffne den Versionsverlauf, sichere eine Version und nenne sie "Roh-Import". Geht ein Aufräumdurchgang in einer Stunde schief, reicht Rückgängig womöglich nicht mehr so weit zurück. Die benannte Version schon.

Schritt 1: Ballast löschen

Ballast ist jede Ebene, die nichts zu dem Design beiträgt, mit dem du gleich arbeitest. Auf einer importierten Seite fällt er meist in vier Gruppen:

• Versteckte Ebenen, etwa mobile Menüs, Cookie-Banner und Modals, die bei der Erfassung der Seite nicht sichtbar waren.
• Leere Frames ohne Kinder und ohne Füllung, die Platzhalter-Elemente hinterlassen haben.
• Duplikate außerhalb des sichtbaren Bereichs, zum Beispiel eine zweite Kopie der Navigation für einen anderen Breakpoint.
• Tracking-Pixel und andere winzige Bilder ohne visuelle Funktion.

Verstecken oder löschen

Eine Ebene zu verstecken und sie zu löschen ist nicht dasselbe. Eine versteckte Ebene bleibt in der Datei und zählt weiter zur Ebenenanzahl. Laut dem Auto-Layout-Leitfaden von Figma passt sich eine Auto-Layout-Liste an, wenn Elemente hinzugefügt, entfernt oder versteckt werden. Ein verstecktes Kind hinterlässt also keine Lücke im Layout. Verstecken ist damit ein praktischer Test, ob eine Ebene wichtig ist. Bist du sicher, dass sie es nicht ist, lösche sie. Versteckte Ebenen belasten die Datei weiterhin und überfrachten das Ebenenpanel.

Eine ehrliche Einschränkung: In den von uns geprüften Figma-Hilfeseiten fanden wir keinen eingebauten Befehl, der alle versteckten Ebenen auf einmal löscht, und auch keinen, der alle leeren Frames entfernt. Figmas eigene Seite zu KI-Workflows nennt "delete all invisible layers" nur als Beispiel-Prompt. Rechne also damit, das von Hand zu erledigen. Klappe das Ebenenpanel auf, wähle die störenden Ebenen mit Shift oder Command aus und drücke Delete. Arbeite dich von unten im Baum nach oben, damit du nach dem Löschen eines Kindes nicht den leer gewordenen Elternknoten suchen musst.

Schritt 2: Hüllen entgruppieren, die nichts leisten

Webseiten bestehen aus verschachtelten Containern, und ein Import bildet diese Verschachtelung ab. Um einen einzigen Button können fünf Frame-Ebenen liegen. Die meisten dieser Hüllen tun in Figma nichts.

Entgruppieren entfernt die Hülle und schiebt ihre Kinder eine Ebene nach oben. Das Tastenkürzel ist für Gruppen und Frames gleich: Shift Command G oder Command Delete auf dem Mac, Shift Control G oder Control Backspace unter Windows, wie die Figma-Seite zum Unterschied zwischen Frames und Gruppen aufführt.

Bevor du entgruppierst, solltest du wissen, um welche Art Hülle es sich handelt, denn beide verhalten sich unterschiedlich:

Ein Frame ohne Füllung, ohne Kontur, ohne Auto Layout und ohne Zweck lässt sich bedenkenlos entfernen. Ein Frame, der eines davon trägt, erfüllt eine Aufgabe, und damit sind wir beim nächsten Schritt.

Schritt 3: Ebenen behalten, die das Layout tragen

Schützenswert sind die Frames mit Auto Layout. UnHTML überträgt Abstände, Padding, Wrap und Stretch aus dem Flex- und Grid-CSS der Seite auf Auto Layout, und wo ein Frame die erfasste Geometrie nicht abbilden kann, fällt es auf absolute Positionierung zurück. Eine importierte Datei ist deshalb ein Gemisch: Manche Frames fließen, andere sind fixiert.

Wenn du einen Frame mit Auto Layout entgruppierst oder flatten, gehen Richtung, Gap und Padding verloren. Die Kinder bleiben, aber die Regeln, die sie angeordnet haben, sind weg. Um einen Frame vor dem Eingriff zu prüfen, wähle ihn aus und sieh in die rechte Seitenleiste. Ist Auto Layout aktiv, lass ihn in Ruhe oder lösche nur seine Blatt-Kinder.

Ein verwandter Fall ist ein Kind, das absichtlich fixiert wurde. Figmas Option Ignore auto layout, früher absolute position genannt, nimmt ein Objekt aus dem Fluss und behält es trotzdem im Auto-Layout-Frame. Eine solche Ebene kann wie ein Ausreißer aussehen, obwohl sie Absicht ist. Prüfe also, bevor du sie löschst. Wenn du unsicher bist, wie ein Element so fixiert wurde, erklärt wie absolute und fixed Elemente ankommen jeden CSS-Wert von position.

Du kannst auch Auto Layout ergänzen, wo der Fallback keines gelassen hat. Wähle die Ebenen aus und drücke Shift A, dann rät Figma die Flussrichtung: vertikal, horizontal oder Grid. Prüfe den Vorschlag. Es ist nur eine Vermutung. Um Auto Layout wieder zu entfernen, lautet das Kürzel Option Shift A auf dem Mac und Alt Shift A unter Windows.

Schritt 4: Nur flatten, was du nie bearbeitest

Flatten verschmilzt eine Auswahl zu einer einzigen Vektorebene. Figma sagt, das verringere die Dateigröße und vereinfache das Design. Es funktioniert bei Vektorauswahlen, bei Textebenen und bei Frames oder Sections. Beim Flatten eines Containers werden seine Kinder verschmolzen, und der Container selbst verschwindet. Das Kürzel ist Option Shift F auf dem Mac und Alt Shift F unter Windows, oder Rechtsklick und Flatten.

Gute Kandidaten:

• Icons aus mehreren überlappenden Vektorpfaden, wenn du nur die fertige Form brauchst.
• Dekorative Illustrationen aus Dutzenden kleiner Formen.
• Logos oder Wortmarken, die du als eine einzige Kontur anpassen willst.

Schlechte Kandidaten:

• Text. Eine geflattete Textebene wird zu Umrissen, du kannst die Wörter nicht mehr bearbeiten und keinen Textstil mehr anwenden.
• Buttons, Karten und jeder Frame mit Auto Layout. Flatten löscht den Frame und seine Layout-Regeln.
• Alles, was ein Entwickler später auf Abstände oder Schrift prüfen wird.

SVGs auf einer Seite kommen bereits als native Vektoren an, daher müssen viele Icons nicht geflattet werden, um bearbeitbar zu sein. Flatte sie nur, wenn du einen einzigen verschmolzenen Pfad willst. Ein geflattetes SVG ist einfacher, verliert aber seine innere Struktur, und ohne Versionsverlauf bekommst du sie nicht zurück.

Flatte selektiv und in kleinen Schritten. Wähle ein Icon aus, flatte es und sieh dir das Ergebnis an, bevor du zum nächsten gehst. Flattest du einen ganzen Abschnitt auf einmal und ist das Ergebnis falsch, hast du ein einziges großes Rückgängig und keine Möglichkeit herauszufinden, welche Gruppe es verursacht hat.

Das Ergebnis prüfen

Ist der Durchgang fertig, vergleiche die Datei mit deiner Version "Roh-Import". Der Ebenenbaum sollte kürzer und flacher sein. Text sollte weiterhin bearbeitbar sein. Frames, die Auto Layout hatten, sollten es in der Seitenleiste weiterhin anzeigen. Eine aufgeräumte Datei lässt sich auch leichter in wiederverwendbare Bausteine überführen, worum es in eine importierte Seite in Komponenten verwandeln geht.

Noch ein Hinweis zu den Zahlen. Der kostenlose Tarif von UnHTML begrenzt einen Import auf 500 layers, Pro hebt diese Grenze auf. Die Grenze gilt beim Import, das spätere Löschen von Ebenen in Figma ändert also nichts an dem, was der Importer erzeugt hat. Erreicht deine Seite die Grenze, holt das Aufräumen den fehlenden Teil nicht zurück: Importiere erneut mit Pro oder abschnittsweise. Die Details zu den Tarifen stehen auf der UnHTML-Startseite.

Stand Oktober 2026 stimmen die oben genannten Befehle und Kürzel mit den in diesem Artikel zitierten Seiten der Figma-Hilfe überein. Menüs verändern sich von Version zu Version. Tut ein Kürzel nichts, klicke mit der rechten Maustaste auf die Auswahl und suche den Befehl unter demselben Namen.