Designs für den Bildschirm müssen mit unterschiedlichsten Formaten kompatibel sein. Für ein anpassbares Design sind Präzision und Flexibilität wichtig.

Mit einem Pixelraster lassen sich Elemente präzise und kontrolliert platzieren. Durch ein Layoutraster erhalten wir die erforderliche Flexibilität für die Umsetzung des Designs.

Weitere Informationen zu Layoutrastern

• Sieh dir unsere Antworten zu häufig gestellten Fragen am Ende dieser Seite an.
• In unserem Blogbeitrag: Grid Pro Quo erfährst du mehr über die Anwendung von Layoutrastern.

Was sind Layoutraster

Layoutraster helfen dir, Objekte innerhalb eines Rahmens auszurichten.  Sie verleihen dem Design eine visuelle Struktur. Außerdem sorgen sie dafür, dass das Design über verschiedene Plattformen und Geräte hinweg logisch und konsistent bleibt.

Layoutraster basieren nicht auf dem Pixelraster. Dies bedeutet, dass sie nicht von einer bestimmten Auflösung oder Dimension abhängig sind.

Layoutraster lassen sich nur auf Rahmen anwenden. Der Rahmen kann sich auf der obersten Ebene befinden oder in einen anderen Rahmen eingebettet sein.

Mit Layoutraster kannst du:

• plattformübergreifend konsistente Designs erstellen
• Layouts einfacher und mit weniger Planung definieren
• schneller Layouts für (Drahtgitter-)Modelle erstellen
• verschiedene Layouttechniken wie Galerien, Symbole oder ganze Seitenlayouts nutzen

Layoutraster anwenden

Du kannst ein Layoutraster auf jeden beliebigen Rahmen anwenden. Vergiss nicht, dass Komponenten ebenfalls Rahmen sind, du also auch auf sie Layoutraster anwenden kannst.

Die Einstellungen für das Layoutraster findest du in der rechten Seitenleiste:.

So wendest du ein Layoutraster an:

1. Wähle auf der Arbeitsfläche den Rahmen oder in der linken Seitenleiste den Ebenen-Tab aus:
2. Klicke in der rechten Seitenleiste neben Layout grids (Layoutraster) auf : .
3. Standardmäßig wird ein einheitliches Raster auf den Rahmen angewendet:.
4. Anschließend kannst du auf  klicken, um die Einstellungen für das Layoutraster zu öffnen und die gewünschten Anpassungen vorzunehmen:.

Eigenschaften des Layoutrasters

Es stehen drei Arten von Layoutrastern zur Verfügung: ein einheitliches Raster, Spalten und Zeilen.

Mit einheitlichen Rastern kannst du sowohl die Größe als auch die Farbe des Rasters definieren. Quadratische Raster eignen sich hervorragend, wenn Präzision wichtig ist, wie etwa beim Entwerfen von Icons.

Bei Spalten- und Zeilenrastern kannst du die Breite oder Höhe des Rasters sowie den Bundsteg und die Ränder definieren. Sie eignen sich ideal für die Gestaltung reaktionsschneller Benutzeroberflächen für das Web und mobile Geräte.

Du kannst Raster eigenständig verwenden oder kombinieren, um komplexere Layouts zu unterstützen.

Hier erfährst du mehr über das Kombinieren von Layoutrastern ↓

Layoutraster ändern

So wählst du den Rastertyp aus:

1. Klicke in der rechten Seitenleiste auf :
2. Klicke im Eigenschaftenfenster des Layoutrasters auf :.
3. Du kannst Folgendes wählen:
   • Ein einheitliches Raster
   • Ein Raster mit Spalten
   • Ein Raster mit Zeilen

Einheitliche Rastereigenschaften

Wenn du ein einheitliches Raster auswählst, kannst du die Rastergröße festlegen. Anhand derer wird die Pixelanzahl pro Quadrat bestimmt.

Beispiel: In einem Standardraster mit 10 pt enthält jedes Quadrat 100 Pixel (10 x 10 Pixel).

1. Klicke auf , um die Einstellungen des Layoutrasters zu öffnen.
2. Passe das Feld Size (Größe) an die gewünschten Abmessungen an: 
3. Klicke auf , um das Fenster zu schließen und zur Arbeitsfläche zurückzukehren: 

Spalten- und Zeileneigenschaften

Du kannst für Layoutraster das Spalten- oder Zeilenformat oder beides verwenden. Durch Spalten- und Zeilenraster erhältst du mehr Kontrolle und Flexibilität über dein Layout.

Du kannst die folgenden Eigenschaften des Rasters definieren:

Rastereigenschaften

• Mit Count (Anzahl) legst du die Anzahl der Spalten oder Zeilen im Raster fest.
• Mit Gutter (Bundsteg) definierst du den Abstand zwischen den einzelnen Spalten oder Zeilen.
• Mit Margin (Rand) gibst du den Abstand der Spalten oder Zeilen vom Rand an. Dies gilt nur für Raster vom Typ Stretch (Gestreckt).
• Mit Offset (Versatz) gibst du den Abstand der ersten Spalte oder Zeile vom oberen oder linken Rand an. Dies gilt für oben ausgerichtete Zeilen und linksbündige ausgerichtete Spalten.

Rastertyp

Es gibt zwei verschiedene Arten von Layoutrastern: Fixed (Fest) und Stretchy (Gestreckt).

Bei festen Layoutrastern kannst du bei Spalten die Einstellung Width (Breite) und bei Zeilen Height (Höhe) sowie bei beidem Count (Anzahl) festlegen.

Das Layoutraster kann wie folgt fixiert werden:

• Für Rows (Zeilen) kannst du Top (Oben) oder Center (Zentriert) wählen.
• Für Columns (Spalten) kannst du Left (Links) oder Center (Zentriert) wählen.

Raster vom Typ Stretchy (Gestreckt) passen sich an die Größe des Rahmens an. Dadurch kann sich das Design bei einer Änderung der Rahmengröße entsprechend anpassen.

Die Werte für Width (Breite) und Height (Höhe) des Rasters werden automatisch anhand der Rahmengröße festgelegt.

Farbe

Die Standardfarbe eines Layoutrasters ist Rot (#FF0000) mit einer Deckkraft von 10 %.

Du kannst die Werte Color (Farbe) und Opazität (Deckkraft) des Layoutrasters ändern:

1. Klicke in der rechten Seitenleiste auf .
2. Klicke auf das Feld Color (Farbe): 
3. Wähle in der Farbpalette eine andere Farbe aus:
4. Passe bei Bedarf die Deckkraft an.

Layoutraster kombinieren

Wie bereits erwähnt, kannst du auf einen Rahmen mehrere Layoutraster anwenden. Dies ist vor allem bei komplexeren Layouts praktisch.

Beispiel: Du kannst als Rastertyp sowohl Column (Spalte) als auch Row (Zeile) anwenden, um die vertikale und horizontale Ausrichtung besser zu steuern.

1. Wähle den Rahmen aus, dem du ein Layoutraster hinzufügen möchtest.
2. Klicke in der rechten Seitenleiste neben Layout grids (Layoutraster) auf .
3. Wähle in der Dropdown-Liste das Layoutraster aus.
4. Definiere alle anderen relevanten Eigenschaften.
5. Wiederhole diesen Vorgang, um dem Rahmen weitere Layoutraster hinzuzufügen.

Layoutraster ein- oder ausblenden

Du kannst Layoutraster ein- und ausblenden. Dies eignet sich hervorragend, wenn ein Layoutraster nicht sichtbar sein soll, du es aber nicht vollständig entfernen willst.

Layoutraster funktionieren auch dann, wenn sie nicht sichtbar sind.

Alle Layoutraster ein- oder ausblenden

Du kannst alle Layoutraster in der Datei gleichzeitig ein- oder ausblenden.

1. Klicke oben rechts im Bildschirm auf den Prozentwert für den Zoom. Dadurch wird das Menü „View Settings“ (Ansichtseinstellungen) geöffnet.
2. Wenn die Option Layout grids (Layoutraster) deaktiviert ist und du darauf klickst, werden die Raster eingeblendet.
3. Wenn die Option bereits aktiviert ist, werden die Raster durch Klicken auf Layout grids (Layoutraster) ausgeblendet:
4. Du kannst Layoutraster auch mit den Tastenkombinationen ein- und ausblenden:
   • Mac: ⌃ Control – G
   • Windows: Strg + Umschalt + 4

Einzelne Layoutraster ein- und ausblenden

Wenn du ein einzelnes Layoutraster ein- oder ausblenden möchtest, kannst du dies im Eigenschaften-Bedienfeld tun.

1. Wähle den entsprechenden Rahmen aus.
2. In der rechten Seitenleiste findest du den Abschnitt Layout grids (Layoutraster).
3. Klicke auf , um es auszublenden:
4. Klicke neben dem Layoutraster auf , um das Layoutraster einzublenden: 

Layoutrasterstile

Nachdem du das gewünschte Layoutraster festgelegt hast, kannst du einen Stil erstellen und deine Designs anwenden.

Hier erfährst du mehr über das Erstellen von Stilen →

Layoutstil erstellen

1. Wähle in der Arbeitsfläche einen Rahmen mit einem oder mehreren Layoutrastern aus.
2. Klicke in der rechten Seitenleiste auf  am Abschnitt Layout grid (Layoutraster).
3. Klicke im Fenster Grid styles (Rasterstile) auf :
4. Weise dem Layoutrasterstil einen aussagekräftigen Namen zu: 
5. Klicke auf Create style (Stil erstellen), um den Vorgang abzuschließen.

Layoutstil anwenden

1. Erstelle einen Rahmen oder wähle einen in der Arbeitsfläche aus.
2. Klicke in der rechten Seitenleiste auf .
3. Wähle im folgenden Fenster einen Layoutrasterstil aus:
4. Das Layoutraster wird auf den ausgewählten Rahmen angewendet: 

Raster und Einschränkungen verwenden

Bei komplexeren Designs sind Präzision und Flexibilität wichtig, damit sie sich ordnungsgemäß an unterschiedliche Bildschirmformate anpassen.

Mit Einschränkungen kannst du das Grundgerüst für die Positionierung der Objekte in einem Rahmen schaffen. Zusammen mit Layoutrastern bilden sie den Rahmen für ein leistungsfähiges Layoutsystem.

Hier erfährst du mehr über das Kombinieren von Rastern und Einschränkungen →

8-Punkt-Raster

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 reaktionsschnelle Layouts erstellen.

Für die Implementierung des 8-Punkte-Systems gibt es zwei gängige Methoden:

• Hard grid (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.
• Soft grid (Flexibles Raster): Hiermit werden Objekte in Abständen zueinander platziert, die durch 8 teilbar sind. Hierfür müsste ein Zeilen- oder Spaltenlayoutraster mit Eigenschaften angewendet werden, die durch 8 teilbar sind.

In diesem Spec.fm-Beitrag erfährst du mehr über 8-Punkt-Raster →

Häufig gestellte Fragen

Kann ich alle Layoutraster gleichzeitig ein- oder ausblenden?

Ja. Dies ist in Figma rechts oben im Menü „View Settings“ (Ansichtseinstellungen) möglich.

Im Abschnitt zum Ein- und Ausblenden von Layoutrastern erfährst du mehr ↑

Warum werden meine Layoutraster nicht angezeigt?

Es kann verschiedene Gründe haben, warum ein Layoutraster nicht angezeigt wird:

• Das Layoutraster wurde in der rechten Seitenleiste deaktiviert.
• Das Layoutraster wurde global deaktiviert.
• Die ausgewählte Ebene ist kein Rahmen. Layoutraster können nur auf Rahmen angewendet werden.
• Der Rahmen wurde gedreht. Achte darauf, dass die Einstellung Rotation (Drehung) der Objekte auf 0º gesetzt ist, bevor du ein Layoutraster anwendest.

Wie kopiere ich Layoutraster?

Du kannst ein einzelnes Layoutraster kopieren und auf einen anderen Rahmen anwenden. Oder du erstellst einen Layoutrasterstil verwendest ihn in späteren Designs wieder.

Hier erfährst du mehr über Layoutrasterstile ↑