Layout-Raster, Zeilen und Spalten in Figma: Strukturierung Ihrer Designs

Raster hinzufügen

Einen Rahmen auswählen und auf das Plus-Symbol im Abschnitt "Layout-Raster" des Design-Panels klicken, um ein Raster hinzuzufügen. Standardmäßig ist das Raster auf ein einheitliches 10-Pixel-Raster eingestellt.

Rastereinstellungen anpassen

• Rastertyp: Auswahl zwischen Spalten, Zeilen oder Raster;
• Anzahl: Anzahl der Spalten oder Zeilen anpassen;
• Darstellung: Farbe und Deckkraft ändern;
• Typ-Einstellungen: Spalten auf Dehnen oder Fixieren (links, zentriert oder rechts) einstellen;
• Ränder und Abstände: Abstand zwischen Rahmenkanten (Ränder) und Spalten/Zeilen (Abstände) definieren.

Erweiterte Optionen

• Mehrere Raster zu einem Rahmen hinzufügen, indem erneut auf das Plus-Symbol geklickt wird.
• Raster über das Einstellungsmenü oder das Minus-Symbol bearbeiten oder löschen.
• Vorgefertigte Rasterstile über das Vier-Punkte-Symbol anwenden oder Raster aus der Team-Bibliothek importieren.

Verwendung von Linealen und Hilfslinien in Figma

Lineale aktivieren

Lineale sind über Ansicht > Lineale oder mit der Tastenkombination Shift + R zugänglich. Sie erscheinen am oberen und linken Rand des Rahmens, die Einheiten werden in Pixeln gemessen.

Hilfslinien hinzufügen

Zum Erstellen von Hilfslinien aus dem Lineal ziehen und für die Ausrichtung positionieren. Hilfslinien können entfernt werden, indem sie zurück zum Lineal gezogen werden.

Best Practices

Raster und Hilfslinien kombinieren für Präzision und eine organisierte Gestaltung. Saubere Ausrichtungen verbessern die Designklarheit und das gesamte Nutzererlebnis.