Grids in Figma sind visuelle Hilfsraster, die auf Frames angewendet werden und Designer bei der konsistenten Ausrichtung und Proportionierung von UI-Elementen unterstützen.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Layout-Raster, Spaltenraster, Baseline Grid, Layout Grid
Was sind Grids in Figma?
Grids sind visuelle Orientierungshilfen, die direkt auf Figma-Frames angewendet werden. Sie erscheinen als überlagerte Linien oder Spalten auf der Canvas, sind aber nicht Teil des eigentlichen Designs und werden nicht exportiert. Grids helfen beim:
- Konsistenten Ausrichten von Elementen
- Einhalten von Abständen (Spacing)
- Strukturieren von Layouts nach bekannten Rastersystemen (z.B. 12-Spalten-Grid)
- Sicherstellen von Typografie-Rhythmus (Baseline Grid)
Grids können auf jeden Frame angewendet werden – von einzelnen Komponenten bis hin zu ganzen Seiten-Frames. Sie können auch als Figma: Styles – Zentral verwaltete Design-Tokens für Farben und Typografie gespeichert und wiederverwendet werden.
Erklärung
Grid-Typen in Figma
1. Column Grid (Spaltenraster) Das häufigste Raster für UI-Design. Definiert eine Anzahl von Spalten mit fester Breite, Außenabständen (Margin) und Zwischenabständen (Gutter).
Typische Konfigurationen:
- Desktop 1440px: 12 Spalten, 120px Margin, 24px Gutter
- Tablet 768px: 8 Spalten, 24px Margin, 16px Gutter
- Mobile 375px: 4 Spalten, 16px Margin, 16px Gutter
2. Row Grid (Zeilenraster) Horizontale Linien mit definiertem Abstand – nützlich für Typografie und vertikalen Rhythmus. Kann auch für Card-Höhen oder Component-Spacing eingesetzt werden.
3. Grid (Gitterraster) Ein gleichmäßiges Quadratraster – nützlich für Icon-Design, Pixelpräzision und isometrische Layouts. Standard-Einstellung: 8px oder 10px.
Das 8-Punkt-Grid-System
Das 8-Punkt-Grid ist eines der verbreitetsten Spacing-Systeme im UI-Design (ursprünglich von Google Material Design popularisiert). Das Prinzip: Alle Abstände, Größen und Positionen sind Vielfache von 8 (8, 16, 24, 32, 40, 48...).
Vorteile:
- Visuelle Konsistenz ohne Nachdenken
- Einfache Implementierung für Entwickler (CSS: margin, padding in 8px-Schritten)
- Harmonische Proportionen über verschiedene Bildschirmgrößen
In Figma wird das 8-Punkt-Grid durch ein Grid (Gitter) mit 8px Abstand oder durch konsequente Nutzung von 8px-Spacing in Figma: Auto-Layout – Dynamische Layouts ohne manuelles Ausrichten umgesetzt.
Das 12-Spalten-Raster
Das 12-Spalten-Raster ist der Standard für Web-Layouts (bekannt aus Bootstrap, CSS Grid, Tailwind). 12 ist durch 2, 3, 4 und 6 teilbar – ermöglicht sehr flexible Layouts:
- 12/12 = 100% (Vollbreite)
- 6/12 = 50% (2 gleiche Hälften)
- 4/12 = 33% (3 gleiche Drittel)
- 3/12 = 25% (4 gleiche Viertel)
- 8/12 + 4/12 = Content + Sidebar
Einrichtung in Figma:
- Frame auswählen (z.B. 1440px Desktop Frame)
- Im Design-Panel unter "Layout Grid" auf + klicken
- "Columns" auswählen
- Count: 12, Gutter: 24, Margin: 120 (oder gewünschte Werte)
Baseline Grid
Das Baseline Grid definiert den horizontalen Rhythmus der Typografie. Es basiert auf der Zeilenhöhe (Line Height) des Basis-Textelements. Bei einem Body-Text mit 16px Font-Size und 24px Line Height wäre das Baseline Grid 24px (oder 8px als gemeinsamer Teiler).
In der Praxis weniger verbreitet in Figma als in gedruckten Medien, aber nützlich für:
- Konsistente Abstände zwischen Textelementen
- Harmonische vertikale Proportionen
- Implementierungsunterstützung für Entwickler
Grids als Styles
Grids können als Figma-Styles gespeichert und geteilt werden. Ein Design-System definiert Grids für alle gängigen Breakpoints als Styles – so nutzen alle Designer des Teams automatisch die gleichen Raster. Mehr dazu im Eintrag Figma: Styles – Zentral verwaltete Design-Tokens für Farben und Typografie.
Beispiele
Beispiel 1: News-Website mit 12-Spalten-Grid Ein Nachrichtenportal nutzt ein 12-Spalten-Grid (1440px, 120px Margin, 24px Gutter). Artikel-Cards belegen jeweils 4 Spalten (3 Cards nebeneinander), der Featured Article 8 Spalten, die Sidebar 4 Spalten.
Beispiel 2: Mobile App mit 4-Spalten-Grid Eine Nachrichten-App (375px) nutzt ein 4-Spalten-Grid mit 16px Margin. Full-Width-Elemente wie Banner und Trennlinien gehen über alle 4 Spalten, Thumbnails belegen 1 Spalte.
Beispiel 3: Icon-Set mit 8px-Grid Ein Icon-Designsystem nutzt ein 8px-Gitterraster für alle 24x24px Icons. Jede Linie und Kurve der Icons folgt dem 8-Punkt-System für Pixelpräzision.
Beispiel 4: Multi-Breakpoint-Design Ein responsive Website-Design hat drei Frame-Varianten (Desktop, Tablet, Mobile) mit unterschiedlichen Grid-Styles. Ein Designsystem-Style "Grid/Desktop", "Grid/Tablet", "Grid/Mobile" macht den Wechsel mit einem Klick möglich.
In der Praxis
Grids sind eine der wichtigsten Grundlagen für professionelles Design, werden aber von Anfängern oft vernachlässigt. Einige praktische Empfehlungen:
Grid vor dem ersten Element: Immer zuerst das Grid einrichten, bevor Elemente auf dem Frame platziert werden. Nachträgliches Anpassen kostet viel Zeit.
Komponenten-Grids: Auch für größere Komponenten (Cards, Modals, Sidebars) lohnt sich ein internes Grid – besonders für konsistente innere Abstände.
Grid-Visualisierung: Mit Strg+G (Windows) oder Cmd+G (Mac) können Grids ein- und ausgeblendet werden. Regelmäßig wechseln, um zu prüfen, ob alle Elemente korrekt am Raster ausgerichtet sind.
Snap to Grid: Die Snap-Funktion in Figma richtet Elemente automatisch an Pixeln aus. Kombiniert mit einem 8px-Grid werden Elemente beim Verschieben an 8px-Schritten eingerastet.
Vergleich & Abgrenzung
Grids vs. Auto Layout: Grids sind visuelle Hilfslinien ohne automatische Ausrichtung. Figma: Auto-Layout – Dynamische Layouts ohne manuelles Ausrichten richtet Elemente tatsächlich automatisch aus und verwaltet Abstände dynamisch. In modernen Workflows ergänzen sich beide: Auto Layout für Container, Grids als visuelle Referenz.
Grids vs. Constraints: Constraints und Responsive Design in Figma definieren Verhalten bei Skalierung, Grids definieren die visuelle Struktur. Beide sind komplementär.
Figma-Grids vs. CSS Grid: Figma-Grids sind nur visuelle Hilfslinien. CSS Grid ist ein echtes Layout-System des Browsers. Sie inspirieren sich gegenseitig – ein 12-Spalten Figma-Grid lässt sich direkt in ein 12-Spalten CSS-Grid überführen.
Häufige Fragen (FAQ)
Wie speichere ich ein Grid als Style? Im Grid-Bereich des Design-Panels auf das Stil-Symbol (4 Punkte) klicken > "+ Create Grid Style" > Namen vergeben. Das Grid steht dann als Style in der Library zur Verfügung.
Können mehrere Grids auf denselben Frame angewendet werden? Ja – man kann z.B. ein Spaltenraster und ein 8px-Gitterraster gleichzeitig aktivieren. Bis zu 10 Grids pro Frame sind möglich.
Werden Grids exportiert? Nein – Grids sind nur Hilfslinien und erscheinen in keinem Export-Format.
Wie verbinde ich Figma-Grids mit CSS? Figma-Grids sind nicht direkt in CSS-Werte übersetzbar – aber die Spalten, Gutters und Margins können manuell in CSS Grid oder Flexbox umgesetzt werden. Tokens Studio (Plugin) kann Design-Tokens inklusive Grid-Werte exportieren.
Verwandte Einträge
- Figma: Auto-Layout – Dynamische Layouts ohne manuelles Ausrichten – Dynamische Ausrichtung und Abstände
- Constraints und Responsive Design in Figma – Verhalten bei Skalierung
- Figma: Styles – Zentral verwaltete Design-Tokens für Farben und Typografie – Grid-Styles speichern und teilen
- Figma: Frames vs. Groups – Grundlegende Strukturelemente im Vergleich – Frames als Grundlage für Grids
- Component Library aufbauen und verwalten in Figma – Grids im Design-System
Weiterführend
- Figma Help Center (2024): Guide to Layout Grids.
- Elliot, A. (2020): The 8-Point Grid System.
- Google Material Design (2024): Layout and Grid.
- Bootstrap Team (2024): Grid System Documentation.
