Figma Auto Layout vs. CSS Flexbox und Grid: Die Design-to-Code-Lücke schließen
Wie das automatische Layout von Figma der Flexbox und dem Raster von CSS zugeordnet wird (Richtung, Lücke, Abstand, Umarmung, Füllung, Umbruch) und wo sie sich unterscheiden, damit Designs die Übergabe überleben.
Kernaussage
Das automatische Layout von Figma verhält sich ähnlich wie die Flexbox von CSS: Richtungszuordnung zu Flex-Richtung, Lücke zu Lücke, Abstand zu Abstand, „Inhalt umarmen“ zur Größe nach Inhalt, „Container füllen“ zu Flex-Wachstum oder voller Breite und Wrap zu Flex-Wrap. Der Rasterfluss des automatischen Layouts entspricht dem CSS-Raster. Unterschiede treten bei minimaler und maximaler Größe, Textumbruch, Grundlinienausrichtung und reaktionsfähigen Haltepunkten auf. Überprüfen Sie diese daher explizit bei der Übergabe.
Die Kartierung
Der Leitfaden von Figma beschreibt automatische Layoutrahmen, die untergeordnete Elemente nach Richtung, Abstand, Abstand und Ausrichtung anordnen, mit horizontalen, vertikalen und Rasterflüssen und einem optionalen Umbruch. Jedes hat ein nahes CSS-Äquivalent:
Umarmen, füllen und fixieren
In Figma ändert sich die Größe eines Rahmens, der den Inhalt umschließt, basierend auf seinen untergeordneten Elementen, und ein untergeordneter Rahmen, der den Container füllt, wird gedehnt, um den verfügbaren Platz auszufüllen. Figma weist darauf hin, dass, wenn ein Kind auf Füllen eingestellt ist, das Elternteil sich nicht mehr in diese Richtung umarmen kann. In CSS sind die Äquivalente inhaltsbasierte Größenanpassung (Auto oder Fit-Content) und Flex: 1 oder Breite: 100 %. Der Flexbox-Leitfaden von MDN erklärt, wie Flex-Grow, Flex-Shrink und Flex-Basis den Raum verteilen, was die CSS-Seite derselben Idee ist.
Wo die Lücke erscheint
Die meisten Übergabefehler kommen aus einigen Bereichen:
- Minimale und maximale Größe: Legen Sie sie an beiden Stellen fest, sonst verhalten sich Text und Container im Extremfall unterschiedlich.
- Text: Zeilenhöhe, Zeilenumbruch und Kürzung unterscheiden sich zwischen Figma-Textwiedergabe und dem Browser.
- Grundlinienausrichtung: CSS kann anhand der Textgrundlinie ausgerichtet werden; Überprüfen Sie, wie dies beabsichtigt war.
- Absolute untergeordnete Elemente: „Auto-Layout ignorieren“ (früher „absolute Position“) von Figma wird auf „position: absolute“ in einem positionierten übergeordneten Element abgebildet.
- Reaktionsfähigkeit: Auto-Layout-Frames haben keine Haltepunkte; Definieren Sie, wie sich Layouts bei jeder Breite ändern.
Gitter
Verwenden Sie den Rasterfluss des automatischen Layouts für echte zweidimensionale Layouts und ordnen Sie ihn dem CSS-Raster zu, das MDN als System zum Anordnen von Inhalten in Zeilen und Spalten beschreibt. Umschlossene flexible Zeilen sind nicht dasselbe wie ein Raster: Elemente in einer umschlossenen Zeile werden nicht in Spalten ausgerichtet.
Bewegung ist die größere Lücke
Das Layout ist von Figma bis CSS einigermaßen gut abgebildet. Bei Motion ist dies nicht der Fall: Prototypenübergänge müssen im Code neu erstellt werden, und Zustände gehen häufig verloren. Das ist die Lücke, die Tools mit Laufzeiten wie ExodeUI (wir machen es) und Rive für interaktive Komponenten schließen.
Wichtige Prinzipien
- Automatische Layoutrichtung, Abstand, Abstand und Umbruch der Karte in die Flexbox
- Umarmung ≈ Inhaltsgröße; Füllung ≈ Flex: 1 oder 100 % Breite
- Gitterflusskarten zum CSS-Gitter
- Überprüfen Sie bei der Übergabe die minimale/maximale Größe, den Text, die Grundlinien und die Haltepunkte
- Bewegung und Zustände bilden die größere Lücke zwischen Design und Code
Häufige Fragen
Quellen
- Guide to auto layout — Figma-Hilfecenter
- Basic concepts of flexbox — MDN Webdokumente
- Basic concepts of grid layout — MDN Webdokumente