Hinweis: Die Figma-Funktion „Layout-Raster“ wurde im Mai 2025 in „Layout-Hilfslinie“ umbenannt und ist eine andere Funktion als die Rasteroption im Auto-Layout.
Layout-Hilfslinien sind visuelle Hilfsmittel, die Frames hinzugefügt werden, um sicherzustellen, dass Objekte präzise ausgerichtet sind und um Struktur zu bieten, damit wir Designs logisch und konsistent über verschiedene Plattformen und Geräte hinweg halten können.
Verwende Layout-Hilfslinien, um:
- Konsistenz über mehrere Plattformen hinweg sicherstellen
- Layouts einfacher und mit weniger Entscheidungen definieren
- Zeit bei der Definition von Layouts für Mock-ups oder Wireframes sparen
- Verschiedene Layouttechniken wie Galerien, Symbole oder ganze Seitenlayouts unterstützen
Tipp: Erfahre mehr über die Verwendung von Rastersystemen in Figma Design im Blogbeitrag Rastersysteme für Bildschirmdesigns.
Layout-Hilfslinientypen
Es gibt drei Arten von Layout-Hilfslinien: einheitliches Raster, Spalte und Zeile.
Einheitliches Raster
Ein einheitliches Raster ist ein quadratisches Raster, das nützlich ist, wenn Präzision erforderlich ist, beispielsweise beim Entwerfen von Symbolen oder Icons.
Wenn du ein einheitliches Raster auswählst, kannst du dessen Farbe und Größe anpassen.
Farbe
Die Standardfarbe einer Layout-Hilfslinie ist Rot (#FF0000) mit einer Deckkraft von 10 %. Du kannst die Farbe und die Deckkraft jeder Layout-Hilfslinie ändern.
Größe
Die Größe bestimmt die Pixelgröße jedes Quadrats des Rasters.
Zum Beispiel enthält in einem Standard-10pt-Raster jedes Quadrat des Rasters 10px mal 10px, insgesamt 100 Pixel pro Quadrat.
Spalte und Zeile
Spalten sind vertikale Führungslinien, die sich über die Höhe eines Frames erstrecken. Zeilen sind horizontale Führungslinien, die sich über die Breite eines Frames erstrecken. Beide sind ideal für das Entwerfen von responsiven Benutzeroberflächen für Web und Mobilgeräte.
Sowohl Spalten als auch Zeilen haben ähnliche Eigenschaftstypen, die du anpassen kannst.
Farbe
Die Standardfarbe einer Layout-Hilfslinie ist Rot (#FF0000) mit einer Deckkraft von 10 %. Du kannst die Farbe und die Deckkraft jeder Layout-Hilfslinie ändern.
Anzahl
Anzahl bestimmt die Anzahl der Spalten oder Zeilen in deinem Guide.
Klicke in das Feld, um eine Zahl einzugeben, oder verwende die Dropdown-Liste, um eine Zahl auszuwählen, eine Variable anzuwenden, falls verfügbar, oder Automatisch auszuwählen.
Typ
- Spaltentypen: Links, Mitte, Rechts oder Strecken.
- Zeilen -Typen: Oben, Mitte, Unten oder Dehnen.
Stretch erlaubt es, die Breite der Spalten oder die Höhe der Zeilen anzupassen, wenn immer der Frame eine Größenänderung erfährt. Wenn dieser Typ ausgewählt ist, ist das Breiten- oder Höhenfeld im Einstellungsfenster der Layout-Hilfslinie deaktiviert und auf Auto gesetzt. Stretch hat auch eine einzigartige Einstellung namens Abstand.
Die übrigen Spalten- und Zeilentypen (links, rechts, oben, unten und Mitte) werden manchmal als „Fixiert“ bezeichnet. Diese Einstellung bestimmt die Seite des Frames, von der aus die Layout-Hilfslinie beginnt.
Ein Beispiel: Eine Spalte mit dem fixierten Typ Rechts bedeutet, dass die Spalte von der rechten Seite des Frame aus beginnt und sich nach links erstreckt.
Mit fixierten Layout-Guides hast du die Möglichkeit, die Breite der Spalten oder Höhe der Zeilen sowie deren Versatz festzulegen.
Höhe/Breite
Stelle die Höhe von Zeilen oder die Breite von Spalten ein, um deren genaue Größe in Pixeln (px) zu definieren. Nur für fixierte Typen verfügbar (links, rechts, oben, unten und Mitte). Das Feld Höhe/Breite ist deaktiviert und auf automatisch gestellt für Strecktypen.
Offset (Nur fixierter Typ)
Die Offset-Einstellung definiert die Pixelposition, an der Spalten und Zeilen beginnen. Offset ist verfügbar für Spalten, die auf links oder rechts eingestellt sind, und für Zeilen, die auf oben oder unten eingestellt sind.
Zum Beispiel, wenn du eine Zeilen-Layout-Hilfslinie auf Unten mit einem Versatz von 16 setzen, beginnt die erste Zeile deiner Layout-Hilfslinie 16px vom unteren Rand des Frames entfernt.
Rand (nur für Strecktyp)
Abstand definiert, wie viel Platz zwischen den Seiten deiner Spalten oder Reihen und dem Frame in Pixel (px) ist. Diese Einstellung ist nur für den Strecktyp verfügbar.
Spaltenabstand (Nur Strecktyp)
Spaltenabstand definiert, wie viel Platz zwischen jeder Spalte oder Zeile und dem Frame in Pixeln (px) ist. Diese Einstellung ist nur für den Strecktyp verfügbar.
Eine Layout-Hilfslinie hinzufügen und bearbeiten
Du kannst jedem Frame eine Layout-Hilfslinie hinzufügen. Denke daran, dass Komponenten auch Frames sind, also kannst du sie auch zu Komponenten hinzufügen.
Um eine Layout-Hilfslinie hinzuzufügen:
- Wähle einen Frame aus.
- Klicke auf Layout-Hilfslinie hinzufügen im Layout-Hilfslinien -Abschnitt der rechten Seitenleiste. Standardmäßig wird ein einheitliches Raster auf den Rahmen angewendet.
Um eine Layout-Hilfslinie zu bearbeiten, kannst auf das Layout-Hilfslinien-Einstellungen-Icon klicken, um den Typ der Layout-Hilfslinie zu ändern und die Einstellungen anzupassen.
Tipp: Du kannst eine Layout-Hilfslinie allein nutzen oder mehrere Layout-Hilfslinien kombinieren, um komplexere Layouts zu unterstützen. Hier erfährst du mehr über das Kombinieren von Layout-Hilfslinien.
Layout-Hilfslinien kombinieren
Wie oben erwähnt, kannst du viele Layout-Hilfslinien zu einem einzelnen Frame hinzufügen. Dies ist nützlich bei der Entwicklung komplexerer Layouts.
Zum Beispiel kannst du sowohl Spalten- als auch Zeilen-Layout-Hilfslinien hinzufügen, um die vertikale und horizontale Ausrichtung besser zu steuern.
- Wähle den Frame aus, dem du eine weitere Layout-Hilfslinie hinzufügen möchtest.
- Klicke in der rechten Seitenleiste auf neben der Layout-Hilfslinie.
- Wähle in der Dropdown-Liste die Layout-Hilfslinie aus.
- Definiere alle anderen relevanten Eigenschaften.
- Wiederhole, um dem Frame weitere Layout-Hilfslinien hinzuzufügen.
Layout-Hilfslinien ausblenden oder anzeigen
Du kannst die Sichtbarkeit deiner Layout-Hilfslinien umschalten. Dies ist ideal für Situationen, in denen du deine Layout-Hilfslinien ausblenden musst, ohne sie vollständig zu entfernen. Layout-Hilfslinien funktionieren auch dann, wenn sie nicht sichtbar sind.
Um die Sichtbarkeit aller Layout-Hilfslinien in einer Datei gleichzeitig ein- oder auszublenden:
- Öffne die Zoom/Ansichtsoptionen-Dropdown-Liste oben in der rechten Seitenleiste.
- Klicke auf Layout-Hilfslinien, um die Einstellung ein- (aktiviert) oder auszuschalten (deaktiviert). Oder du drückst Umschalt + G auf deiner Tastatur.
Um eine bestimmte Layout-Hilfslinie ein- oder auszublenden:
- Wähle den Frame aus, in dem die Layout-Hilfslinie existiert.
- Suche im Layout-Hilfslinien-Abschnitt der rechten Seitenleiste die Layout-Hilfslinie, die du umschalten möchtest, und klickst auf / , um sie ein-/auszublenden.
Layout-Hilfslinien-Stile erstellen und anwenden
Nachdem du die ideale Layout-Hilfslinie perfektioniert hast, kannst du einen Stil erstellen, um sie in deinen Designs wiederzuverwenden.
Hier erfährst du mehr über das Erstellen von Stilen.
Erstelle einen Layout-Hilfslinien-Stil
Um einen neuen Layout-Hilfslinien-Stil zu erstellen:
- Wähle in der Arbeitsfläche einen Frame mit angewendeten Layout-Hilfslinien aus.
- Klicke in der rechten Seitenleiste auf Stile anwenden im Layout-Hilfslinien-Abschnitt.
- Klicke auf Stil erstellen.
- Gib dem Layout-Hilfslinien-Stil einen Namen und eine Beschreibung.
- Klicke auf Stil erstellen.
Layout-Hilfslinien-Stil anwenden
Um einen Layout-Hilfslinien-Stil anzuwenden:
- Erstelle einen Frame oder wähle einen in der Arbeitsfläche aus.
- Klicke in der rechten Seitenleiste auf Stile anwenden im Layout-Hilfslinien-Abschnitt.
- Wähle einen Layout-Hilfslinien-Stil aus der Liste aus, um ihn auf den Frame anzuwenden.
Hinweis: Verwandte Komponenten kannst du wie folgt erstellen:
- Wähle den zu kopierenden Frame aus.
- Klicke in der rechten Seitenleiste auf die Layout-Hilfslinie.
- Wenn sie markiert ist, verwende die Tastenkombinationen, um die Layout-Hilfslinie zu kopieren:
- Mac: ⌘ Command /
- Windows: Strg C
- Wähle den Frame aus, auf den die Layout-Hilfslinie angewendet werden soll.
- Füge die Layout-Hilfslinien mit der Tastenkombination ein:
- Mac: ⌘ Command /
- Windows: Strg V
Layout-Hilfslinien und Einschränkungen verwenden
Bei komplexeren Designs sind Präzision und Flexibilität wichtig, damit sie sich ordnungsgemäß an unterschiedliche Bildschirmformate anpassen.
Einschränkungen sind ideal, um Ihnen ein Grundgerüst für die Positionierung von Objekten innerhalb eines Frames zu geben. In Kombination mit Layout-Hilfslinien bieten sie das Gerüst für ein leistungsstarkes Layout-System.
Hier erfährst du mehr über das Kombinieren von Hilfslinien und Einschränkungen.
8-Punkt-Rastersystem
Das 8-Punkt-Rastersystem ist ein beliebtes Werkzeug für das Design von Benutzeroberflächen. Für die Platzierung von Objekten in einem Design werden Vielfache von 8 verwendet.
Dies ist hilfreich, wenn du Layouts für Formate mit festen Einschränkungen entwickelst, beispielsweise mobile Apps. Du kannst damit aber auch responsive Layouts erstellen.
Für die Implementierung des 8-Punkte-Systems gibt es zwei gängige Methoden:
- Festes Raster: Hierbei werden Objekte auf einem festen 8-Punkt-Raster platziert. In Figma müsste dafür ein einheitliches Raster der Größe 8 auf den Rahmen angewendet werden.
- Weiches Raster: Dabei werden Objekte in Abständen zueinander platziert, die durch 8 teilbar sind. Dies würde beinhalten, eine Zeilen- oder Spalten-Layout-Hilfslinie mit Eigenschaften anzuwenden, die durch 8 teilbar sind.
Erfahre mehr über das 8-Punkt-Raster in diesem Spec.fm-Beitrag.
Häufig gestellte Fragen
Kann ich alle Layout-Hilfslinien gleichzeitig ein- oder ausblenden?
Ja. Dies ist in Figma rechts oben im Menü „Ansichtseinstellungen“ möglich.
Erfahre mehr im Abschnitt zum Ein- und Ausblenden von Layout-Hilfslinien.
Warum werden meine Layout-Hilfslinien nicht angezeigt?
Es kann verschiedene Gründe haben, warum eine Layout-Hilfslinie nicht angezeigt wird:
- Die Layout-Hilfslinie wurde in der rechten Seitenleiste deaktiviert.
- Layout-Hilfslinien wurden global deaktiviert.
- Die ausgewählte Ebene ist kein Frame. Layout-Hilfslinien können nur auf Frames angewendet werden.
- Der Frame wurde gedreht. Stelle sicher, dass die Rotation deiner Objekte auf 0º gesetzt ist, bevor du eine Layout-Hilfslinie anwendest.
Wie kopiere ich Layout-Hilfslinien?
Du kannst eine einzelne Layout-Hilfslinie kopieren und auf einen anderen Frame anwenden. Oder du kannst einen Layout-Hilfslinien-Stil erstellen, der in deinen Designs wiederverwendet werden kann.