Adobe XD Version vom Juli und August 2019.

Eine Übersicht über die Funktionen, die in früheren Versionen von Adobe XD eingeführt wurden, finden Sie unter Übersicht über die Funktionen | Frühere Versionen.

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

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.

Neue Funktionen in Adobe XD 21

Vereinheitlichte Freigabe von Links für Entwickler

Ab Version 21.0 von XD wurde die Funktionalität der Freigabelinks für Entwickler erweitert, indem mit Design-Spezifikationen jetzt auch Informationen zum interaktiven Prototyp enthalten sind. Klicken Sie im freigegebenen Link auf das Umschaltsymbol Spezifikation anzeigen , um zwischen der Design-Spezifikations- und der Prototypenansicht zu wechseln.

In früheren Versionen von XD haben Designer zwei unterschiedliche Links für Prototypen und Design-Spezifikationen freigegeben. Die Entwickler mussten ständig zwischen den beiden wechseln, um die Absicht des Designers zu erkennen, was die Effektivität der Zusammenarbeit beeinträchtigt hat.

Über einen einzigen freigegebenen Link können Designer die Intention ihres Designs effektiver kommunizieren und alle Ressourcen bereitstellen, die Entwickler benötigen. Entwickler verstehen Interaktionen und das beabsichtigte Verhalten besser und sparen Zeit, da sie nicht ständig zwischen separaten Links für Prototypen und Design-Spezifikationen wechseln müssen. 

Zwischen Design-Spezifikationen und Prototypen über einen einzigen Link wechseln
Zwischen Design-Spezifikationen und Prototypen über einen einzigen Link wechseln

A. Umschaltsymbol „Spezifikation anzeigen“ 

Dauer: 2:55 Minuten


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

Rasteransicht in freigegebenen Links

In Version 21.0 von Adobe XD wurde die Design-Spezifikation in der UX-Flow-Ansicht durch die brandneue Rasteransicht ersetzt, die die Navigation vereinfacht. Über die Rasteransicht in Prototypen und Design-Spezifikationen können Stakeholder und Entwickler schnell zur relevanten Zeichenfläche wechseln.

In früheren Versionen von XD musste jeder, der Prototypen geöffnet hatte, durch die einzelnen Zeichenflächen klicken, um die gewünschte Zeichenfläche zu finden. 

Rasteransicht in freigegebenen Links
Vergleich von UX-Flow-Ansicht und Rasteransicht für einen Design-Spezifikations-Link

Die Rasteransicht bietet Reviewern folgende Funktionen:

  • Anzeige einer Miniaturansicht aller Bildschirme
  • Anzahl der Kommentare zu einer bestimmten Zeichenfläche
  • Suchen nach einer Zeichenfläche anhand ihres Namens
  • Anzeigen aller verknüpften Bildschirme für eine bestimmte Zeichenfläche, indem Sie auf das Symbol für verknüpfte Bildschirme klicken

Diese Änderungen bieten Entwicklern und Stakeholdern folgende Vorteile:

  • Entwickler: Ersetzen des UX-Flow durch eine vereinfachte einheitliche Ansicht aller Zeichenflächen
  • Stakeholder: Navigieren durch XD Prototypen mit mehreren Bildschirmen und Springen zu den wichtigsten Teilen des Prototyps
Rasteransicht
Rasteransicht

A. Anzahl der Kommentare auf einer Zeichenfläche B. Klicken Sie auf das Symbol für verknüpfte Bildschirme, um die verknüpften Bildschirme anzuzeigen C. Verknüpfte Bildschirme der Zeichenfläche „Erste Karten“ 

Dauer: 2:13 Minuten


Dokumentpräsenz

Um Konflikte bei der Bearbeitung eines Cloud-Dokuments und doppelte Arbeit zu vermeiden, verfügt XD jetzt über eine Anzeige, an der Sie erkennen, ob andere Designer gerade ebenfalls am gleichen Cloud-Dokument arbeiten. Den Designers werden die anderen Designer, die am gleichen Cloud-Dokument arbeiten, als Profil-Avatar angezeigt.

Cloud-Dokument-Präsenz
Dokumentpräsenz

Weitere Informationen zur Dokumentpräsenz finden Sie unter Cloud-Dokumente in XD.

Web-Prototypen auf Mobilgeräten kommentieren

Häufig greifen Reviewer von einem Mobilgerät aus auf Prototypen zu und möchten unterwegs Kommentare abgeben und die Anmerkungen anderer lesen. 

In dieser neuesten Version von XD können Sie jetzt Web-Prototypen auf Ihrem Mobilgerät ebenso wie in einem Desktop-Webbrowser kommentieren. So werden Review-Zyklen verkürzt und Stakeholder können leichter zeitnah Feedback abgeben. 

Weitere Informationen finden Sie unter Arbeiten mit Prototypen in XD

Web-Prototypen auf Mobilgeräten kommentieren

Dauer: 3 Minuten


Textabschnitte anzeigen und überprüfen

Wenn in XD ab Version 21.0 ein Textelement verschiedene Formate besitzt, können Sie mit dem Mauszeiger auf Abschnitte eines Textelements zeigen. In Design-Spezifikationen werden dann ähnliche Abschnitte im Textelement mit den gleichen Formaten hervorgehoben, auf deren einzelne Eigenschaften Sie dann wie gehabt zugreifen können. Bislang konnten Sie bei der Verwendung mehrerer Textformate in einem Textelement diese Formate nicht einzeln betrachten, um zu erkennen, welche Abschnitte dasselbe Format verwenden.

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

Abschnittsattribute in einem längeren Text
Abschnittsattribute in einem längeren Text
Vektorgrafiken in CC-Bibliotheken
Vektorgrafiken in CC-Bibliotheken

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