CSS Grid zu Figma: Was die Umwandlung in Ebenen übersteht

CSS grid überträgt sich fast eigenschaftsgenau auf Figmas grid auto layout Flow. Tracks werden zu Tracks. Spans werden zu Spans. Gap wird zu Gap. Zwei reine CSS-Konzepte, grid-template-areas und subgrid, haben in Figma keine native Entsprechung und werden stattdessen nachgebaut oder vereinfacht. Diese Referenz geht durch, was direkt übernommen wird, was nicht, und was passiert, wenn ein importiertes Grid zu komplex ist, um als funktionierendes Layout reproduziert zu werden.

Wie CSS-Grid-Tracks zu Figma-Tracks werden

Eine mit display: grid gebaute Seite landet in Figma als Frame im grid auto layout Flow. Das meiste, was dieses Grid in CSS definiert, hat einen direkten Platz in Figmas Grid-Steuerungen. Figmas grid auto layout organisiert einen Frame in Zeilen und Spalten, genannt Tracks, genau so wie grid-template-columns und grid-template-rows es in CSS tun. Ein Objekt, das im Ausgangsmaterial mehrere Zellen überspannt, gesetzt mit grid-column oder grid-row, wird in Figma zu einem Objekt mit einem Column-span- oder Row-span-Wert. Dorthin kommt man, indem man das Objekt auf fill container setzt und es dann bis an die Zellränder heranzieht.

Der Rest der alltäglichen Eigenschaften überträgt sich fast genauso sauber:

Ein Unterschied ist erwähnenswert: CSS justify-items und align-items setzen die Ausrichtung für den gesamten Container auf einmal, während Figma diese Ausrichtung pro Objekt innerhalb seiner Zelle anwendet. Das visuelle Ergebnis stimmt meist überein, aber ein importiertes Grid kann am Ende jedes Objekt mit einer eigenen Ausrichtungseinstellung haben, statt einer einzigen Regel auf Frame-Ebene.

Die fr-Einheit ist leicht zu übersehen, deshalb verdient sie einen eigenen Hinweis. In CSS teilt 1fr 2fr den verfügbaren Platz ein Drittel für die erste Spalte und zwei Drittel für die zweite auf. In Figma kommt dasselbe Verhältnis daher, dass ein Track auf fill container statt auf eine feste Größe gesetzt wird, also sollte eine Spalte, die im Ausgangs-CSS fr verwendete, sich zusammen mit ihren Nachbarn mitverändern, statt eine feste Breite zu behalten. Laut dem aktuellen caniuse-Datensatz hat CSS grid 96,89 Prozent globale Browserunterstützung, vollständig unterstützt seit Chrome 57, Firefox 52 und Safari 10.1. Fast jede Seite, die ein Designer heute importiert, arbeitet mit echtem CSS grid, nicht mit einem Flexbox- oder Tabellen-Fallback.

Was CSS grid hat und das Figma grid auto layout nicht

Zwei CSS-Grid-Konzepte haben kein natives Gegenstück in Figma. Zu wissen, welche zwei es sind, spart beim Prüfen des Imports Zeit.

grid-template-areas. CSS erlaubt es, Bereiche eines Grids mit ASCII-Art-Syntax zu benennen und Elemente nach Bereichsnamen statt nach Zeilen- und Spaltennummer zu platzieren. Figmas grid auto layout hat kein entsprechendes Namenssystem. Wenn eine Seite grid-template-areas verwendet, baut der Import die Position jedes Elements stattdessen als expliziten Spalten- und Zeilen-Span nach. Das reproduziert das Layout, verliert aber die lesbare Bereichsnamen-Zuordnung, die ein Entwickler im CSS sehen würde.

subgrid. MDNs CSS-Grid-Referenz beschreibt grid-template-columns: subgrid als eine Möglichkeit, dass ein verschachteltes Grid die Tracks seines Elternteils erbt, sodass sich die Elemente im Kind automatisch an den Grid-Linien des Elternteils ausrichten. Figma hat kein subgrid-Konzept. Ein Layout mit subgrid kommt als zwei unabhängig getrackte Grid-Frames an, ein Eltern- und ein verschachtelter Kind-Frame, jeder mit eigenem Gap und Padding, laut Figmas Guide zu auto layout. Die beiden Frames bleiben nicht automatisch aufeinander ausgerichtet, wie sie es im Browser waren. Diese Ausrichtung muss von Hand nachgebaut werden.

grid-auto-flow, die Eigenschaft, die steuert, wie CSS Elemente platziert, die außerhalb des expliziten Grids liegen, überträgt sich ebenfalls nicht als benannte Einstellung. Figma nähert sich derselben Platzierung von links nach rechts, von oben nach unten von selbst an, mit automatischem Neufluss, wenn ein Objekt entfernt wird. Aber die implizite Track-Größenbestimmung, die grid-auto-rows und grid-auto-columns in CSS steuern, hat kein explizites Feld, das man danach prüfen könnte.

Wenn der Import das Grid nicht reproduzieren kann

Jeder Capture-zu-Figma-Workflow stößt irgendwann auf einen Frame, der sich nicht als funktionierendes Grid nachbauen lässt. Meist verlässt sich das CSS auf etwas, für das Figmas Layout-Modell keinen Platz hat: grid-template-areas kombiniert mit überlappenden Bereichen zum Beispiel, oder ein mehrere Ebenen tief verschachteltes subgrid. Wenn das passiert, ist der vernünftige Ansatz ein Fallback auf absolute Positionierung. Das Objekt behält seine erfasste Größe und Position, verhält sich aber nicht mehr wie ein responsiver Track und muss als fix behandelt werden.

UnHTML folgt genau diesem Muster, wenn es eine Seite umwandelt. Es überträgt Flex- und Grid-Layouts aus dem tatsächlichen CSS der Seite in Figmas natives auto layout, und wenn ein Frame die erfasste Geometrie nicht reproduzieren kann, fällt es von selbst auf absolute Positionierung zurück, statt bei einem kaputten Grid zu raten, mit dem Wechsel vermerkt im Importbericht. Derselbe Bericht protokolliert auch Schriftart-Ersetzungen. Eine fehlende Schriftart wird standardmäßig durch Inter ersetzt, und weil Grid-Zellen manchmal nach den Maßen einer bestimmten Schriftart bemessen sind, kann eine ersetzte Schriftart verändern, wie sich eine Zeile oder Spalte neu anordnet, selbst wenn die Grid-Struktur selbst sauber importiert wurde.

Nichts davon macht das Ergebnis zu einem pixelgenauen Klon der Originalseite. Das ist auch nicht der Anspruch. grid-template-areas und subgrid sind die zwei Stellen, an denen ein Designer erwarten sollte, ein paar Minuten damit zu verbringen, Beziehungen nachzubauen, die CSS kostenlos ausgedrückt hat. Alles andere in der Tabelle oben sollte bereits dort sitzen, wo es hingehört.

Eine schnelle Checkliste für CSS-grid-lastige Seiten

Ein paar Prüfungen nehmen den meisten Rateaufwand aus der Überprüfung eines Grid-Imports:

1. Suche zuerst im Ausgangs-CSS nach grid-template-areas. Ist es vorhanden, erwarte, dass der importierte Frame explizite Spans statt benannter Bereiche enthält, und erwarte, die lesbare Zuordnung zwischen dem Namen eines Bereichs und seinem Inhalt zu verlieren, bis du die Ebenen selbst umbenennst.
2. Suche danach nach subgrid. Ein Abschnitt mit subgrid kommt als Eltern-Frame und Kind-Frame mit getrennten Tracks an. Prüfe, ob die beiden weiterhin visuell übereinstimmen, und justiere Gap oder Padding des Kindes nach, falls sie auseinandergedriftet sind.
3. Prüfe jede Spalte oder Zeile, die fr verwendet hat. Bestätige, dass der entsprechende Figma-Track auf fill container gesetzt ist, nicht auf eine feste Breite, sonst reagiert das spätere Verändern der Frame-Größe nicht so, wie es die Originalseite tat.
4. Öffne den Importbericht, bevor du Ebenen anfasst. Sowohl eine Schriftart-Ersetzung als auch ein Fallback auf absolute Positionierung tauchen dort auf, und beides kann erklären, warum eine Zeile leicht anders aussieht, bevor du anfängst, nach der Ursache zu suchen.
5. Behandle justify-items und align-items als Prüfung pro Objekt, nicht pro Frame. Weil Figma diese Ausrichtung auf jedes Objekt innerhalb seiner Zelle anwendet statt einmal auf Container-Ebene, überträgt sich eine Änderung an der Ausrichtung eines Elements nicht auf seine Nachbarn, wie es das Bearbeiten der CSS-Regel tun würde.

Keiner dieser Schritte erfordert, das CSS selbst anzufassen. Es sind dieselben fünf Dinge, die es bei jedem CSS-grid-lastigen Import zu prüfen lohnt, egal ob das Grid von einer Marketingseite, einem Dashboard oder einem redaktionellen Layout mit mehreren verschachtelten Bereichen stammt.

Fazit

Das meiste, was ein CSS-Grid-Layout tut, hat einen Eins-zu-eins-Platz in Figmas grid auto layout: Tracks werden zu Tracks, Spans zu Spans, Gap zu Gap, und die fr-Einheit zu fill-container-Größenbestimmung. Die zwei echten Lücken sind grid-template-areas, das seine Bereichsnamen verliert und als Spans nachgebaut wird, und subgrid, das als getrennte, verschachtelte Frames statt als ein ausgerichtetes System ankommt. Eine Seite, die sich auf eines der beiden stützt, ist die Seite, die nach einem Import zuerst geprüft werden sollte.

UnHTML wendet genau dieses Grid-zu-auto-layout-Mapping auf echte Seiten an, und seine Preisseite umfasst eine kostenlose Stufe mit einer Obergrenze von 500 Ebenen plus ein einmaliges Pro-Upgrade, das diese Grenze aufhebt.