Hier erfahren Sie, wie Sie Inhalte für unterschiedliche Designs und Bildschirme auf Zeichenflächen anordnen. Raster in Zeichenflächen unterstützen Sie dabei, Ihre Designelemente zu positionieren

Zeichenflächen repräsentieren in der Regel die einzelnen Bildschirme, die Sie als Teil Ihrer mobilen App oder Website entwerfen.

Eine Adobe XD Datei kann mehrere Zeichenflächen enthalten. Sie können Zeichenflächen für Weberfahrungen auf iOS-/Android-Geräten (z. B. Smartphones oder Tablets) und Desktop-PCs in einer einzigen Datei definieren. Oder Sie können die Bildschirme eines Bedienungsablaufs jeweils in einer eigenen Datei pro Plattform speichern.

Sie haben die Möglichkeit, zu Beginn des Projekts ein im Startbildschirm bereitgestelltes Format für die Zeichenfläche auszuwählen. Wenn Sie diese Vorgaben nicht verwenden möchten, können Sie auch eine Zeichenfläche mit einer benutzerdefinierten Größe erstellen. Nachdem die neue Datei in dem gewählten Zeichenflächenformat erstellt wurde, können Sie mithilfe des Werkzeugs „Zeichenfläche“ beliebig viele Zeichenflächen hinzufügen.

Mehrere Zeichenflächen für verschiedene Geräte in einer einzigen XD Datei
Mehrere Zeichenflächen für verschiedene Geräte in einer einzigen XD Datei

Um alle Zeichenflächen in Ihrem Projekt anzuzeigen, öffnen Sie das Bedienfeld Ebenen (dazu klicken Sie in der Symbolleiste auf ). 

Zeichenflächen erstellen

Wenn Sie ein Projekt oder eine Datei neu anlegen, können Sie im Startbildschirm die Zeichenflächengröße aus einer der Vorgaben auswählen. Um ein benutzerdefiniertes Format festzulegen, legen Sie unter „Benutzerdefinierte Größe“ die Höhe und Breite (in Pixel) fest und klicken dann auf das Symbol „Benutzerdefinierte Größe“. Jedes Format lässt sich auch noch nachträglich im Eigenschafteninspektor ändern.

Um in eine Datei mehrere Zeichenflächen einzufügen, klicken Sie auf das Werkzeug „Zeichenfläche“. Klicken Sie dann auf eine der Vorgaben auf der rechten Seite und anschließend auf die Stelle, an der die Zeichenfläche platziert werden soll.

Um eine benutzerdefinierte Zeichenfläche zu erstellen, aktivieren Sie das Werkzeug „Zeichenfläche“ und ziehen die Zeichenfläche direkt auf der Montagefläche auf.

Bildlauffähige Zeichenflächen erstellen

Sie können Zeichenflächen erstellen, die eine vertikale Bildlaufleiste besitzen und bildlauffähig sind.

Hinweis:

Diese Version von Adobe XD unterstützt keinen horizontalen Bildlauf.

Aktivieren des Bildlaufs für eine Zeichenfläche:

Mit vorgegebenen Formaten erstellte Zeichenflächen: Wenn Ihr Inhalt die vorgegebene Länge der Zeichenfläche überschreitet, ziehen Sie den unteren Rand der Zeichenfläche auf die gewünschte Länge und schon können Sie Ihre Arbeit am Design fortsetzen. Eine gepunktete Linie auf der Zeichenfläche zeigt an, wo der Bildlauf beginnt.

Wenn Sie den Bildlauf deaktivieren möchten, wählen Sie die Zeichenfläche aus und wählen dann im Eigenschafteninspektor im Bereich „Bildlauf“ die Option „Kein“ aus.

Zeichenflächen mit benutzerdefinierter Größe: Wenn Sie in einer benutzerdefinierten Zeichenfläche den Bildlauf aktivieren möchten, wählen Sie die Zeichenfläche aus und wählen dann im Eigenschafteninspektor im Bereich „Bildlauf“ die Option „Vertikal“ aus.

Geben Sie außerdem eine Viewport-Höhe ein. Diese entspricht der Größe des Fensters, über das die Zeichenfläche angezeigt wird. Die Viewport-Höhe muss kleiner als die Höhe der Zeichenfläche sein, damit die Bildlaufleiste angezeigt wird. Sie können die Viewport-Höhe auch festlegen, indem Sie auf der Arbeitsfläche die Spitze der punktierten Linie auf die gewünschte Position verschieben.

Ändern der Viewport-Höhe
Ändern der Viewport-Höhe

Wenn Sie den Bildlauf deaktivieren möchten, wählen Sie im Eigenschafteninspektor im Bereich „Bildlauf“ die Option „Kein“ aus.

Zeichenflächen auswählen

Um eine Zeichenfläche auszuwählen, klicken Sie auf das Auswahlwerkzeug und führen einen der folgenden Schritte aus:

  • Klicken Sie auf den Zeichenflächentitel. 
  • Doppelklicken Sie auf den Hintergrund der Zeichenfläche.

Zeichenflächen kopieren, vergrößern und verkleinern

Mac: Um die Zeichenfläche zu kopieren, halten Sie die Wahltaste gedrückt, klicken auf die Zeichenfläche und ziehen die Kopie auf eine leere Stelle. Windows: Halten Sie die Alt-Taste gedrückt, klicken Sie auf die Zeichenfläche und ziehen Sie die Kopie auf eine leere Stelle.

Sie können auch im Bedienfeld Ebenen mit der rechten Maustaste auf den Namen der Zeichenfläche klicken und Kopieren wählen. Anschließend klicken Sie erneut mit der rechten Maustaste und wählen Einfügen.

Um eine Zeichenfläche zu vergrößern oder zu verkleinern, klicken Sie auf die Zeichenfläche und verwenden die kreisförmigen Griffe, die am Rand der Zeichenfläche eingeblendet werden.

Zeichenflächen anders anordnen

Klicken Sie auf den Titel der Zeichenfläche und ziehen Sie sie auf die neue Position. 

Hinweis:

Sie können die Zeichenflächen im Bedienfeld Ebenen durch Ziehen verschieben und somit deren Reihenfolge in der Zeichenflächenliste ändern. Aber dadurch ändert sich nur die Stapelreihenfolge der Zeichenflächen und nicht deren Position (x/y-Koordinaten).

Zeichenflächen umbenennen

Standardmäßig werden die Zeichenflächen entsprechend der gewählten Vorgabe benannt und sequenziell nummeriert. Um für eine Zeichenfläche einen aussagekräftigeren Namen festzulegen, doppelklicken Sie auf den Titel der Zeichenfläche und geben den neuen Namen der Zeichenfläche ein.

Sie können Zeichenflächen auch über das Bedienfeld „Ebenen“ umbenennen. Doppelklicken Sie auf die Zeichenfläche bzw. klicken Sie mit der rechten Maustaste auf den Titel der Zeichenfläche und wählen Sie Umbenennen

Zeichenflächen ausrichten und verteilen

Sie können mehrere Zeichenflächen mit dem Auswahlrechteck auswählen und im Eigenschafteninspektor auf die Option „Ausrichten“ oder „Verteilen“ klicken.

Mehrere Zeichenflächen ausrichten und verteilen
Mehrere Zeichenflächen ausrichten und verteilen

Elemente zwischen Zeichenflächen kopieren und verschieben

Sie können jedes Element auf einer Zeichenfläche in eine andere Zeichenfläche verschieben. Dazu ziehen Sie das Element einfach auf die gewünschte Zeichenfläche.

Um ein Element zu kopieren, drücken Sie Cmd + C (Mac) bzw. Strg + C (Windows). Klicken Sie dann auf die Zeichenfläche, in die Sie das Element einfügen wollen, und drücken Sie Cmd + V (Mac) bzw. Strg + V (Windows).

Sie können auch beim Ziehen eines Elements die Wahltaste (Mac) bzw. die Alt-Taste (Windows) gedrückt halten, um das Element zu duplizieren.

Mit der Option Feste Position können Sie auf einer bildlauffähigen Zeichenfläche die Position von Elementen wie Kopf- und Fußzeilen oder von schwebenden Elementen fixieren. Elemente mit fester Position sind im Prototypmodus durch ein Stecknadelsymbol gekennzeichnet; sie können in einer Ebene über oder unter den anderen Designobjekten angeordnet werden. 

 

Hinweis:

Wenn Sie mehrere Objekte haben, die beim Einfügen nicht alle auf die Zeichenfläche passen, werden alle in der Mitte der Zeichenfläche eingefügt.

Sie können den grauen Bereich um die Zeichenflächen als Montagefläche verwenden und Elemente auf der Montagefläche platzieren, um sie dann bei Bedarf auf die Zeichenflächen zu kopieren oder zu verschieben. 

Hinweis:

Wenn Sie alle Zeichenflächen exportieren, werden die Elemente auf der Montagefläche nicht exportiert. Wenn sich ein Element nur teilweise auf einer Zeichenfläche befindet, wird nur dieser Teil des Elements exportiert.

Mehrere Zeichenflächen gleichzeitig bearbeiten

Sie können mehrere Zeichenflächen mit dem Auswahlrechteck auswählen und sie dann gleichzeitig bearbeiten. 

Mehrere gleichzeitig ausgewählte Zeichenflächen
Mehrere gleichzeitig ausgewählte Zeichenflächen

Aktivieren Sie das Werkzeug „Auswählen“ und ziehen Sie ein Auswahlrechteck um die Zeichenflächen, die Sie auswählen wollen.

Wenn Sie mehrere Zeichenflächen auswählen, achten Sie darauf, dass Sie die Zeichenflächen vollständig auswählen. Wenn eine Zeichenfläche nur teilweise abgedeckt ist, wird nicht die Zeichenfläche selbst ausgewählt, sondern nur die Objekte darin.

Die ausgewählten Zeichenflächen werden von einem Begrenzungsrahmen umschlossen. 

Verkleinern/Vergrößern:

Ziehen Sie an den Griffen des Begrenzungsrahmens, um die Größe der ausgewählten Zeichenflächen zu ändern.

Ausschneiden, Kopieren und Einfügen:

 Drücken Sie die Ctrl-Taste und klicken Sie auf die Zeichenfläche (Mac) bzw. klicken Sie mit der rechten Maustaste auf die Zeichenfläche (Windows), um das Kontextmenü mit den Optionen zum Ausschneiden, Kopieren, und Einfügen der ausgewählten Zeichenflächen einzublenden.

Löschen:

Um alle ausgewählten Zeichenflächen zu löschen, drücken Sie die Entf-Taste oder öffnen das entsprechende Kontextmenü mit Ctrl + Klick (Mac) bzw. per Rechtsklick (Windows). Sie können auch eine oder mehrere Zeichenflächen im Bedienfeld Ebenen auswählen, mit der rechten Maustaste klicken und dann Löschen wählen.

Zoom: Sie rufen den Zoommodus auf, indem Sie in der Symbolleiste auf das Zoomsymbol klicken oder die Z-Taste auf der Tastatur drücken. Im Zoommodus haben Sie folgende Möglichkeiten:

  • Einzoomen: Klicken Sie auf eine beliebige Stelle der Arbeitsfläche von XD oder der entsprechenden Zeichenfläche. Sie können auch einen bestimmten Bereich mithilfe des Auswahlrechtecks einzoomen.
  • Auszoomen: Halten Sie beim Klicken die Wahltaste (Mac) bzw. Alt-Taste (Windows) gedrückt.

Wenn Sie schnell einzoomen möchten, ohne in den Zoommodus zu wechseln, können Sie diesen auch temporär aktivieren:

  • Einzoomen: Drücken Sie Leer + Cmd (Mac) bzw. Leer + Strg (Windows) und klicken Sie auf einen Bereich auf der Zeichenfläche (oder wählen Sie diesen mit dem Auswahlrechteck aus).
  • Auszoomen: Drücken Sie Leer + Cmd + Wahl.

Um bestimmte Objekte auf der Zeichenfläche heranzuzoomen, wählen Sie die Objekte aus und wählen dann Ansicht > Zur Auswahl zoomen oder drücken Cmd + 3 (Mac) bzw. Strg + 3 (Windows).

Elemente mithilfe von Rastern auf Zeichenflächen positionieren

XD bietet zwei Arten von Rasteroptionen: Rasterkästchen und Layoutraster. 

Rasterkästchen

An den Hilfslinien eines Rasters können Sie Objekte und Text ausrichten. Beim Zeichnen rasten die Objekte automatisch an diesen Hilfslinien ein, wenn sich die Ränder des Objekts innerhalb der Einrastzone befinden.

Anhand von Rasterkästchen können Sie auch die Größenverhältnisse besser einschätzen, während Sie die Objekte und Textbereiche auf Ihren Zeichenflächen anordnen. 

Rasterkästchen in XD
Rasterkästchen in XD

Layoutraster

Sie können Layoutraster verwenden, um in XD Spalten zu definieren. Über ein Layoutraster legen Sie die Grundstruktur des Designs fest und wie die einzelnen Komponenten auf verschiedene Haltepunkte reagieren (für Responsive Designs).

Nachdem das Layoutraster auf eine Zeichenfläche angewendet wurde, können Sie (ähnlich wie bei Rasterkästchen) Elemente daran ausrichten. Wenn jedoch die Größe der Zeichenfläche geändert oder das Raster angepasst wird, werden die fixierten Elemente nicht angepasst.

Layoutraster in XD
Layoutraster in XD

Raster ein- oder ausblenden

Wählen Sie eine Zeichenfläche aus und führen Sie einen der folgenden Schritte durch:

  • Mac: Wählen Sie Ansicht > Layoutraster anzeigen bzw. Ansicht > Rasterkästchen anzeigen.
  • Mac und Windows: Aktivieren Sie im Eigenschafteninspektor in der Dropdownliste im Bereich RASTER das Kontrollkästchen.
  • Tastaturbefehle: 
    • Rasterkästchen anzeigen: 
      • Mac: ⌘ '  
      • Windows: Strg + '
    • Layoutraster anzeigen:
      • Mac: ⇧ ⌘ '
      • Windows: Strg + Tab
Rasterkästchen oder Layoutraster festlegen
Rasterkästchen oder Layoutraster festlegen

Soll das Raster ausgeblendet werden, deaktivieren Sie im Bereich RASTER das Kontrollkästchen.

Einstellungen für Rasterkästchen festlegen

Mithilfe der Optionen für Rasterkästchen können Sie auch die Größe der Rasterkästchen und die Farbe des Rasters ändern. Sie haben auch die Möglichkeit, einen Satz an Rasteroptionen als Standard zu speichern, damit Sie sie künftig schnell verwenden können. Weitere Informationen finden Sie unter Standardeinstellungen für Rasterkästchen und Layoutraster.

Hinweis:

XD verwendet als Maßeinheit für die meisten der Abstände und Schriftgrößen virtuelle Pixel, d. h. die gleiche Maßeinheit wie ein CSS-Pixel oder die Maße in iOS. Ein virtueller Pixel entspricht in etwa einem physischen Pixel auf einem 72-dpi-Monitor. Momentan kann die Maßeinheit in XD nicht geändert werden.

Größe der Rasterkästchen ändern

Um die Größe des Rasters zu ändern, geben Sie im Eigenschafteninspektor einen neuen Wert für die Rasterkästchen ein. Je kleiner die Zahl, desto engmaschiger das Raster. 

Objekte an den Rasterkästchen ausrichten

Um ein Objekt am Raster auszurichten, ziehen Sie es in die Nähe der Rasterlinien, bis eine der Objektkanten sich innerhalb der Einrastzone befindet.

Das Objekt wird während des Zeichnens am Raster ausgerichtet
Ein Objekt wird während des Zeichnens am Raster ausgerichtet

Um die Ausrichtung am Raster zu vermeiden, halten Sie beim Zeichnen bzw. beim Verschieben des Objekts die Cmd-Taste (Mac) bzw. die Strg-Taste (Windows) gedrückt.

Einstellungen für das Layoutraster festlegen

Wenn Sie ein Layoutraster aktivieren, zeigt XD Spalten an, die zur aktuellen Zeichenfläche passen. Eine Zeichenfläche für ein Smartphone hat beispielsweise weniger und schmalere Spalten als das Standardlayoutraster für einen Tablet.

Wenn Sie die Größe einer Zeichenfläche ändern, werden die Spaltenbreiten des Layoutrasters daran angepasst. Die Objekte auf der Zeichenfläche bleiben unverändert und deren Relation zu den Spalten bleibt nicht erhalten.

Das Layoutraster wird angepasst, wenn Sie die Größe der Zeichenfläche ändern
Das Layoutraster wird angepasst, wenn Sie die Größe der Zeichenfläche ändern

Im Eigenschafteninspektor können Sie die Voreinstellungen für die Spaltenbreite, die Spaltenfarbe, den Spaltenabstand und die Ränder ändern.

Nachdem Sie das Layoutraster festgelegt haben, können Sie diese Einstellungen als Standard festlegen oder auch die geltenden Standardeinstellungen wiederherstellen. Weitere Informationen finden Sie unter Standardeinstellungen für Rasterkästchen und Layoutraster.

Spalteneinstellungen ändern

Sie können die Einstellungen des Layoutrasters anpassen.

Um die Anzahl der Spalten in einem Layoutraster zu ändern, geben Sie im Eigenschafteninspektor einen Wert in das Eingabefeld Spalten ein. Wenn Sie die Anzahl der Spalten ändern, berechnet XD automatisch die neue Breite für die Spalten. 

Der Abstand zwischen den Spalten auf einer Zeichenfläche wird Spaltenabstand genannt. Legen Sie den Spaltenabstand fest, indem Sie den Wert im Feld Spaltenabstand ändern. 

Um die Breite der Spalten zu ändern, ändern Sie den Wert im Feld Spaltenbreite.

Optionen für das Layoutraster festlegen
Optionen für das Layoutraster festlegen

Ränder bearbeiten

Sie können die Breite der Ränder festlegen, während Sie das Layoutraster einstellen. 

Sollen linker und rechter Rand gleich groß sein, klicken Sie auf das Symbol „Linker/rechter Rand gleich breit“ und geben den Wert in das Eingabefeld ein.

Sollen die vier Ränder unterschiedlich groß sein, klicken Sie auf das Symbol „Unterschiedliche Randbreiten“ und geben dann die jeweiligen Werte ein.

Den linken und rechten Rand gleich breit machen
Den linken und rechten Rand gleich breit machen
Unterschiedliche Werte für die vier Ränder festlegen
Unterschiedliche Werte für die vier Ränder festlegen

Farbe der Rasterkästchen oder Spalten ändern

Um die Farbe der Rasterkästchen bzw. Spalten eines Layoutrasters zu ändern, führen Sie die folgenden Schritte aus:

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

    Der Farbwähler wird angezeigt.

    Rasterfarbe bearbeiten
    Rasterfarbe bearbeiten
  2. Sie können folgende Einstellungen vornehmen:

    • Wenn Sie den genauen Wert kennen, über die Felder „H“ (Hue – Farbton), „S“ (Saturation – Sättigung) und „B“ (Brightness – Helligkeit) den HSB-Wert festlegen und im Feld „A“ (Alpha-Kanal) die Deckkraft oder im Feld „Hex“ den Hexadezimalwert.
    • Die Farbe über den Farbregler und das Farbauswahlfeld festlegen. Der HSB-, der Alpha-Wert und der Hexadezimalwert werden dabei entsprechend angepasst.  
    • Mithilfe des Alpha-Reglers die Deckkraft der Fläche bestimmen oder im Feld „A“ einen prozentualen Wert eingeben. Bei einem Alphawert von 0 wechselt das Layoutraster in die Outline-Ansicht.
    • Mithilfe des Werkzeugs „Pipette“ eine Farbe aus einer Zeichenfläche auswählen.

    Hinweis:

    Adobe XD unterstützt auch Hex-Code-Abkürzungen. Wenn Sie beispielsweise 0 eingeben und die Eingabetaste drücken, zeigt XD automatisch die Farbe mit dem Code #000000 an. Entsprechend können Sie 0A für #0A0A0A und 0AF für #00AAFF eingeben.

    Während Sie die Änderungen im Dialogfeld für die Farbauswahl vornehmen, wird die Rasterfarbe auf der Zeichenfläche angepasst.

  3. Wenn Sie sich für eine Farbe entschieden haben, können Sie sie speichern, damit Sie später schneller darauf zugreifen können. Dazu klicken Sie unten im Farbwähler auf das Pluszeichen.

Standardeinstellungen für Rasterkästchen und Layoutraster

Um den Standard für Rasterkästchen oder das Layoutraster wiederherzustellen, klicken Sie im Eigenschafteninspektor im Bereich „RASTER“ auf Standard verwenden.

Legen Sie die von Ihnen vorgenommenen Rastereinstellungen als Standard fest, indem Sie auf Als Standard festlegen klicken. Dadurch werden die Standardrastereinstellungen für Ihr Konto festgelegt. Alle neuen Dateien, die Sie in XD öffnen, besitzen diese neuen Standardeinstellungen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie