Layout-Raster in Figma einrichten

Ein Figma-Layout-Raster ist ein Overlay pro Frame, an dem Elemente einrasten, und das Setup, das ein responsives Web-Raster abbildet, sieht so aus: Raster vom Typ Spalten mit stretch-Spalten und festem Steg und Rand, ein Frame pro Breakpoint — ein 1440px-Desktop-Frame mit 12 Spalten / 24 Steg / 66 Rand, ein 768px-Tablet-Frame mit 8 / 24 / 29, ein 375px-Mobile-Frame mit 4 / 16 / 16 — jedes als Rasterstil gespeichert, sodass jeder neue Frame das Raster seiner Stufe mit einem Klick bekommt.

Die Zahlen sind genauso wichtig wie die Mechanik: Ein Layout-Raster ist die Design-Seite desselben Layout-Rasters, das der Code umsetzt, und die beiden bleiben nur dann ein System, wenn sie dieselben Werte teilen. Dieser Artikel behandelt die Einstellungen, das Setup mit drei Stufen und echten Zahlen, wie das stretch-Modell auf die fluiden Spalten des Webs abgebildet wird, und den Audit-Trick für Screens, die bereits ausgeliefert sind.

Was bedeuten Figmas Layout-Raster-Einstellungen?

Layout-Raster leben pro Frame — wähle einen Frame aus, füge ein Raster hinzu — und kommen in drei Typen: ein gleichmäßiges quadratisches Raster, Zeilen und Spalten. Für das Seitenlayout sind Spalten der relevante Typ, und vier Einstellungen definieren sie (Figmas eigene Referenz ist die Layout-Grids-Doku):

• Anzahl — wie viele Spalten der Frame trägt.
• Typ — stretch, fixed (eine feste Spaltenbreite, Stege absorbieren nichts) oder center (ein fester Block von Spalten, zentriert im Frame).
• Steg — der Raum zwischen den Spalten.
• Rand — der Raum von der Frame-Kante zu den äußersten Spalten (nur beim Typ stretch).

Stretch ist die Einstellung, die zu modernen Web-Rastern passt: Ränder sind fixiert, Stege sind fest, und die Spalten teilen sich die verbleibende Breite — dieselbe Arbeitsteilung wie 1fr-Tracks in CSS, bei denen feste Anteile oben abgezogen werden und die Bruchteile den Rest teilen. Die Typen fixed und center entsprechen dem älteren Fixed-Canvas-Modell; sie passen noch zu druckähnlichen Artboards, aber für responsive Arbeit ist stretch der ehrliche Standard.

Wie richtest du die drei Breakpoint-Raster ein?

Ein Frame pro Breakpoint, ein Spaltenraster pro Frame, dann jedes als Stil gespeichert. Mit den üblichen Stufenwerten:

Die Schritt-für-Schritt-Anleitung: Erstelle die drei Frames mit diesen Breiten, füge jedem ein Spaltenraster hinzu, setze Anzahl/Typ/Steg/Rand aus der Tabelle, und speichere dann jedes Raster als Stil — Grid/Desktop, Grid/Tablet, Grid/Mobile. Die Stile sind die Wiederverwendungsschicht: Ab dann tippt niemand mehr vier Werte pro Frame; ein neuer Screen bekommt das Raster seiner Stufe mit einem Klick, und eine Änderung an einem Stil wirkt sich auf jeden Frame aus, der ihn verwendet.

Weil die Spalten stretchen, trägt der Stil die Entscheidungen und die Frame-Breite bestimmt das Ergebnis. Der Desktop-Stil auf seinem 1440px-Frame berechnet Spalten von (1440 − 2 × 66 − 11 × 24) ÷ 12 = 87px; derselbe Stil auf einem 1280px-Frame ergibt ≈73,7px Spalten. Gleiches Raster, andere Breiten — genau so verhält sich die Web-Version zwischen den Breakpoints.

Wie bleiben die Design-Zahlen mit dem Code synchron?

Der klassische Fehler ist stille Divergenz: Die Designerin schätzt eine ungefähr dreispaltige Anordnung nach Augenmaß, der Entwickler setzt exakte Zwölftel um, und jede Übergabe verhandelt neu, wessen Zahlen echt sind. Die Drift ist keine Nachlässigkeit — es sind zwei Wahrheitsquellen, die tun, was zwei Quellen immer tun. Die Lösung ist eine einzige Quelle.

Scale Composers Figma-Export liefert das Raster als Variablensammlung mit einem Modus pro Breakpoint: Wechsle den Modus, und grid/columns, grid/gutter, grid/margin und grid/min-width springen von Desktop- zu Tablet- zu Mobile-Werten, samt der Container-Maximalbreite daneben. Die Stufenwerte kommen in der Datei als Daten an statt als von Hand getippte Einstellungen — dieselben Zahlen, die der CSS-Export pro Media Query erneut deklariert.

Öffne den Figma-Export des Rasters in Scale Composer — die Grid-Sammlung mit ihren drei Modi, einer pro Breakpoint, neben der Rasteransicht, die sie erzeugt hat.

Eine ehrliche Anmerkung zum Umfang: Figma wendet Layout-Raster pro Frame an. Die Variablen bringen die Zahlen der Stufe in die Datei, wo alle sie lesen und referenzieren können, aber ein Raster auf einen Frame zu legen — und die Werte der Rasterstile mit der Sammlung abgeglichen zu halten — bleibt eine Designer-Handlung, keine automatische Bindung.

Wie arbeitest du mit einem Raster, wenn es auf dem Frame liegt?

Drei Verhaltensweisen erledigen die meiste tägliche Arbeit. Einrasten: Bei sichtbarem Raster rasten gezogene und in der Größe geänderte Elemente an Spaltenkanten ein — das macht aus „vier Spalten überspannen” eine Geste statt einer Rechenaufgabe. Sichtbarkeit: Raster lassen sich per Tastenkürzel ein- und ausblenden (das Kürzel der Klasse Strg/Cmd-G, je nach Plattform), sodass das Overlay ein Werkzeug ist, das du herbeirufst, und keine Tapete, die du zu ignorieren lernst. Constraints: Elemente, die links-und-rechts fixiert oder auf Skalieren gesetzt sind, folgen den stretch-Spalten, wenn der Frame seine Größe ändert — hefte eine Seitenleiste an ihre Spalten, und ein breiterer Frame verbreitert sie so, wie es der Browser täte.

Wie prüfst du einen ausgelieferten Screen gegen das Raster?

Zieh einen Produktions-Screenshot in einen Frame, setze die Frame-Breite auf die Breite des Screenshots, und lege den Rasterstil der Stufe darüber. Jede Drift wird auf einen Blick sichtbar: Elemente, die über Stege reichen, Ränder, die bei der Umsetzung gewachsen sind, eine Seitenleiste, die in der Breite von fünf Spalten rendert, obwohl die Datei vier sagt. Der Trick kostet eine Minute und macht aus „der Build fühlt sich falsch an” eine Liste konkreter, benennbarer Fehlausrichtungen — dieselbe Ein-Quelle-Logik wie bei den Variablen, nur rückwärts als Prüfung angewendet.

Führe die Parity-Prüfung auf einem Frame aus

Richte die drei Stile aus der Tabelle oben ein, dann prüfe, ob sich der Kreis schließt: Wende den Desktop-Stil auf einen 1200px-Frame an — die Container-Breite — und die Spalten berechnen sich zu (1200 − 132 − 264) ÷ 12 = 67px, dieselbe Spaltenbreite, die der Browser innerhalb eines gedeckelten Containers erzeugt. Auf dem 1440px-Arbeitsframe ergibt derselbe Stil 87px-Spalten: Dieses breitere Raster berechnet eine ungedeckelte Seite bei einem 1440px-Viewport, und welches der beiden der Browser tatsächlich zeigt, entscheidet eine einzige Code-seitige Einstellung, die Container-Maximalbreite. Zahlen, die du prüfen kannst, schlagen Zahlen, denen du vertraust — exportiere die Grid-Sammlung und prüfe sie gegen deine eigenen Frames.