Benutzerhandbuch Abbrechen

Verwenden von Hilfslinien und Rastern in XD

  1. Adobe XD Benutzerhandbuch
  2. Einführung
    1. Neue Funktionen in Adobe XD
    2. Häufige Fragen
    3. Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
    4. Systemanforderungen
      1. Hardware- und Softwareanforderungen
      2. Adobe XD, Big Sur und Apple silicon | macOS 11
    5. Arbeitsbereich – Grundlagen
    6. Ändern der in Adobe XD angezeigten Sprache
    7. Zugriff auf UI-Design-Kits
    8. Barrierefreiheit in Adobe XD
    9. Tastaturbefehle
    10. Tipps und Tricks
    11. Adobe XD-Abo-Varianten
    12. Änderungen am XD Starter-Abo
  3. Design erstellen
    1. Zeichenflächen, Hilfslinien und Ebenen
      1. Erste Schritte mit Zeichenflächen
      2. Verwenden von Hilfslinien und Rastern
      3. Bildlauffähige Zeichenflächen erstellen
      4. Arbeiten mit Ebenen
      5. Erstellen von Bildlaufgruppen
    2. Formen, Objekte und Pfade
      1. Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
      2. Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
      3. Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
      4. Festlegen von Strichen, Flächen und Schlagschatten für Objekte
      5. Erstellen sich wiederholender Elemente
      6. Perspektivisches Design mit 3D-Transformationen
      7. Bearbeiten von Objekten mithilfe boolescher Operationen
    3. Text und Schriften
      1. Arbeiten mit Zeichen- und Textwerkzeugen
      2. Schriften in XD
    4. Komponenten und Zustände
      1. Arbeiten mit Komponenten
      2. Arbeiten mit verschachtelten Komponenten
      3. Hinzufügen mehrerer Zustände zu Komponenten
    5. Maskierung und Effekte
      1. Erstellen einer Maske mit Formen
      2. Arbeiten mit Weichzeichnen-Effekten
      3. Erstellen und Ändern von Farbverläufen
      4. Fülleffekte anwenden
    6. Layout
      1. Responsive Resize und Bedingungen
      2. Festlegen fester Innenabstände für Komponenten und Gruppen
      3. Erstellen dynamischer Designs mit Stapeln
    7. Videos und Lottie-Animationen
      1. Arbeiten mit Videos
      2. Erstellen von Prototypen mit Videos
      3. Arbeiten mit Lottie-Animationen
  4. Prototypen erstellen
    1. Erstellen interaktiver Prototypen
    2. Animieren von Prototypen
    3. Für Auto-Animate unterstützte Objekteigenschaften
    4. Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
    5. Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
    6. Erstellen zeitgesteuerter Übergänge
    7. Hinzufügen von Overlays
    8. Sprachprototypen erstellen
    9. Erstellen von Ankerlinks
    10. Erstellen von Hyperlinks
    11. Testen von Designs und Prototypen
  5. Freigeben, Exportieren und Review
    1. Ausgewählte Zeichenflächen freigeben
    2. Freigeben von Designs und Prototypen
    3. Zugriffsberechtigungen für Links festlegen
    4. Arbeiten mit Prototypen
    5. Prototyp-Review
    6. Arbeiten mit Design-Spezifikationen
    7. Freigeben von Design-Spezifikationen
    8. Auswerten von Design-Spezifikationen
    9. Navigation in Design-Spezifikationen
    10. Reviews und Kommentarfunktion zu Design-Spezifikationen
    11. Exportieren von Design-Assets
    12. Exportieren und Herunterladen von Assets aus Design-Spezifikationen
    13. Gruppenfreigabe für Unternehmen
  6. Design-Systeme
    1. Design-Systeme mit Creative Cloud-Bibliotheken
    2. Arbeiten mit Dokumentelementen in Adobe XD
    3. Arbeiten mit Creative Cloud-Bibliotheken in Adobe XD
    4. Von verknüpften Elementen zu Creative Cloud-Bibliotheken migrieren
    5. Arbeiten mit Designtoken 
    6. Verwenden von Elementen aus Creative Cloud-Bibliotheken
  7. Cloud-Dokumente
    1. Cloud-Dokumente in Adobe XD
    2. Zusammenarbeit und Co-Editing
    3. Co-Editing bei für Sie freigegebenen Dokumenten
  8. Integrationen und Plug-ins
    1. Arbeiten mit externen Elementen
    2. Arbeiten mit Design-Elementen aus Photoshop
    3. Kopieren und Einfügen von Elementen aus Photoshop
    4. Importieren oder Öffnen von Photoshop-Designs
    5. Arbeiten mit Illustrator-Elementen in Adobe XD
    6. Öffnen oder Importieren von Illustrator-Designs
    7. Vektordateien aus Illustrator nach XD kopieren
    8. Plug-ins für Adobe XD
    9. Erstellen und Verwalten von Plug-ins
    10. Jira-Integration für Adobe XD
    11. Slack-Plug-in für XD
    12. Zoom-Plug-in für XD
    13. Designs von XD aus auf Behance freigeben
  9. XD für iOS und Android
    1. Testen der Prototypen auf iOS/Android
    2. Adobe XD unter iOS/Android – Häufige Fragen
  10. Fehlerbehebung
    1. Bekannte und behobene Probleme
      1. Bekannte Probleme
      2. Behobene Probleme
    2. Installation und Updates
      1. XD scheint unter Windows nicht kompatibel zu sein
      2. Fehlercode 191
      3. Fehlercode 183
      4. Probleme beim Installieren von XD Plug-ins
      5.  Aufforderung zur Deinstallation und erneuten Installation von XD | Windows 10
      6. Probleme mit der Migration von Einstellungen
    3. Absturz beim Programmstart
      1.  Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
      2.  XD wird beendet, wenn Sie sich von Creative Cloud abmelden
      3. Problem mit dem Abonnementstatus unter Windows
      4. Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
      5. Generierung von Absturzbildern auf Windows
      6. Sammlung und Freigabe von Absturzprotokollen
    4. Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
      1. Probleme mit XD Cloud-Dokumenten
      2. Probleme mit verknüpften Komponenten
      3. Probleme mit Bibliotheken und Links
    5. Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
      1. Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
      2. Probleme mit Arbeitsabläufen für die Veröffentlichung
      3. Veröffentlichte Links werden in Browsern nicht angezeigt
      4. Prototypen werden in Browsern nicht korrekt dargestellt
      5. Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
      6. Bibliotheken können nicht veröffentlicht werden
    6. Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
      1. Import und Export in XD
      2. Photoshop-Dateien in XD
      3. Illustrator-Dateien in XD
      4. Von XD nach After Effects exportieren
      5. Sketch-Dateien in XD
      6. Apps von Drittanbietern sind im Export nicht sichtbar

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 Jean! Leitende visuelle Designerin, die in XD an einem UX-Design-Projekt mit mehreren Zeichenflächen und Objekten arbeitet.

 
  • 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.

Jetzt testen

Beispieldatei

.xd; 6 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 hinzufügen

Hilfslinien kopieren und einfügen

Hilfslinien entfernen

Hilfslinien löschen, ausblenden und sperren

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 dann 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.

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 löschen, die zu einer Zeichenfläche hinzugefügt wurden

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 Designobjekten oder beim Design für verschiedene Bildschirmgrößen nützlich sind. Sie können sie einfach und schnell an Ihre Bedürfnisse anpassen.

Raster

Rasterkästchen positionieren

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

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.

Linker und rechter Rand gleich breit

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 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

Raster ein- oder ausblenden

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.

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 Fragen oder Ideen?

Fragen Sie die 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.

Adobe-Logo

Bei Ihrem Konto anmelden