Tipps und Tricks zum schnellen Entwerfen und Erstellen von Prototypen in Adobe XD.

Es folgen einige Tricks, die Sie bei der Arbeit mit Adobe XD CC unterstützen.

Allgemeine Tipps und Tricks

  • Anstatt Gruppen von Elementen in Ihrem Design per Kopieren und Einfügen zu duplizieren, können Sie im Eigenschafteninspektor die Option „Wiederholungsraster“ verwenden.
  • Sie können eine Form duplizieren, indem Sie sie auswählen und bei gedrückter Wahltaste (Mac) bzw. Alt-Taste (Windows) eine Kopie an eine andere Stelle ziehen.
  • Auf dem Mac können Elemente mit Objekt > Sperren (oder Cmd + L) gesperrt werden. Dieser Befehl dient zum Umschalten, sodass er auch zum Aufheben der Sperre verwendet wird. Auf Windows klicken Sie mit der rechten Maustaste auf ein Objekt und wählen im Kontextmenü die Option „Sperren“.
  • Aktivieren Sie die Direktauswahl, indem Sie die Cmd- bzw. Strg-Taste gedrückt halten. Auf diese Weise können Sie verschachtelte Objekte auswählen.
  • Eine Maske lässt sich schnell erstellen, indem Sie ein Bild auf eine Form ziehen: auf der Fläche dieser Form wir nun das Bild angezeigt.
  • Sie können eine bearbeitbare Maske erstellen, indem Sie ein Bild importieren und dann eine Form zeichnen. Wählen Sie beide aus und wählen Sie dann Objekt > Mit Form maskieren (Mac) oder klicken Sie mit der rechten Maustaste auf die Objekte und wählen Sie im Kontextmenü die Option „Mit Form maskieren“. Sie können die Maske oder das Bild später mit einem Doppelklick auf die maskierte Gruppe bearbeiten.

Zeichnen und Text

  • Sie können das Ausrichten an Hilfslinien deaktivieren, indem Sie beim Zeichnen die Cmd-/Strg-Taste gedrückt halten.
  • Um zwischen einer Kurve und einem Winkel zu wechseln, doppelklicken Sie auf einen beliebigen Ankerpunkt.
  • Halten Sie beim Ziehen eines Kurvengriffs die Wahl-/Alt-Taste gedrückt, um den Kurvengriff unabhängig zu machen. (Um ihn wieder abhängig zu machen, doppelklicken Sie, um zu einem Winkel zurückzukehren, und doppelklicken dann erneut).
  • Sie können Ankerpunkte auswählen, wenn Sie mit dem Zeichenstift zeichnen.
  • Um den Bearbeitungsmodus einer Gruppe zu aktivieren (d. h., Sie können einzelne Elemente der Gruppe bearbeiten oder neue hinzufügen), doppelklicken Sie auf die Gruppe oder Sie halten die Cmd-/Strg-Taste gedrückt, während Sie auf ein Objekt der Gruppe klicken.
  • Wenn Sie ein Textelement auswählen und dann ein neues erstellen, werden alle Formateigenschaften des ersten Texts für den zweiten übernommen.
  • Pfadkombinationen (Addieren/Subtrahieren/Schnittmenge bilden/Überlappung ausschließen) sind nicht destruktiv. Sie können aktiviert bzw. deaktiviert werden.

Inhalte importieren

  • Um Inhalte aus Illustrator einzubinden, wählen Sie in Illustrator die Vektorform aus, kopieren sie und fügen sie dann in Adobe XD ein.
  • Um Bitmap-Inhalte aus Photoshop einzubinden, wählen Sie mit Cmd + A bzw. Strg + A alle Elemente in einer Bitmap- oder Textebene aus (oder wandeln zuerst eine Vektorebene oder Gruppe in ein Smart-Objekt um), kopieren diese und fügen sie dann in Adobe XD ein. Die Ebene wird als Bitmap eingefügt. Sie können auch Inhalte aus Photoshop kopieren, indem Sie sie mit dem Auswahlrechteck auswählen und dann „Bearbeiten“ > „Kopieren“ wählen. Auf diese Weise werden Elemente aus allen Ebenen (innerhalb der Auswahl) ausgewählt.
  • Um Inhalte aus Sketch einzubinden, wählen Sie eine oder mehrere Ebenen oder Gruppen aus und klicken auf „Make Exportable“ (Exportierbar machen). Wählen Sie das SVG-Format aus und ziehen Sie die Ebene von Sketch zu Adobe XD. Dadurch erhalten Sie bearbeitbare Vektorinhalte in Adobe XD.
  • Mac: Um Elemente (PNG-, JPG-, TIFF-, GIF- oder SVG-Dateien) zu importieren, wählen Sie Datei > Importieren oder ziehen Bilder vom Finder auf die Arbeitsfläche von Adobe XD oder kopieren sie und fügen sie in Adobe XD ein.
    Windows: Klicken Sie auf das Hamburgermenü und wählen Sie „Importieren“ oder ziehen Sie Bilder vom Windows-Explorer auf die Arbeitsfläche von Adobe XD oder kopieren Sie sie und fügen sie in Adobe XD ein.
    Sie können auch Inhalte im Webbrowser kopieren und in Adobe XD einfügen.

Tastaturbefehle für die Bearbeitung

  • Um den Eckenradius eines Rechtecks anzupassen, halten Sie die Wahltaste gedrückt, wenn Sie nur eine einzelne Ecke ändern wollen.
  • Um das Einrasten vorübergehend zu deaktivieren, halten Sie beim Verschieben, Vergrößern oder Verkleinern von Elementen die Cmd- bzw. Strg-Taste gedrückt.
  • Halten Sie die Umschalttaste gedrückt, wenn Sie die Größe eines Elements ändern, damit das Seitenverhältnis beibehalten wird.
  • Halten Sie beim Zeichnen einer Form die Alt-Taste gedrückt, wenn sie von ihrer Mitte heraus gezeichnet werden soll und nicht, wie üblich, bei einem Ende beginnend.
  • Um schnell die Deckkraft eines ausgewählten Elements zu ändern, drücken Sie die folgenden Zifferntasten: 1 = 10 %, 2 = 20 % usw. bis 0 = 100 %.
  • Wenn Sie eine Form oder einen Kontrollpunkt mithilfe der Pfeiltasten verschieben, halten Sie die Umschalttaste gedrückt, um die Objekte in Schritten von 10 Pixel zu verschieben.
  • Halten Sie die Leertaste gedrückt, um den Handmodus zu aktivieren. Wenn Sie im Handmodus ziehen, wird die Arbeitsfläche verschoben.

Zeichenflächen

  • Um eine Zeichenfläche auszuwählen, klicken Sie auf ihren Titel oder klicken bei gedrückter Cmd-/Strg-Taste auf den Hintergrund. Sie können auch auf den Hintergrund doppelklicken.
  • Um eine leere Zeichenfläche auszuwählen, klicken Sie auf den Hintergrund der Zeichenfläche.
  • Um eine Zeichenfläche (und ihren Inhalt) zu duplizieren, wählen Sie die Zeichenfläche aus und ziehen bei gedrückter Cmd-Taste (Mac) bzw. Alt-Taste (Windows), um eine Kopie zu erstellen.
  • Um eine Zeichenfläche umzubenennen, doppelklicken Sie auf ihren Titel.

Wiederholungsraster

  • Um den Abstand zwischen sich wiederholenden Elementen in einem Raster anzupassen, wählen Sie das Wiederholungsraster aus und halten dann den Cursor über den Abstand zwischen zwei Elementen und ziehen. Wenn Sie ein Element in einem Wiederholungsraster bearbeiten, müssen Sie die Esc-Taste drücken, um den Bearbeitungsmodus zu verlassen.

Prototyperstellung und Vorschau

  • Wählen Sie ein Objekt auf einer Zeichenfläche (oder die gesamte Zeichenfläche) aus und ziehen Sie eine Verdrahtung auf eine andere Zeichenfläche, um eine Interaktion zwischen den beiden Zeichenflächen auszulösen.
  • Um eine Verdrahtung wieder zu entfernen, ziehen Sie sie vom Ziel auf eine freie Stelle außerhalb der Montagefläche.
  • Bei Webdesigns sollten Sie den Übergang „Ausblenden“ verwenden.
  • Sie können alle Verdrahtungen zwischen Ihren Zeichenflächen anzeigen (außer denen, die direkt von Zeichenflächen ausgelöst werden), indem Sie im Prototypmodus Cmd + A (Mac) bzw. Strg + A (Windows) drücken.
  • Im Vorschaufenster wird jeweils die ausgewählte Zeichenfläche angezeigt. Ist keine Zeichenfläche ausgewählt, wird im Vorschaufenster die Startseite angezeigt.
  • Sie können über das Vorschaufenster ein Video Ihres interaktiven Prototyps aufzeichnen. Dazu klicken Sie in der Titelleiste auf „Aufzeichnen“.
  • Wenn Sie erneut auf „Aufzeichnen“ klicken oder die Esc-Taste drücken, wird die Aufzeichnung beendet.

Prototypen freigeben

  • Damit Sie Prototypen freigeben können, müssen Sie mit Ihrem Adobe-Konto entweder beim Adobe Creative Cloud-Client oder bei einer andere Adobe-Applikation (wie Photoshop oder Illustrator) angemeldet sein.Dabei werden sowohl Adobe IDs, Enterprise IDs als auch Federated IDs unterstützt.
  • Wenn Sie Ihre Designdatei ohne Interaktionen freigeben, werden alle Zeichenflächen hochgeladen und die Benutzer können mithilfe der Pfeiltasten durch den Prototyp navigieren. Die Reihenfolge, in der Ihre Zeichenflächen aufgerufen werden, ist von oben links nach unten rechts.
  • Enthält Ihr Design Interaktionen, werden nur die mit der Startzeichenfläche verdrahteten Zeichenflächen hochgeladen und freigegeben.
  • Die als Startseite definierte Zeichenfläche ist die erste Zeichenfläche, die die Benutzer sehen, wenn sie ein freigegebenes Design anzeigen.
  • Sie können eine andere Zeichenfläche zur Startseite machen, indem Sie im Prototypmodus neben der Zeichenfläche auf das Startseitensymbol klicken. Das Startseitensymbol wird nur bei einer ausgewählten Zeichenfläche angezeigt.
  • Wenn Sie einen Prototyp in einem mobilen Webbrowser anzeigen, können Sie auf dem Startbildschirm des Geräts eine Verknüpfung zu diesem Prototyp speichern. Dadurch erinnert ein Prototyp beim Vorführen eher an eine native Applikation.

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