Adobe XD Version vom August und Oktober 2019
xd-mnemonic

Adobe XD ist ein vektorbasiertes Tool, mit dem Sie Nutzererlebnisse (User Experience, UX) für Websites und iOS-/Android-Apps entwerfen und entsprechende Prototypen erstellen können. Sie können ganz einfach zwischen Wireframe-Modus, Visual Design, Interaktionsdesign, Prototyperstellung, Vorschau und Freigabe umschalten – und das alles in einem einzigen, leistungsstarken Tool.

XD wurde für Designer unterschiedlichster Inhalte und Zwecke konzipiert: UX-/UI-Designer, Interaktionsdesigner, Experience-Designer, Produktdesigner, Webdesigner, App-Designer, Grafikdesigner, Unternehmer und andere mehr.


Overview

Neue Funktionen in Adobe XD 23

Die XD Version vom Oktober 2019 umfasst folgende Verbesserungen: 

Fülleffekte

Ab XD 23.0 können Sie zerstörungsfreie Fülleffekte anwenden, um Ihre Bilder oder Grafikelemente zu gestalten.

Verwenden Sie die Fülleffekte, um Ihren Designs ein neues Aussehen zu verleihen, indem Sie die Farben von Objekten mit den Farben der zugrunde liegenden Objekte abgleichen und Ihren Designs Leben einhauchen.

Füllmethoden

Weitere Informationen zum Anwenden von Fülleffekten finden Sie unter Anwenden von Fülleffekten.

Schrittweise verschieben und vergrößern

Ab XD 23.0 können Sie diese Tastenkombinationen mit den Pfeiltasten kombinieren, um die Position und Größe der Benutzeroberflächenelemente in Schritten in Größe der Rasterkästchen genau zu steuern.

  • Umschalt + Pfeiltasten: Verschiebt die Auswahl in Schritten von 10 Pixel.
  • Cmd + Pfeiltasten: Ändert die Größe der Auswahl in Schritten von 1 Pixel (das Element ist in der linken oberen Ecke angeheftet).
  • Cmd + Umschalt + Pfeiltasten (Mac) und Alt + Umschalt + Pfeiltasten (Windows): Ändert die Größe der Auswahl in Schritten von 10 Pixel (das Element ist in der linken oberen Ecke angeheftet).

Bei aktivierten Rasterkästchen:

  • Umschalt + Pfeiltasten: Verschiebt die Auswahl so, dass sie zuerst am Raster ausgerichtet wird, und verschiebt sie dann in Schritten in Größe der Rasterkästchen.
  • Cmd + Umschalt + Pfeiltasten (macOS) bzw. Alt + Umschalt + Pfeiltasten (Windows): Ändert die Größe der Auswahl so, dass sie zuerst am Raster ausgerichtet wird, und dann in Schritten in Größe der Rasterkästchen (das Element ist in der linken oberen Ecke angeheftet).
Schrittweise vergrößern
Schrittweise vergrößern

Auswahl über überlappende Ebenen hinweg

Designmodus:

In XD 23.0 wurde das Verhalten der Tastenkombination Cmd + Klicken bzw. Strg + Klicken erweitert, indem ein Drilldown in der Z-Reihenfolge von Objekten auf der Design-Arbeitsfläche sowie in den Design-Spezifikationen ausgeführt wird. Wenn Sie die gewünschte Ebene erreicht haben, können Sie sie mit der Tastatur schrittweise verschieben oder per Rechtsklick das entsprechende Kontextmenü öffnen.

Wenn mehrere Ebenen übereinander gestapelt sind, wählen Sie mit Cmd + Klicken bzw. Strg + Klicken das nächste Objekt unter der ausgewählten Ebene aus. Wenn Sie die letzte darunterliegende Ebene erreicht haben, gelangen Sie mit derselben Tastenkombination zurück zur obersten Ebene. 

Überlappende Ebenen auswählen
Auswahl über überlappende Ebenen hinweg

Design-Spezifikationen

Um die unter einer überlappenden Ebene verborgenen Ebenen anzuzeigen und zu prüfen, zeigen Sie mit der Maus darauf und klicken Sie mit der rechten Maustaste auf den entsprechenden Bereich auf der Zeichenfläche. Dadurch wird eine Liste aller Ebenen und deren Kontextdetails an diesem Pixelpunkt angezeigt. Sie können auch mit Cmd + Klicken einen sequenziellen Drilldown ausführen und die Ebeneneigenschaften anzeigen.

Weitere Informationen über den Zugriff auf überlappende Ebenen finden Sie unter Auswählen, Vergrößern, Verkleinern und Drehen von Objekten.

Neue Funktionen in Adobe XD 22

Bearbeitung in Photoshop

Bearbeitung in Photoshop

XD bietet jetzt eine verbesserte Integration mit Adobe Photoshop, indem Sie XD Bilder direkt in Photoshop öffnen, bearbeiten und in Echtzeit aktualisieren können. Beim Bearbeiten und Speichern der Bilder in Photoshop speichert XD die reduzierte Datei und platziert anstelle der bearbeiteten Datei die Bitmap-Datei in XD. 

Weitere Informationen finden Sie unter Arbeiten mit externen Elementen

Dauer: 3:20 Minuten


Verbessertes Bedienfeld für Plug-ins

Bedienfeld für Plug-ins

Mit der neuesten Version von XD können Sie XD Plug-ins direkt von XD aus starten und damit interagieren. Im neuen Bedienfeld „Plug-ins“ können Sie Plug-ins in XD anzeigen und verwalten. Auf diese Weise können Sie sich ganz auf Ihre Kreativität konzentrieren, während Sie an Ihren XD Designs arbeiten. 

Weitere Informationen finden Sie unter Plug-ins anzeigen und installieren.

Dauer: 4:30 Minuten


CSS-Codefragmente in Design-Spezifikationen

Um die Designs in eine funktionale Website zu übertragen, können Sie die CSS-Codefragment aus den Designspezifikationen kopieren und in Ihren Code einfügen.

Der CSS-Code wird automatisch generiert, wenn Sie beim Veröffentlichen von Design-Spezifikationen im Fenster Für Entwickler freigeben als Ausgabeziel Web auswählen. Wenn Sie Ihre Design-Spezifikation veröffentlichen, zeigt XD automatisch das CSS-Codefragment für die ausgewählte Ebene an. 

CSS-Codefragmente
CSS-Codefragmente

Weitere Informationen finden Sie unter Auswerten von Design-Spezifikationen in XD.

Dauer: 2:58 Minuten


Verbesserungen bei Komponentenbegrenzungen

Komponenten unterstützen eine Vielzahl von Überschreibungen und passen die Größe nahtlos an verschiedene Bildschirmgrößen an, können jedoch beim Anwenden von Effekten oder beim Reorganisieren von Objekten problematisch sein. In früheren XD Versionen wurde der Inhalt abgeschnitten, wenn Sie ein Objekt hinzufügten, das sich außerhalb der Begrenzungen der ursprünglichen Primärkomponente befand.

Um Probleme mit Komponentenbegrenzungen zu beheben, wählen Sie die Primärkomponente aus, klicken mit der rechten Maustaste und wählen Begrenzungen an Inhalt anpassen. Die Komponentenbegrenzungen werden so angepasst, dass alle abgeschnittenen Objekte in der Primärkomponente sowie in den Instanzen vollständig angezeigt werden.

Beim Erstellen neuer Komponenten:

  • Schatten und Weichzeichnungen werden außerhalb des Begrenzungsrahmens der Komponente gerendert und
  • der Begrenzungsbereich passt den gesamten Inhalt in die Komponente ein.
Begrenzungen an Inhalt anpassen
Begrenzungen an Inhalt anpassen

Dauer: 4 Minuten


Reduzierung gebrochener Pixelwerte

Beim Design von HiDPI-Bildschirmen verursachen gebrochene Pixelwerte (Pixelwerte mit Dezimalstellen) verzerrte Inhalte. Ab XD 22.0 rundet XD die Pixelwerte, wenn Sie von Gruppen von Objekten, Komponenten oder Bildmasken die Größe ändern, um Designfriktionen und Bildverzerrungen zu beseitigen. XD behält jedoch gebrochene Werte von Inhalten bei, die vor XD 22.0 erstellt worden sind.  

Reduzierung gebrochener Pixelwerte
Reduzierung gebrochener Pixelwerte

Dauer: 3:20 Minuten


Wechseln zwischen Raster- und Flow-Ansicht

Um sich einen Gesamtüberblick über den Design-Flow mit Informationen zum Zeichenflächenlayout zu verschaffen, klicken Sie links oben auf dem Bildschirm auf den Namen des Prototyps oder der Design-Spezifikation. Die Standardansicht ist die Rasteransicht. Sie können zwischen Raster- und Flow-Ansicht wechseln, in denen jeweils Folgendes angezeigt wird:

  • In der Rasteransicht werden alle Zeichenflächen in einem Rasterformat angezeigt, sodass Sie die einzelnen Zeichenflächen prüfen und aufrufen können.
  • In der Flow-Ansicht wird die Design- und Layouthierarchie der Zeichenfläche dargestellt.
Rasteransicht
Rasteransicht
Flow-Ansicht
Flow-Ansicht

Weitere Informationen finden Sie unter Navigation in Design-Spezifikationen in XD.

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