So erstellst du ein Raster in Figma – Layout leicht gemacht

Erfahren Sie, wie Sie in Figma Raster mit Layout-Rastern für Spalten, Zeilen oder Quadrate erstellen. Perfekt für UI-Design, Abstände und pixelgenaue Ausrichtung.

Erstelle beeindruckende Produktvideos und Dokus mit KI

Dieses Tutorial wurde mit Trupeer in weniger als 5 Minuten erstellt

Kostenlos erstellen

Dieser Leitfaden führt Sie durch den Prozess des Hinzufügens und Anpassen von Rasterlinien in Figma und sorgt so für ein gut organisiertes Design-Layout.
Befolgen Sie die folgenden Schritte, um Rasterlinien effizient zu Ihren Figma-Projekten hinzuzufügen.

Figma ermöglicht es Ihnen, Layout-Raster auf Frames anzuwenden, wodurch es einfacher wird, Designelemente auszurichten und zu organisieren.

1. Wählen Sie einen Frame aus

Klicken Sie auf den Frame, auf den Sie das Raster anwenden möchten. Layout-Raster sind nur für Frames verfügbar – nicht für einzelne Elemente.

2. Fügen Sie ein Layout-Raster hinzu

Gehen Sie in der rechten Seitenleiste (Design-Bereich) zum Abschnitt „Layout-Raster“, und klicken Sie auf das Symbol „+“.

3. Wählen Sie einen Rastertyp

Figma bietet drei Rastertypen an:

Raster (einheitliche Quadrate)
Spalten (nützlich für responsive Layouts)
Zeilen (gut für die horizontale Ausrichtung)

Verwenden Sie das Dropdown-Menü, um den gewünschten Rastertyp auszuwählen.

4. Passen Sie die Rastereinstellungen an

Anzahl der Spalten/Zeilen: Legen Sie die Anzahl der Spalten oder Zeilen fest.
Abstand: Passen Sie den Abstand zwischen Spalten/Zeilen an.
Rand: Legen Sie den Innenabstand zwischen dem Frame und dem Raster fest.
Ausrichtung: Wählen Sie, wie Spalten oder Zeilen ausgerichtet werden sollen:
- Spalten: Links, Mitte, Rechts oder Strecken
- Zeilen: Oben, Mitte, Unten oder Strecken
Farbe & Deckkraft: Ändern Sie die Farbe und Transparenz der Rasterlinien, passend zu Ihrem Design.

5. Raster-Sichtbarkeit umschalten

Verwenden Sie die Tastenkombination Shift + G, um das Layout-Raster jederzeit ein- oder auszublenden.

Schritt-für-Schritt-Anleitung: So erstellen Sie ein Raster in Figma

Schritt 1

Lassen Sie uns beginnen und lernen - „Wie man Rasterlinien in Figma hinzufügt“. Öffnen Sie Ihre Figma-Datei. Wählen Sie die Frame-Option aus, um einen neuen Frame zu erstellen.

Lets begin learning - 'How to add gridlines in Figma'. Open your Figma file. Select the frame option to create a new frame.

Schritt 2

Wenn Sie noch keinen Frame erstellt haben, stellen Sie sicher, dass Sie einen anlegen und seine Abmessungen entsprechend festlegen. Navigieren Sie zu den Einstellungen für das Ebenenraster.

If you haven't created a frame yet, ensure you create one and set its dimensions accordingly. Navigate to the layer grid settings.

Schritt 3

Navigieren Sie zu den Einstellungen für das Ebenenraster. Wählen Sie in den Rastereinstellungen den Rastertyp aus, den Sie bevorzugen, z. B. ein Quadratraster, und passen Sie ihn an Ihre Bedürfnisse an.

In the Navigate to the layer grid settings. In the grid settings, choose the grid type you prefer, such as a square grid, and customize it to your needs.

Schritt 4

Passen Sie die Spalten und Zeilen in den Rastereinstellungen an, damit sie Ihren Designanforderungen entsprechen.

Adjust the columns and rows within the grid settings to suit your design requirements.

Schritt 5

Nachdem Sie die Anzahl der Zeilen und Spalten festgelegt haben, fahren Sie fort, um Ihre Rasteranpassung abzuschließen.

After setting the number of rows and columns, proceed to finalize your grid customization.

Schritt 6

Klicken Sie auf „Stil erstellen“, um Ihr Raster als Datei zu speichern, wobei die Rastereinstellungen erhalten bleiben. Speichern Sie es unter dem Namen eines bestimmten Stils – damit es zum Projekt passt und Sie es in Zukunft verwenden können.

Click 'Create Style' to save your grid as a file with grid settings remaining intact. Save it with the name of a particular style - so that it makes sense for the project and you can use it in future.

Profi-Tipps, um in Figma ein Raster zu erstellen

Verwenden Sie Layout-Raster für Konsistenz:
Wählen Sie den Frame oder die Zeichenfläche aus, zu der Sie Rasterlinien hinzufügen möchten. Im rechten Bedienfeld klicken Sie im Abschnitt Layout-Raster auf das +-Symbol, um ein Raster hinzuzufügen. Dadurch bleibt Ihr Design konsistent und Elemente lassen sich präzise ausrichten.
Passen Sie den Rastertyp an:
Figma ermöglicht Ihnen, für Ihr Layout zwischen Raster, Spalten und Zeilen zu wählen. Wählen Sie Raster für ein gleichmäßiges Raster, Spalten für ein spaltenbasiertes Layout oder Zeilen für eine horizontale Struktur. Passen Sie Abstände, Anzahl und Rand an Ihre Bedürfnisse an.
Richten Sie mehrere Raster ein:
Sie können einem einzelnen Frame mehrere Raster hinzufügen. Verwenden Sie verschiedene Rastertypen, um an unterschiedlichen Aspekten Ihres Designs zu arbeiten, z. B. ein Spaltenraster für Text und ein Standardraster für die allgemeine Ausrichtung.
Verwenden Sie ein Raster für responsives Design:
Für responsives Web- oder Mobildesign verwenden Sie ein Spaltenraster und passen Sie die Breite des Rasters sowie den Steg an verschiedene Bildschirmgrößen an. Dadurch bleiben Proportionen und Lesbarkeit auf mehreren Geräten erhalten.
Raster-Sichtbarkeit umschalten:
Schalten Sie die Sichtbarkeit von Rastern mit Shift + G um. So können Sie Raster schnell ein- und ausblenden, ohne das Design zu ändern.

Häufige Fehler und wie man sie beim Hinzufügen von Rasterlinien in Figma vermeidet

Falscher Rasterabstand:
Behebung: Überprüfen Sie Ihre Rastereinstellungen noch einmal und stellen Sie sicher, dass Abstände sowie Spalten/Zeilen für Ihr Design geeignet sind. Verwenden Sie konsistente Maße, um die Ausrichtung beizubehalten.
Überladen des Frames mit Rastern:
Behebung: Vermeiden Sie es, zu viele Raster hinzuzufügen oder Raster zu verwenden, die nicht zum Inhalt passen. Bleiben Sie bei einem Rasterstil (z. B. Spalten), sofern Sie nicht einen speziellen Bedarf für unterschiedliche Raster haben.
Fehl ausgerichtete Designelemente:
Behebung: Verwenden Sie das Raster, um Ihre Elemente auszurichten, und stellen Sie sicher, dass Ihre Designelemente vollständig am Raster ausgerichtet sind. Zoomen Sie hinein, um sicherzustellen, dass alles korrekt an den Rasterlinien einrastet.
Unübersichtliches Layout für Betrachter:
Behebung: Wenn Sie für andere gestalten, stellen Sie sicher, dass Ihre Raster das Design nicht überladen. Verwenden Sie Raster nur zur Orientierung und schalten Sie sie für den finalen Export aus.
Verwirrung bei der Raster-Sichtbarkeit:
Behebung: Wenn Raster zu ablenkend sind, verwenden Sie den Deckkraftregler im Bereich Layout-Raster, um die Sichtbarkeit des Rasters zu verringern, während sie weiterhin für die Ausrichtung nützlich bleiben.

Häufig gestellte Fragen zum Hinzufügen von Gitternetzlinien in Figma

Kann ich Gitternetzlinien zu einem bestimmten Teil meines Designs hinzufügen, wie z. B. zu einem Bild?
Raster werden in Figma auf Frames und Zeichenflächen angewendet. Um das Raster auf einen bestimmten Bereich zu konzentrieren, erstellen Sie einen Frame um den gewünschten Bereich und wenden Sie das Raster auf diesen Frame an.
Wie passe ich die Rastergröße an?
Sie können die Rastergröße, den Abstand und den Zwischenraum anpassen, indem Sie die Werte im Bereich Layout-Raster im rechten Bedienfeld ändern, wenn ein Frame ausgewählt ist.
Wie blende ich die Gitternetzlinien aus, wenn ich präsentiere oder exportiere?
Schalten Sie die Gitternetzlinien einfach aus, indem Sie Shift + G drücken oder die Option Layout-Raster im rechten Bedienfeld deaktivieren, um sie aus der Ansicht und dem Export zu entfernen.
Sind Gitternetzlinien in Figma druckbar?
Nein, Gitternetzlinien werden standardmäßig nicht gedruckt oder exportiert. Sie können ihre Sichtbarkeit vor dem Exportieren Ihres Designs deaktivieren, damit sie nicht im Endergebnis erscheinen.
Kann ich Gitternetzlinien für Mobile- oder Webdesign verwenden?
Ja, Gitternetzlinien sind äußerst nützlich für Web- und Mobile-Design. Sie können Spaltenraster verwenden, um Elemente auszurichten und sicherzustellen, dass sich Ihr Design gut an verschiedene Bildschirmgrößen anpasst.
Dies ist die Schritt-für-Schritt-Anleitung zum Hinzufügen von Gitternetzlinien in Figma.
Wie nimmt man auf dem Mac den Bildschirm auf?
Um den Bildschirm auf einem Mac aufzunehmen, können Sie Trupeer AI verwenden. Es ermöglicht Ihnen, den gesamten Bildschirm aufzuzeichnen und bietet KI-Funktionen wie das Hinzufügen von KI-Avataren, Voiceover sowie Zoom-in- und Zoom-out-Effekte im Video. Mit der KI-Videoübersetzungsfunktion von trupeer können Sie das Video in über 30 Sprachen übersetzen.
Wie füge ich einem Bildschirmvideo einen KI-Avatar hinzu?
Um einem Bildschirmvideo einen KI-Avatar hinzuzufügen, müssen Sie ein KI-Bildschirmaufzeichnungstool verwenden. Trupeer AI ist ein KI-Bildschirmaufzeichnungstool, mit dem Sie Videos mit mehreren Avataren erstellen können und das Ihnen auch dabei hilft, Ihren eigenen Avatar für das Video zu erstellen.
Wie nimmt man unter Windows den Bildschirm auf?
Um unter Windows den Bildschirm aufzunehmen, können Sie die integrierte Game Bar (Windows + G) oder ein fortgeschrittenes KI-Tool wie Trupeer AI verwenden, das erweiterte Funktionen wie KI-Avatare, Voiceover, Übersetzung usw. bietet.
Wie füge ich einem Video ein Voiceover hinzu?
Um Videos ein Voiceover hinzuzufügen, laden Sie die Chrome-Erweiterung von trupeer ai herunter. Nach der Anmeldung laden Sie Ihr Video mit Ton hoch, wählen Sie das gewünschte Voiceover von trupeer aus und exportieren Sie Ihr bearbeitetes Video.
Wie zoome ich in eine Bildschirmaufnahme hinein?
Um während einer Bildschirmaufnahme hineinzuzoomen, verwenden Sie die Zoom-Effekte in Trupeer AI, mit denen Sie zu bestimmten Momenten hinein- und hinauszoomen können, um die visuelle Wirkung Ihrer Videoinhalte zu verbessern.