Verwendung von Auto-Layout-Flüssen im Raster

Vor dem Start

Wer kann diese Funktion verwenden?

Verfügbar in allen Abos

Jede Person mit Schreibzugriff kann Auto-Layout verwenden

Das Raster ist einer der drei Auto-Layout-Flüsse, die du auf Frames anwenden kannst. Es besteht aus „Zellen“, die in Zeilen und Spalten organisiert sind, in denen du Ebenen und Assets platzieren kannst. Objekte können sich über mehrere Zellen erstrecken, und wenn die Größe eines Frames mit Raster geändert wird, reagieren die Objekte in diesen Zellen entsprechend.

Der Auto-Layout-Fluss im Raster ist ideal für die Erstellung von Designs wie Bento-Boxen, Dashboards und redaktionellen Layouts geeignet.

Glossar

• Zelle: Der Schnittpunkt zwischen einer Raster-Spalte und einer Raster-Zeile
• Zellebene oder Zellobjekt: Eine Ebene oder ein Objekt, das sich innerhalb einer Zelle befindet. Sie werden als untergeordnet betrachtet, die sich innerhalb eines Rasters befinden.
• Untergeordnet: Eine Ebene, die sich innerhalb eines Containers befindet
• Container: Eine Struktur (wie eine Zelle) oder Ebene (wie ein Frame oder eine Komponente), die andere Ebenen enthalten kann
• Eingebettet: Beschreibt eine Ebene, die sich in einem Container befindet
• Übergeordnet: Eine Ebene, d. h. Frames, Komponenten, Gruppen und Abschnitte, die andere Ebenen enthält
• Span: Die Fähigkeit eines Zellobjekts, mehrere Zellen gleichzeitig zu belegen
• Oberste Ebene: Beschreibt eine Ebene, die direkt auf der Arbeitsfläche liegt und kein übergeordnetes Element hat
• Spur: Eine einzelne Zeile oder Spalte

Spalten und Zeilen

Der Raster-Auto-Layout-Fluss fügt deinen Designs eine zweidimensionale Layout-Steuerung – Zeilen und Spalten – hinzu. Bei aktiviertem Raster in einem Frame kannst du die gewünschte Anzahl von Zeilen und Spalten auswählen, indem du auf die Rasterauswahl in der rechten Seitenleiste klickst. Gib einen Wert in das Feld „Anzahl der Spalten“ und das Feld „Anzahl der Zeilen“ ein, oder verwende den interaktiven Selektor.

Größe von Spalten und Zeilen ändern

Die Größe jeder Spalte und Zeile ist auf „Auto“ eingestellt und wird basierend darauf berechnet, wie viel Platz nach Einbeziehung anderer Abstandswerte sowie Spalten- oder Zeilengrößen verbleibt.

So änderst du die Größe einer Spur (Spalte oder Zeile):

1. Wähle den Rahmen aus.
2. Bewege den Mauszeiger über die obere oder linke Seite des Frames. Du kannst auch mit dem Mauszeiger über die gewünschte Spur fahren oder ein Element der gewünschten Spalte auswählen. Ein blauer Punkt wird angezeigt.
3. Fahre mit der Maus über den blauen Punkt und klicke auf das Label, das die Spurgröße angibt.
4. Von dort aus kannst du die Größe der Spur auf folgende Weise anpassen:
   • Automatische Größenanpassung: Um die Spur automatisch an den verfügbaren Platz anzupassen, gibst du Auto oder A ein und drückst Enter / Return
   • Spezifische Größe: Klicke den Rand der Spur an und ziehe daran, um die Größe auf einen bestimmten Wert zu ändern.

Abstand

Lücke zwischen

Lücke legt den Abstand zwischen Spalten und Zeilen fest. Du kannst dies mit den Feldern „Abstand zwischen den Zeilen“ und „Abstand zwischen den Spalten“ in der rechten Seitenleiste tun, wenn der Raster-Auto-Layout-Rahmen ausgewählt ist. Gib einen Zahlenwert in das Feld ein, ändere die Werte mit den Pfeiltasten oder passe das Feld mit dem Cursor an.

Objektabstand

Der Innenabstand steuert den leeren oder weißen Raum zwischen der Begrenzung des Auto-Layout-Rahmens und den Zellen des Rahmens. Du kannst den Innenabstand gleichmäßig vertikal und horizontal festlegen oder unterschiedliche Werte für den Innenabstand oben, rechts, unten und links wählen.

• Standard: Die Innenabstand-Steuerelemente sind standardmäßig in vertikale (oben und unten) und horizontale (links und rechts) Innenabstände unterteilt.
• Individueller Innenabstand: Klicke auf , um die Felder oben, rechts, unten und links zu verwenden.
• Einheitlicher Innenabstand oder CSS-Kurzform: Halte die ⌘ Befehlstaste oder Strg gedrückt und klicke in ein beliebiges Feld für den Innenabstand. Du kannst auch einen CSS-Code eingeben.
  • Beispiel: Die Eingabe 1,2,3,4 legt oben 1 Pixel, rechts 2 Pixel, unten 3 Pixel und links 4 Pixel fest.
  • Beispiel: Die Eingabe von 1,2 setzt oben/unten auf: 1px und links/rechts auf: 2px

Größe ändern

Die Optionen zum Ändern der Größe sind für alle untergeordneten Ebenen eines Raster-Auto-Layout-Rahmens verfügbar, einschließlich verschachtelter Raster-Auto-Layout-Rahmen. Für Auto-Layout-Rahmen der obersten Ebene, die ein Raster verwenden, sind keine Optionen zur Größenänderung verfügbar. Mehr zum Verschachteln von Auto-Layout-Rahmen

Folgende Eigenschaften zum Ändern der Größe gibt es:

• Fixierte Breite oder Höhe: Die Abmessungen des Zellobjekts oder des eingebetteten Raster-Auto-Layout-Rahmens bleiben unverändert, unabhängig von der Größe der übergeordneten Zelle oder des übergeordneten Auto-Layout-Rahmens
• Container füllen: Das Zellobjekt oder der eingebettete Raster-Frame erweitert sich, um die Breite oder Höhe der Zelle oder des übergeordneten Frames auszufüllen.

Arbeiten mit Objekten in Rasterzellen

Objekte in einem Raster hinzufügen und verschieben

• Formen, Rahmen und Textebenen erstellen: Erstelle diese Elemente direkt in einer Zelle.
• Objekte in ein Raster verschieben: Ziehe eine oder mehrere Ebenen und lege sie in eine beliebige leere Zelle oder zwischen zwei Zellen ab.
• Untergeordnete Objekte neu positionieren: Ziehe ein oder mehrere untergeordnete Objekte und legie sie in eine leere Zelle oder zwischen zwei Zellen ab.
• Vorhandene Objekte duplizieren: Wähle ein oder mehrere untergeordnete Objekte aus und verwende die Tastenkombination ⌘ Befehlstaste D für Mac und Strg D für Windows

Objekte werden nacheinander von links nach rechts und von oben nach unten platziert. Sofern nicht genügend leere Zellen verfügbar sind, positioniert Figma blockierende Objekte in verfügbare Zellen um oder erstellt neue Zeilen oder Spalten, um Platz zu schaffen.

Objekte über mehrere Zellen verteilen

Du kannst ein untergeordnetes Objekt so erweitern, dass es sich über mehrere Zellen in einem Raster erstreckt, wodurch es seine Größe anpasst, wenn das übergeordnete Objekt seine Größe ändert.

Um ein untergeordnetes Objekt zu erweitern, wähle es aus und passe seine Größe auf der Arbeitsfläche an. Wenn das Objekt bei der Größenänderung am Rand einer Zelle einrastet, wird seine Auto-Layout-Eigenschaft zur automatischen Größenänderung für das angepasste Maß (Breite oder Höhe) auf Container füllen aktualisiert.

Objekte an ihren Zellen ausrichten

Innerhalb eines Auto-Layout-Rahmens kann ein untergeordnetes Objekt an seiner Rasterzelle ausgerichtet werden.

Wähle ein untergeordnetes Objekt aus und verwende die Ausrichtungs-Schaltflächen im Abschnitt Position der rechten Seitenleiste.

• (Linksbündig)
• (Horizontal zentriert)
• (Rechtsbündig)
• (Oben ausgerichtet)
• (Vertikal zentriert)

Wenn du mehrere untergeordnete Objekte ausgewählt hast, wird jedes an seiner jeweiligen Zelle ausgerichtet.

Ausprobieren

Um praktische Übungen zu erhalten, hole dir eine Kopie unserer Community-Datei zu Raster.