Suchen Sie nach Informationen zum Ausrichten von Design-Elementen mithilfe von Hilfslinien und Rastern? Dann sind Sie hier genau richtig.

Bei der Arbeit an Ihren Designs können Sie Hilfslinien verwenden, um Objekte anzuordnen oder den Abstand zwischen Elementen auf einer Zeichenfläche zu verwalten. Raster dienen als Rahmen, auf dem Sie Ihre Gestaltungselemente (Bilder, Glyphen, Absätze) organisieren und die Symmetrie des Layouts sicherstellen können.

Was sind Hilfslinien?
Hilfslinien in XD
Was sind Raster?
Layoutraster und Rasterkästchen in XD

Hallo, ich bin Jeanee! Leitende visuelle Designerin, die in XD an einem UX-Design-Projekt mit mehreren Zeichenflächen und Objekten arbeitet.

persona-jeanee_guidesandgrids
 
  • Sie sucht nach Ressourcen, um mithilfe von Hilfslinien Objekte schnell zu layouten und zu positionieren.

 

  • Sie benötigt Hilfe beim Ausrichten und Definieren der Objektstruktur innerhalb des Design-Projekts mit Hilfe von Rastern.

Kommt Ihnen das bekannt vor? Wenn Sie vor solchen Herausforderungen stehen, lesen Sie weiter, um zu erfahren, wie Sie Hilfslinien und Raster in Ihren Zeichenflächen erstellen und verwenden können.

Lernen Sie die Grundlagen des Programms kennen.

Jetzt testen

Beispieldatei abrufen

.xd; 7 MB

Vorbereitung

Hilfslinien erstellen und verwalten

Nachdem Ihre Zeichenflächen auf der Design-Arbeitsfläche angeordnet sind, wird auf Ihren Zeichenflächen oben und links jeweils ein Bereich hinzugefügt, aus dem Sie Hilfslinien herausziehen können. Sie können Objekte schnell an den horizontalen und vertikalen Mittelpunkten ausrichten, zwischen Zeichenflächen kopieren und einfügen, entfernen sowie ihre Sichtbarkeit ein- und ausschalten.

Lesen Sie weiter, um zu erfahren, wie Sie Hilfslinien erstellen und verwalten.

Hilfslinien erstellen

Sie möchten Objekte innerhalb Ihrer Zeichenflächen von oben nach unten ausrichten und positionieren? Dafür verwenden Sie vertikale Hilfslinien. Wenn Sie Objekte von links nach rechts ausrichten und positionieren möchten, verwenden Sie horizontale Hilfslinien. 

Vertikale Hilfslinien

Hilfslinien zu Zeichenflächen hinzufügen

Um eine vertikale Hilfslinie zu erstellen, führen Sie den Mauszeiger über den linken Rand der Zeichenfläche, bis das Symbol  erscheint. Ziehen Sie das Symbol bei gedrückter Maustaste auf die gewünschte Position.

Horizontale Hilfslinien

Hilfslinien zu Zeichenflächen hinzufügen

Um eine horizontale Hilfslinie zu erstellen, führen Sie den Mauszeiger über den oberen Rand der Zeichenfläche, bis das Symbol  erscheint. Ziehen Sie die Hilfslinie per Drag & Drop auf die gewünschte Position.

Hilfslinien kopieren und einfügen

Nachdem Sie die Hilfslinien erstellt haben, können Sie die Option Hilfslinien kopieren und einfügen verwenden, um sie schnell zu duplizieren.

Hilfslinien kopieren

Hilfslinien in einer Zeichenfläche kopieren

Um die Hilfslinien einer Zeichenfläche zu kopieren, wählen Sie die Zeichenfläche aus und wählen Sie Ansicht > Hilfslinien > Hilfslinien kopieren.

Hilfslinien einfügen

Hilfslinien in eine Zeichenfläche einfügen

Um die kopierten Hilfslinien einzufügen, wählen Sie Ansicht oder klicken mit der rechten Maustaste auf die Zeichenfläche und wählen Hilfslinien > Hilfslinien einfügen.

Hilfslinien entfernen

Sie können eine oder mehrere Hilfslinien entfernen.

Hilfslinien löschen, die zu einer Zeichenfläche hinzugefügt wurden

Um nur eine Hilfslinie zu entfernen, klicken Sie darauf und ziehen die Hilfslinie auf eine Stelle außerhalb der Zeichenfläche.

Mehrere Hilfslinien lassen sich aus einer Zeichenfläche entfernen, indem Sie die Zeichenfläche auswählen, mit der rechten Maustaste darauf klicken und dann  Hilfslinien > Hilfslinien löschen wählen.

Hilfslinien ausblenden und sperren

Sie möchten die Hilfslinien nur vorübergehend ausblenden und bei Bedarf wieder sichtbar machen? Verwenden Sie die Option Alle Hilfslinien ausblenden.

Sie können sich auch dafür entscheiden, Hilfslinien auf allen Zeichenflächen zu sperren, um zu verhindern, dass sie versehentlich verschoben oder verstellt werden.

So lassen sich Hilfslinien auf macOS und Windows ausblenden und sperren:

Hilfslinien ausblenden

Hilfslinien ausblenden
  • Wählen Sie oben in der Menüleiste Ansicht > Alle Hilfslinien ausblenden. Auf macOS können Sie auch Cmd + ; drücken, um die Hilfslinien auszublenden.
  • Klicken Sie mit der rechten Maustaste auf die Zeichenfläche und wählen Sie Hilfslinien > Alle Hilfslinien ausblenden. auf Windows können Sie auch Strg + ; drücken, um die Hilfslinien auszublenden.

Hilfslinien sperren

Alle Hilfslinien einer Zeichenfläche sperren
  • Wählen Sie oben in der Menüleiste Ansicht > Alle Hilfslinien sperren. Auf macOS können Sie auch Cmd + Umschalt + ; drücken, um die Hilfslinien zu sperren.
  • Klicken Sie mit der rechten Maustaste auf die Zeichenfläche und wählen Sie Hilfslinien > Alle Hilfslinien ausblenden. Auf Windows können Sie auch Strg + Umschalt + ; drücken, um die Hilfslinien zu sperren.

Objekte mit intelligenten Hilfslinien automatisch ausrichten

Nun, da Sie mit den Grundlagen der Erstellung und Verwaltung von Hilfslinien vertraut sind, können Sie intelligente Hilfslinien verwenden, um die Hilfslinien beim Erstellen oder Manipulieren von Objekten oder Zeichenflächen vorübergehend zur automatischen Ausrichtung zu nutzen. 

Intelligente Hilfslinien

Intelligente Hilfslinien sind standardmäßig aktiviert. Wenn Sie ein Objekt oder eine Zeichenfläche verschieben, können Sie mithilfe von intelligenten Hilfslinien Objekte oder Zeichenflächen relativ zu den anderen Objekten und/oder Zeichenflächen ausrichten, bearbeiten oder transformieren.

Objekte mit Hilfe von Rastern positionieren

Nachdem Sie nun wissen, wie Sie in XD mit Hilfslinien arbeiten, lernen Sie, wie Sie die Design-Struktur definieren und Objekte innerhalb Ihrer Zeichenfläche mithilfe von Layoutrastern oder Rasterkästchen ausrichten. 

Um Layoutraster oder Rasterkästchen hinzuzufügen, wählen Sie eine oder mehrere Zeichenflächen aus. Wählen Sie im Eigenschafteninspektor im Bereich Raster aus der Dropdown-Liste entweder Layout oder Rasterkästchen aus.

Layoutraster

Objekte innerhalb von Layoutrastern positionieren

Layoutraster sind Spaltenraster, die beim Ausrichten von Design-Objekten oder beim Design für verschiedene Bildschirmgrößen nützlich sind. Sie können sie einfach und schnell an Ihre Bedürfnisse anpassen.

Rasterkästchen

Rasterkästchen positionieren

Rasterkästchen haben horizontale und vertikale Linien zur präzisen Größenanpassung und Ausrichtung von Objekten beim Design mobiler Apps oder Symbole.

Rastereinstellungen festlegen

Nachdem Layoutraster oder Rasterkästchen für die Zeichenflächen definiert wurden, können Sie die Anzeigeoptionen für die Raster personalisieren, indem Sie im Eigenschafteninspektor im Bereich „Raster“ die Einstellungen anpassen. Im Folgenden erfahren Sie, wie Sie die Rastergröße, die Spaltenanzahl und ‑abstände sowie die Ränder für Ihre Raster ändern können.

Einstellungen für Rasterkästchen

Basierend auf Ihren Design-Anforderungen können Sie die Rastergröße für Rasterkästchen ändern.

Größe der Rasterkästchen ändern

Die Rastergröße ist der Abstand zwischen den Rasterlinien bei Rasterkästchen. Um diesen Wert zu ändern, geben Sie im Eigenschafteninspektor im Feld Rastergröße die gewünschte Größe ein.

Einstellungen für das Layoutraster

Wenn ein Layoutraster auf eine Zeichenfläche angewendet wird, können Sie im Eigenschafteninspektor im Bereich „Raster“ den Spaltenabstand und die Spaltenbreite sowie die Breite des Rands festlegen.

Anzahl der Spalten ändern

Anzahl der Spalten im Layoutraster ändern

Geben Sie den Wert in das Feld Spalten ein. Für Webdesigns werden üblicherweise 12- oder 16-Spalten-Raster verwendet. 

Spaltenbreite und ‑einstellungen ändern

Abstandseigenschaften im Layoutraster ändern

Um die Breite der Spalten zu ändern, geben Sie den Wert in das Feld Spaltenbreite ein. Sie können einen eigenen Abstand festlegen, indem Sie den Standardwert im Feld Spaltenabstand bearbeiten. 

Nachdem Sie nun die Anzahl der Spalten, den Spaltenabstand und die Spaltenbreite geändert haben, erfahren Sie, wie Sie die Ränder der Zeichenfläche anpassen können. Ränder sind der Abstand zwischen dem Layoutraster und dem Rand der Zeichenfläche. Lesen Sie weiter, um zu erfahren, wie die Ränder auf allen Seiten angepasst werden können.

Verknüpften linken oder rechten Rand ändern

Linker und rechter Rand gleich breit

Um einen gleich großen Rand für die linken und rechte Seite festzulegen, klicken Sie auf das Symbol  und geben den Wert für die Randbreite ein.

Rand auf allen vier Seiten

Rand auf allen vier Seiten

Um den linken, rechten, oberen und unteren Rand individuell anzupassen, klicken Sie auf das Symbol  und geben Sie dann die Werte für die jeweilige Randbreite ein.

Mehr Möglichkeiten mit Rastern

Jetzt, da Sie wissen, wie Sie Einstellungen für Raster vornehmen können, lesen Sie weiter, um zu erfahren, wie Sie Rasterfarben hinzufügen und deren Sichtbarkeit steuern können.

Farben hinzufügen

Sie möchten das Aussehen der Raster ändern? Verwenden Sie die Farbauswahl im Eigenschafteninspektor, um die Rasterfarbe zu ändern.

Farben zu Layoutrastern und Rasterkästchen hinzufügen
A. Farbauswahlfeld B. Farbregler C. Pipette 

Rasterkästchen: Klicken Sie auf das Feld vor der Option Kästchengröße. Layoutraster: Klicken Sie auf das Feld vor der Option Spalten. 

In der Farbauswahl können Sie folgende Einstellungen vornehmen:

  • Die Farbe über das Farbauswahlfeld und den Farbregler festlegen
  • Mithilfe des Werkzeugs „Pipette“ eine Farbe aus einer Zeichenfläche auswählen
  • Mithilfe des Alpha-Reglers die Deckkraft der Fläche bestimmen oder einen prozentualen Wert eingeben. Wenn Sie den Prozentwert auf 0 setzen, wechselt das Layoutraster in die Konturansicht

Raster ein- und ausblenden

Mit den Optionen „Layoutraster/Rasterkästchen ausblenden“ oder „Layoutraster/Rasterkästchen anzeigen“ können Sie die Sichtbarkeit von Layoutrastern und Rasterkästchen steuern.

Layoutraster ausblenden

Layoutraster ein- oder ausblenden
  • Wählen Sie Ansicht > Layoutraster ausblenden. Auf macOS können Sie auch Cmd + Umschalt + Ü drücken, um Layoutraster auszublenden.
  • Wählen Sie im Eigenschafteninspektor in der Dropdown-Liste Raster einen Rastertyp aus, und aktivieren Sie das Kontrollkästchen daneben. Auf Windows können Sie auch Strg + Umschalt + Ü drücken, um Layoutraster auszublenden.

Rasterkästchen anzeigen

Rasterkästchen ein- oder ausblenden
  • Wählen Sie Ansicht > Rasterkästchen anzeigen. Auf macOS können Sie auch Befehl + Ü drücken, um Rasterkästchen anzuzeigen.
  • Wählen Sie im Eigenschafteninspektor in der Dropdown-Liste Raster einen Rastertyp aus, und aktivieren Sie das Kontrollkästchen daneben. Auf Windows können Sie auch Strg + Ü drücken, um Rasterkästchen anzuzeigen.

Video: Wie füge ich Hilfslinien und Layoutraster hinzu?

„Nutzen Sie bei der Arbeit an Design-Projekten Hilfslinien, die Sie beim Anordnen von Objekten unterstützen und dafür sorgen, dass die Elemente die gewünschten Abstände haben“, sagt Howard Pinsky, Senior XD Evangelist.


Sie können auch die Beispieldateien herunterladen, um die Schritte parallel dazu auszuprobieren.


Tipps und Tricks

  • Um ein Objekt am Layoutraster oder an Rasterkästchen auszurichten, ziehen Sie es in die Nähe der Rasterlinien, bis eine der Objektkanten sich innerhalb der Einrastzone befindet.
  • Hilfslinien rasten an ausgewählten Objekten oder Objekten der obersten Ebene ein, die auf der Arbeitsfläche gezeichnet wurden. Um das Einrastverhalten zu deaktivieren, drücken Sie  (macOS) bzw. Strg (Windows). 
  • Um die Hilfslinie in Schritten von 10 px auf der Arbeitsfläche zu positionieren, drücken Sie die Umschalttaste.
  • Um den Standard für Rasterkästchen oder das Layoutraster wiederherzustellen, klicken Sie im Eigenschafteninspektor im Bereich „Raster“ auf die Option Standard verwenden.

Wie geht’s weiter?

Sie wissen jetzt, wie Sie Objekte in Zeichenflächen mithilfe von Hilfslinien und Rastern positionieren und ausrichten. Erfahren Sie als Nächstes, wie Sie mithilfe von Wiederholungsrastern Objekte mit sich wiederholenden Elementen erstellen.

Noch eine Frage oder Idee?

Ask the Community

Wenn Sie noch Fragen haben oder eigene Ideen weitergeben möchten, beteiligen Sie sich an unserer Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen.