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 Raster mit 10 Pixeln 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 auf 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 an der oberen und linken Seite des Rahmens, die Einheiten werden in Pixeln gemessen.

Hilfslinien hinzufügen

Um Hilfslinien zu erstellen, vom 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, um Präzision zu erreichen und ein organisiertes Layout zu gewährleisten. Saubere Ausrichtungen verbessern die Klarheit des Designs und die Benutzererfahrung insgesamt.