Tutorials

Wie man ein Raster in Figma erstellt – Layout einfach gemacht

Erfahren Sie, wie Sie in Figma Raster mit Layout-Rastern für Spalten, Zeilen oder Quadrate erstellen. Perfekt für das UI-Design, den Abstand und die pixelgenaue Ausrichtung.

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

Figma ermöglicht es Ihnen, Layout-Raster auf Frames anzuwenden, was es einfacher macht, Design-Elemente auszurichten und zu organisieren.

1. Wählen Sie ein Frame

Klicken Sie auf das Frame, auf das Sie das Raster anwenden möchten. Layout-Raster stehen nur für Frames - nicht für einzelne Elemente - zur Verfügung.

2. Fügen Sie ein Layout-Raster hinzu

Gehen Sie zur rechten Sidebar (Design-Panel), scrollen Sie zum Abschnitt Layout-Raster und klicken Sie auf das "+"-Symbol.

3. Wählen Sie einen Raster-Typ

Figma bietet drei Rastertypen an:

Raster (einheitliche Quadrate)
Spalten (nützlich für responsive Layouts)
Reihen (gut für horizontale Ausrichtungen)

Verwenden Sie das Dropdown-Menü, um Ihren bevorzugten Rastertyp auszuwählen.

4. Rastereinstellungen anpassen

Anzahl der Spalten/Reihen: Stellen Sie die Anzahl der Spalten oder Reihen ein.
Räumlichkeit: Passen Sie den Abstand zwischen Spalten/Reihen an.
Rand: Stellen Sie den Abstand zwischen dem Frame und dem Raster ein.
Ausrichtung: Wählen Sie aus, wie Spalten oder Reihen ausgerichtet sind:
- Spalten: Links, Mitte, Rechts oder Strecken
- Reihen: Oben, Mitte, Unten oder Strecken
Farbe & Opazität: Ändern Sie die Farbe und Transparenz der Rasterlinien, um sie an Ihr Design anzupassen.

5. Raster-Sichtbarkeit umschalten

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

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

Schritt 1

Lassen Sie uns lernen - 'Wie man Rasterlinien in Figma hinzufügt'. Öffnen Sie Ihre Figma-Datei. Wählen Sie die Frame-Option, um ein neues 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

Falls Sie noch kein Frame erstellt haben, stellen Sie sicher, dass Sie eines erstellen und seine Dimensionen entsprechend festlegen. Navigieren Sie zu den Layer-Rastereinstellungen.

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 Layer-Rastereinstellungen. Wählen Sie in den Rastereinstellungen den Rastertyp aus, den Sie bevorzugen, wie z. B. ein quadratisches Raster, und passen Sie es 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 Reihen in den Rastereinstellungen an, um Ihren Designanforderungen gerecht zu werden.

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

Schritt 5

Nachdem Sie die Anzahl der Reihen und Spalten festgelegt haben, fahren Sie fort, um Ihre Rasteranpassungen 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 für das Projekt sinnvoll ist 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 zur Erstellung eines Rasters in Figma

Verwenden Sie Layout-Raster für Konsistenz:
Wählen Sie das Frame oder die Arbeitsfläche, zu der Sie Rasterlinien hinzufügen möchten. Klicken Sie im rechten Panel im Abschnitt Layout-Raster auf das +-Symbol, um ein Raster hinzuzufügen. Dies stellt sicher, dass die Konsistenz in Ihrem Design gewahrt bleibt und hilft, Elemente präzise auszurichten.
Rastertyp anpassen:
Figma ermöglicht Ihnen die Wahl zwischen Raster, Spalten und Reihen für Ihr Layout. Wählen Sie Raster für ein einheitliches Raster, Spalten für ein spaltenbasiertes Layout oder Reihen für eine horizontale Struktur. Passen Sie den Abstand, die Anzahl und den Rand entsprechend Ihren Bedürfnissen an.
Mehrere Raster einrichten:
Sie können mehrere Raster zu einem einzigen Frame hinzufügen. Verwenden Sie verschiedene Rastertypen, um an verschiedenen Aspekten Ihres Designs zu arbeiten, wie z.B. ein Spaltenraster für Text und ein Standardraster für die Gesamtausrichtung.
Raster für responsives Design verwenden:
Für responsives Web- oder Mobile-Design verwenden Sie ein Spaltenraster und passen Sie die Breite und den Abstand des Rasters an, um es an verschiedene Bildschirmgrößen anzupassen. Dies hilft, Proportion und Lesbarkeit auf mehreren Geräten zu erhalten.
Raster-Sichtbarkeit umschalten:
Schalten Sie die Sichtbarkeit der Raster um, indem Sie Shift + G drücken. Dies ermöglicht es Ihnen, Raster schnell anzuzeigen und auszublenden, ohne das Design zu ändern.

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

Falscher Rasterabstand:
Beheben: Überprüfen Sie Ihre Rastereinstellungen und stellen Sie sicher, dass der Abstand sowie die Spalten/Reihen für Ihr Design geeignet sind. Verwenden Sie konsistente Maße, um die Ausrichtung aufrechtzuerhalten.
Überfüllung des Frames mit Rastern:
Beheben: Vermeiden Sie es, zu viele Raster hinzuzufügen oder Raster zu verwenden, die nicht zum Inhalt passen. Halten Sie sich an einen Rasterstil (z.B. Spalten), es sei denn, Sie haben einen spezifischen Bedarf an verschiedenen Rastern.
Fehlanschluss von Designelementen:
Beheben: Verwenden Sie das Raster, um Ihre Elemente auszurichten, stellen Sie jedoch sicher, dass Ihre Designelemente vollständig mit dem Raster ausgerichtet sind. Zoomen Sie hinein, um sicherzustellen, dass alles korrekt an den Rasterlinien einrastet.
Unklare Anordnung für Betrachter:
Beheben: 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 endgültigen Export aus.
Verwirrung durch Raster-Sichtbarkeit:
Beheben: Wenn Raster zu ablenkend sind, verwenden Sie den Opazität-Regler im Panel für Layout-Raster, um die Sichtbarkeit des Rasters zu reduzieren, während Sie sie nützlich für die Ausrichtung halten.

Häufige FAQs zum Hinzufügen von Rasterlinien in Figma

Kann ich Rasterlinien zu einem bestimmten Teil meines Designs, wie einem Bild, hinzufügen?
Raster werden auf Frames und Arbeitsflächen in Figma angewendet. Um das Raster auf einen bestimmten Bereich zu konzentrieren, erstellen Sie einen Frame um den Bereich, den Sie möchten, und wenden Sie das Raster auf dieses Frame an.
Wie passe ich die Rastergröße an?
Sie können die Rastergröße, den Abstand und den Gutter anpassen, indem Sie die Werte im Abschnitt Layout-Raster im rechten Panel ändern, wenn Sie ein Frame ausgewählt haben.
Wie blende ich die Rasterlinien beim Präsentieren oder Exportieren aus?
Schalten Sie einfach die Rasterlinien aus, indem Sie Shift + G drücken oder die Option Layout-Raster im rechten Panel deaktivieren, um sie aus der Ansicht und dem Export zu entfernen.
Sind Rasterlinien in Figma druckbar?
Nein, Rasterlinien werden standardmäßig nicht gedruckt oder exportiert. Sie können ihre Sichtbarkeit vor dem Export Ihres Designs ausschalten, um sicherzustellen, dass sie im endgültigen Ergebnis nicht erscheinen.
Kann ich Rasterlinien für Mobile- oder Webdesign verwenden?
Ja, Rasterlinien sind äußerst nützlich für Web- und Mobile-Design. Sie können Spaltenraster verwenden, um Elemente auszurichten, sodass Ihr Design gut über verschiedene Bildschirmgrößen hinweg angepasst wird.
Dies ist die Schritt-für-Schritt-Anleitung zum Hinzufügen von Rasterlinien in Figma.
Wie mache ich eine Bildschirmaufnahme auf einem Mac?
Um eine Bildschirmaufnahme auf einem Mac zu machen, können Sie Trupeer AI verwenden. Es ermöglicht Ihnen, den gesamten Bildschirm aufzunehmen und bietet KI-Funktionen wie das Hinzufügen von KI-Avataren, das Hinzufügen von Sprachausgaben, das Hinein- und Herauszoomen im Video. Mit der KI-Videoübersetzungsfunktion von trupeer können Sie das Video in über 30 Sprachen übersetzen.
Wie füge ich einen KI-Avatar zur Bildschirmaufnahme hinzu?
Um einen KI-Avatar zu einer Bildschirmaufnahme hinzuzufügen, müssen Sie ein KI-Bildschirmaufnahme-Tool verwenden. Trupeer AI ist ein KI-Bildschirmaufnahme-Tool, mit dem Sie Videos mit mehreren Avataren erstellen und Ihnen auch bei der Erstellung Ihres eigenen Avatars für das Video helfen kann.
Wie mache ich eine Bildschirmaufnahme unter Windows?
Um eine Bildschirmaufnahme unter Windows zu machen, können Sie die integrierte Spielleiste (Windows + G) oder ein fortgeschrittenes KI-Tool wie Trupeer AI nutzen, um erweiterte Funktionen wie KI-Avatare, Sprachausgaben, Übersetzungen usw. zu nutzen.
Wie füge ich Sprachausgabe zu Videos hinzu?
Um Sprachausgabe zu Videos hinzuzufügen, laden Sie die trupeer AI Chrome-Erweiterung herunter. Nach der Anmeldung laden Sie Ihr Video mit Sprache hoch, wählen die gewünschte Sprachausgabe von trupeer aus und exportieren Ihr bearbeitetes Video.
Wie zoomiere ich bei einer Bildschirmaufnahme?
Um bei einer Bildschirmaufnahme zu zoomen, verwenden Sie die Zoom-Effekte in Trupeer AI, die es Ihnen ermöglichen, in bestimmten Momenten hinein- und herauszuzoomen und die visuelle Wirkung Ihres Videoinhalts zu verstärken.