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.
Zuletzt aktualisiert am
17. Februar 2023
- Adobe XD Benutzerhandbuch
- Einführung
- Neue Funktionen in Adobe XD
- Häufige Fragen
- Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
- Farbmanagement
- Systemanforderungen
- Arbeitsbereich – Grundlagen
- Ändern der in Adobe XD angezeigten Sprache
- Zugriff auf UI-Design-Kits
- Barrierefreiheit in Adobe XD
- Tastaturbefehle
- Tipps und Tricks
- Design erstellen
- Zeichenflächen, Hilfslinien und Ebenen
- Formen, Objekte und Pfade
- Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
- Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
- Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
- Festlegen von Strichen, Flächen und Schlagschatten für Objekte
- Erstellen sich wiederholender Elemente
- Perspektivisches Design mit 3D-Transformationen
- Bearbeiten von Objekten mithilfe boolescher Operationen
- Text und Schriften
- Komponenten und Zustände
- Maskierung und Effekte
- Layout
- Videos und Lottie-Animationen
- Prototypen erstellen
- Erstellen interaktiver Prototypen
- Animieren von Prototypen
- Für Auto-Animate unterstützte Objekteigenschaften
- Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
- Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
- Erstellen zeitgesteuerter Übergänge
- Hinzufügen von Overlays
- Sprachprototypen erstellen
- Erstellen von Ankerlinks
- Erstellen von Hyperlinks
- Testen von Designs und Prototypen
- Freigeben, Exportieren und Review
- Ausgewählte Zeichenflächen freigeben
- Freigeben von Designs und Prototypen
- Zugriffsberechtigungen für Links festlegen
- Arbeiten mit Prototypen
- Prototyp-Review
- Arbeiten mit Design-Spezifikationen
- Freigeben von Design-Spezifikationen
- Auswerten von Design-Spezifikationen
- Navigation in Design-Spezifikationen
- Reviews und Kommentarfunktion zu Design-Spezifikationen
- Exportieren von Design-Assets
- Exportieren und Herunterladen von Assets aus Design-Spezifikationen
- Gruppenfreigabe für Unternehmen
- Sichern oder übertragen von XD Elementen
- Design-Systeme
- Cloud-Dokumente
- Integrationen und Plug-ins
- Arbeiten mit externen Elementen
- Arbeiten mit Design-Elementen aus Photoshop
- Kopieren und Einfügen von Elementen aus Photoshop
- Importieren oder Öffnen von Photoshop-Designs
- Arbeiten mit Illustrator-Elementen in Adobe XD
- Öffnen oder Importieren von Illustrator-Designs
- Vektordateien aus Illustrator nach XD kopieren
- Plug-ins für Adobe XD
- Erstellen und Verwalten von Plug-ins
- Jira-Integration für Adobe XD
- Slack-Plug-in für XD
- Zoom-Plug-in für XD
- Designs von XD aus auf Behance freigeben
- XD für iOS und Android
- Fehlerbehebung
- Bekannte und behobene Probleme
- Installation und Updates
- Absturz beim Programmstart
- Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
- XD wird beendet, wenn Sie sich von Creative Cloud abmelden
- Problem mit dem Abonnementstatus unter Windows
- Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
- Generierung von Absturzbildern auf Windows
- Sammlung und Freigabe von Absturzprotokollen
- Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
- Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
- Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
- Probleme mit Arbeitsabläufen für die Veröffentlichung
- Veröffentlichte Links werden in Browsern nicht angezeigt
- Prototypen werden in Browsern nicht korrekt dargestellt
- Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
- Bibliotheken können nicht veröffentlicht werden
- Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
Suchen Sie nach Informationen zum Ausrichten von Design-Elementen mithilfe von Hilfslinien und Rastern? Dann sind Sie hier genau richtig.
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.
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
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
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
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
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 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
- 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
- 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 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
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 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.
Basierend auf Ihren Design-Anforderungen können Sie die Rastergröße für 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.
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
Geben Sie den Wert in das Feld Spalten ein. Für Webdesigns werden üblicherweise 12- oder 16-Spalten-Raster verwendet.
Spaltenbreite und ‑einstellungen ä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
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
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
Sie möchten das Aussehen der Raster ändern? Verwenden Sie die Farbauswahl im Eigenschafteninspektor, um die Rasterfarbe zu ändern.
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
- 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
- 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?
