Adobe XD Versionen vom August 2018, September 2018, Oktober 2018, Januar 2019 und Februar 2019
xd-mnemonic

Adobe XD ist ein vektorbasiertes Tool, mit dem Sie Nutzererlebnisse (User Experiences, UX) für Websites und iOS-/Android-Apps entwerfen und Prototypen dafür 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.


Neue Funktionen in Adobe XD 18

Die XD Version vom April 2019 besitzt folgende spannende Verbesserungen:

Sprachauswahl

XD unterstützt das zuverlässige Umschalten der Sprache in der App, um die Sprache der XD Oberfläche zu ändern. Über diese neu hinzugekommene Funktion können Sie die Sprache steuern, in der Sie XD verwenden können, und sind nicht an die Sprachauswahl des Betriebssystems gebunden. Die neuen Spracheinstellungen bleiben bei allen XD Updates erhalten.

Hinweis:

In China sind für Benutzer von Creative Cloud für Teams die Optionen für die Sprachumschaltung deaktiviert.

Sprachauswahl
Sprachauswahl

Verbesserte Benutzeroberfläche des Kommentar-Bedienfelds

Aus Gründen der Einheitlichkeit der Creative Cloud-Produkte wurde die Lesbarkeit von Kommentaren und Antworten in Adobe XD im Kommentar-Bedienfeld verbessert. Dank dieser Verbesserung wurde die Lesbarkeit bei mehreren Kommentaren mit ausgeblendetem (automatisiertem) Captcha für Kommentare von Gästen verbessert. Außerdem gibt es neue Einzüge im Kommentar-Bedienfeld, Zeitstempel neben dem Namen des Reviewers und vieles mehr.

Weitere Informationen finden Sie unter Arbeiten mit Prototypen in XD.

Verbesserte Kommentarfunktion
Verbesserte Kommentarfunktion

Neue Funktionen in Adobe XD 17

Fehlende Schriften auflösen

Aktivieren der Schriften aus Adobe Fonts
Aktivieren der Schriften aus Adobe Fonts

Mit der neuesten Version von Adobe XD haben wir die Aufgabe optimiert, direkt aus der Applikation heraus fehlende Schriften aus der Adobe Fonts-Bibliothek zu laden und gleichzeitig Nicht-Adobe-Schriften zu verwalten. 

Um eine nahtlose Arbeit mit Adobe-Schriften zu gewährleisten, aktiviert XD auf Ihrem Computer automatisch die noch fehlenden Schriften aus der Adobe Fonts-Bibliothek – ganz ohne Ihr Zutun.

Wenn Sie online sind und ein Dokument öffnen, in dem Schriften fehlen, die in Adobe Fonts verfügbar sind, aktiviert XD diese Schriften automatisch auf Ihrem Computer. (Adobe Fonts wird Ihnen über Ihr Creative Cloud-Abonnement bereitgestellt.)

Schriften, die aus Adobe Fonts geladen wurden, sind durch ein blaues Aktivierungssymbol gekennzeichnet. Sobald sie einsatzbereit sind, stehen sie in Ihrem Dokument zur Verfügung.

Schriften aus Adobe Fonts werden automatisch aktiviert
Schriften aus Adobe Fonts werden automatisch aktiviert

A. Fehlende Schriften ... B. ... werden aktiviert 

Im folgenden Video erfahren Sie, was zu tun ist, wenn Schriften fehlen.


Weitere Informationen finden Sie unter Verwalten von Elementen und Komponenten

Unterstützung von Ziehgesten in Web-Prototypen

Sie können das Verhalten Ihrer Prototypen bei Zieh-Effekten jetzt auch in Web-Prototypen optimal testen. In früheren Versionen wurden Ziehgesten zwar in XD Desktop unterstützt, aber in der Web-Variante eines Prototypen wurde dieses Verhalten durch Antippen ersetzt. Mit diesem Update können Sie auch in einem Webbrowser Ziehgesten ausführen.

Ziehgeste in einem Browser
Ziehgeste in einem Browser

Weitere Informationen finden Sie unter Erstellen von Prototypen mit automatischen Animationen.

Kopieren/Einfügen von Vektorinhalten in Illustrator

Vektorinhalte in Illustrator einfügen
Vektorinhalte in Illustrator einfügen

Sie können jetzt XD Vektorinhalte in die Zwischenablage kopieren und sie dann als bearbeitbare Ebenen in Adobe Illustrator einfügen. In früheren Versionen fügte Illustrator Inhalte, die aus XD kopiert wurden, als auf eine Ebene reduzierte Bilder ein. Diese Funktion wurde optimiert, sodass jetzt eine SVG-basierte Vektorübertragung möglich ist.

Diese Funktion ist mit Illustrator ab Version 23.0.2 kompatibel.

Im folgenden Video erfahren Sie, wie Sie Vektorgrafiken kopieren und in Illustrator einfügen.


Weitere Informationen finden Sie unter Arbeiten mit externen Elementen.

Ausblenden der Navigationssteuerelemente in Web-Prototypen

Sie können jetzt auch die Anzeige der Seitennummerierung und der Navigationssteuerelemente in Ihrem Web-Prototyp steuern und so eine kontrolliertere Umgebung für Benutzertests schaffen.

Steuerelemente für die Navigation ein- und ausblenden
Steuerelemente für die Navigation ein- und ausblenden

Sie können Navigation anzeigen unter der Option Freigeben aktivieren oder deaktivieren und dadurch Folgendes festlegen:

  • Aktiviert (Standardeinstellung): In der Prototyp-Web-Applikation werden die Schaltflächen Startseite, Zurück und Weiter angezeigt.
  • Deaktiviert: Die Navigationssteuerelemente der Prototyp-Web-Applikation und die Zeichenflächennummern sind nicht sichtbar. Die Reviewer können über die definierten Hotspots mit dem Prototyp interagieren und per Klick auf die Schaltfläche Startseite wieder die Startseite anzeigen. Wenn Sie einen Prototyplink auf iOS/Android öffnen, können Sie den Onboarding-Bildschirm sehen, die Links-/Rechts-Pfeile sind ausgeblendet und die Wischgeste ist deaktiviert.

Wenn Sie Prototypen veröffentlichen, deren Flow-Verbindungen durch Verdrahtungen angezeigt werden, können Sie beim Veröffentlichen auch festlegen, dass die Navigationssteuerelemente angezeigt werden. 

Hinweis:

Wenn Sie diese neue Funktion auch für Ihre vorhandenen Links nutzen möchten, veröffentlichen Sie Ihre Prototypen erneut und deaktivieren dabei die Option Navigation anzeigen.

Deaktivierte Navigationssteuerelemente
Deaktivierte Navigationssteuerelemente

Im folgenden Video erfahren Sie, wie Sie die Steuerelemente für die Navigation in Web-Prototypen ausblenden.


Verbesserungen bei „Für Export markieren“

Für Export markieren
Für Export markieren

Sie können ein beliebiges Objekt auf der Design-Arbeitsfläche auswählen und für den Export markieren, indem Sie auf das Kontrollkästchen Für Export markieren klicken, das Sie im Eigenschafteninspektor finden. Sie können auch mit der rechten Maustaste auf das Objekt klicken und die Option aus dem Kontextmenü auswählen.

Ab dieser Version werden alle Bitmap-Bilder, die in XD importiert werden, automatisch für den Export markiert. Wenn Sie ein Illustrator- oder Photoshop-Dokument mit Bildern importieren oder öffnen, markiert XD automatisch alle Bitmap-Bilder für den Export. 

Wählen Sie entweder Datei > Exportieren > Markierte, um alle für den Export markierten Ebenen zu exportieren, oder Freigeben > Für Entwickler freigeben, um Elemente in Design-Spezifikationen einzuschließen. 

Hinweis:

In der englischen Version wurde „Mark for Batch Export“ in Mark for Export umbenannt. Im Deutschen bleibt die Option Für Export markieren unverändert.

Im folgenden Video erfahren Sie, wie Elemente für den Export markiert werden.


Erweiterungen für das Auswahlwerkzeug

Auswahl von Objekten aus mehreren Gruppen
Auswahl von Objekten aus mehreren Gruppen

XD hat das Auswahlwerkzeug verbessert, sodass die Auswahl von Inhalten in mehreren Gruppen viel leistungsfähiger ist. Mit Cmd + Umschalt + Klicken (macOS) bzw. Strg + Umschalt + Klicken (Windows) können Sie Objekte in mehreren Gruppen auf der Arbeitsfläche auswählen. Dabei spielt es keine Rolle, zu welchen Gruppen diese Objekte gehören. Wenn die Objekte ausgewählt sind, können Sie allgemeine Attribute im Eigenschafteninspektor ändern. Um den Inhalt zu duplizieren, ziehen Sie die Auswahl bei gedrückter Alt-Taste oder drücken Sie Cmd/Strg + D.

Im folgenden Video erfahren Sie, wie Sie Objekte in verschiedenen Gruppen auswählen können.


JIRA-Server-Integration

Die Integration von Adobe XD mit Jira optimiert die Zusammenarbeit zwischen Designern und Entwicklern mit sofortigem Zugriff auf freigegebene XD Prototypen und Design-Spezifikationen direkt aus Jira heraus.

Durch die Erweiterung des Supports auf Jira-Server und Jira-Data-Center können Unternehmenskunden, die eine kundenspezifische Lösung mit speziellen Data-Governance-Anforderungen benötigen, diese Vorteile nutzen. Weitere Informationen dazu, wie Jira-Administratoren diese Integration bereitstellen können, finden Sie unter JIRA für Adobe XD.

Neue Funktionen in Adobe XD 16

Aufzeichnen von Interaktionen mit Audio-Sprechtexten

Neu in Adobe XD ist die Möglichkeit, über Ihr Mikrofon Sprechtexte hinzuzufügen, wenn Sie eine Vorschau-Interaktion aufnehmen. Wenn Sie durch die Vorschau Ihres Designs klicken, ist der Sprechtext auch in der Aufzeichnung enthalten. Diese Methode eignet sich insbesondere für Remote-Kundenapplikationen, sodass Sie nicht physisch beim Kunden oder Stakeholder präsent sein müssen.

Während diese Funktion für Windows-Benutzer bereits auf Betriebssystemebene über ein Steuerelement im Game Center verfügbar war, konnte diese neue Funktion nun auch für Mac-Anwender bereitgestellt werden. 

Im folgenden Video erfahren Sie, wie Sie beim Aufzeichnen einen Sprechtext zu einem Prototyp hinzufügen.


Interaktionen aufzeichnen
Interaktionen aufzeichnen

Weitere Informationen dazu, wie Sie Sprachinteraktionen aufzeichnen und zu Ihrem Sprechtext hinzufügen, finden Sie unter Sprechtext zu einem Prototyp hinzufügen.

Tastaturbefehl für die Pipette zum Ändern von Farben

Adobe XD hat jetzt einen Tastaturbefehl zum Aktivieren der Pipette, sodass Sie die Farben von Objekten schneller ändern können. Wählen Sie das Objekt oder die Objektgruppe aus, deren Farbe Sie ändern wollen, und verwenden Sie i auf der Tastatur. Wenn der Mauszeiger die Form der Pipette annimmt, wählen Sie im Design auf der Arbeitsfläche eine Farbe aus, um die Farbe des Objekts bzw. der Objektgruppe entsprechend zu ändern. Mit dem Farbwähler können Sie nur absolute Farben auswählen. Sie können damit keine linearen oder radialen Farbverläufe auswählen.

Im folgenden Video erfahren Sie, wie Sie die Pipette verwenden.


Tastaturbefehl zum Aktivieren der Pipette
Tastaturbefehl zum Aktivieren der Pipette

Weitere Informationen dazu, wie Sie den Tastaturbefehl für die Pipette einsetzen, erhalten Sie unter Tastaturbefehle.

Hilfskomponenten für die Navigation in Prototypen und Design-Spezifikationen

Beim Zugriff auf von XD veröffentlichte Prototypen oder Design-Spezifikationen im Web werden Ihnen einheitliche Navigationssteuerelemente bereitgestellt. Dadurch wird ein einheitliches Erlebnis gewährleistet, wenn Sie mit anderen Adobe-Web-Applikationen interagieren.

Weitere Informationen finden Sie unter Arbeiten mit Prototypen in XD.

Hilfskomponenten für die Navigation
Hilfskomponenten für die Navigation

UI-Verbesserungen für den Wechsel zwischen öffentlicher und privater Freigabe

Für eine bessere Auffindbarkeit und Verwendung der Freigabefunktion und den damit verbundenen Arbeitsabläufen bietet XD die folgenden Optionen, um einen Prototyp freizugeben.

  • Für jeden sichtbar, der den Link besitzt
  • Nur für eingeladene Personen sichtbar
UI-Verbesserungen
UI-Verbesserungen

Weitere Informationen finden Sie unter Freigeben von Prototypen und Design-Spezifikationen.

Neue Funktionen in Adobe XD 15

Die XD Version vom Januar 2019 besitzt folgende spannende neue Funktionen:

Eine der Verbesserungen ist die Möglichkeit, alle Kommentare über mehrere Zeichenflächen hinweg anzuzeigen.

Auto-Animate-Unterstützung in Browsern

Mit der Option „Auto-Animate“ in Adobe XD können Sie Prototypen mit beeindruckenden animierten Übergängen erstellen, die auf den verschiedenen Geräten voll funktionsfähig und interaktiv sind, und diese sowohl im Vorschaufenster als auch in Ihrem Webbrowser anzeigen.

Sie können Animationen in Prototypen und die Werte der Animationseigenschaften in den Design-Spezifikationen auf einem der unterstützten Webbrowser anzeigen. Dadurch sollte es Ihnen leichter fallen, Ihre Designs Kunden, Kollegen und anderen Partnern zu präsentieren.

Weitere Informationen finden Sie unter Erstellen von Prototypen mit automatischen Animationen und Unterstützte Eigenschaften für das automatische Animieren in XD Zeichenflächenübergängen.

Im folgenden Video können Sie sehen, wie automatische Animationen, die in früheren XD Versionen in Webbrowsern aufgelöst wurden, jetzt auch in Webbrowsern funktionieren.


Auto-Animate-Unterstützung in Browsern
Auto-Animate-Unterstützung in Browsern

Unterstützung verschiedener Sprachen und Akzente für die Sprachsteuerung

Die Sprachsteuerung unterstützt jetzt alle Adobe XD Sprachen sowohl für Sprachbefehle als auch für die Sprachwiedergabe. Egal, ob Sie Ihre Designs für Anwender konzipieren, die Englisch, Französisch, Deutsch, Koreanisch oder Japanisch sprechen, Sie können die Spracherlebnisse in Ihren Prototypen in deren Muttersprache erstellen. Die Unterstützung weiterer Sprachen ist geplant.

Die neueste Version von XD unterstützt auch regionale Akzente für Sprachbefehle. Ob Sie sich nun in den USA oder Großbritannien, Kanada oder Australien befinden, in Ihrem Prototyp können Sie die Sprache der Leute vor Ort implementieren. Weitere Informationen finden Sie unter Design von Prototypen mit Sprachunterstützung in Adobe XD.

Im folgenden Video finden Sie Informationen zur Unterstützung verschiedener Stimmen und Akzente bei der Sprachwiedergabe.


Alle Kommentare über mehrere Zeichenflächen hinweg anzeigen

Dank der Adobe XD Funktion zum Anzeigen aller Kommentare ist es viel einfacher, die Feedbacks Ihrer Reviewer und Entwickler zu Prototypen und Design-Spezifikationen zu verwalten. Sie können jetzt alle Kommentare in einer Gesamtliste anzeigen. Wenn Sie dort auf einen bestimmten Kommentar klicken, gelangen Sie direkt zur betroffenen Zeichenfläche, wo Sie Kommentare beantworten, schließen oder löschen können. 

Weitere Informationen finden Sie unter Alle Kommentare anzeigen

Im folgenden Video können Sie sehen, wie alle Kommentare über mehrere Zeichenflächen hinweg angezeigt werden.


all-screen-comments-view

Neue Funktionen in Adobe XD 14

Verbesserte Zusammenarbeit mit nativen Cloud-Dokumenten

Cloud-Doc

Adobe XD unterstützt jetzt Cloud-Dokumente – ein neuer Dokumenttyp für die Cloud, mit dem Sie Dokumente schnell und bequem verwalten, freigeben und über verschiedene Geräte hinweg auf dem neuesten Stand halten können. 

Sie können Ihre XD Designs als Cloud-Dokumente speichern lassen und so sicherstellen, dass stets die neueste Version der Dokumente zugänglich ist, selbst wenn Sie offline sind. Sie können sie dann für andere Creative Cloud-Benutzer freigeben und diese zur Zusammenarbeit einladen. Sobald Sie wieder online sind, wird Ihre Arbeit automatisch in der Cloud gespeichert.

Cloud-Dokumente unterstützen auch dokumentübergreifende Elemente und ermöglichen das Verknüpfen von Komponenten aus einem Cloud-Dokument.

Wie Sie mit Cloud-Dokumenten arbeiten, erfahren Sie im folgenden Video.


Die Einführung von Cloud-Dokumenten wirkt sich auch auf darauf aus, wie Sie in XD für iOS/Android Dokumente speichern und darauf zugreifen. Weitere Informationen finden Sie unter Arbeiten mit Cloud-Dokumenten in XD für iOS/AndroidCloud-Dokumente in XD und Verwalten von Cloud-Dokumenten.

Wie Sie auf Mobilgeräten mit Cloud-Dokumenten arbeiten, erfahren Sie im folgenden Video.


Schnellere und präzise Designs durch das Spiegeln von Objekten

In XD lassen sich Objekte vertikal oder horizontal spiegeln. Die Spiegelung kann auf alle grundlegenden Elemente außer Zeichenflächen, Wiederholungsraster und Komponenten angewendet werden; dabei wird die aktuelle Drehung des Objekts berücksichtigt.

Weitere Informationen finden Sie unter Objekte spiegeln.

Objekte spiegeln
Objekte spiegeln

Effektive Arbeitsweise durch die Suche im Bedienfeld „Ebenen“

Sie können im Bedienfeld „Ebenen“ mit den Funktionen Suchen und Filtern nach Ebenennamen suchen oder Ebenen nach Text, Formen und Kategorien von Bildern filtern. Bei der Suche werden nur relevante Ebenen und Zeichenflächen angezeigt, die den Suchbegriff enthalten, ohne die Ebenenstruktur (z. B. erweiterte Gruppen). Dies kann hilfreich sein, wenn Sie Ebenen zwischen Zeichenflächen automatisch animieren.

Weitere Informationen finden Sie unter Arbeiten mit Ebenen.

Suche im Bedienfeld „Ebenen“
Suche im Bedienfeld „Ebenen“

Vorschau verknüpfter Komponenten auf der Arbeitsfläche

Sie können eine Vorschau der Komponentenaktualisierungen auf der Arbeitsfläche anzeigen, bevor Sie sie übernehmen, indem Sie im Bedienfeld „Elemente“ auf das Symbol „Aktualisierte verknüpfte Komponente“ zeigen.

Weitere Informationen finden Sie unter Vorschau der Komponentenaktualisierung anzeigen.

Vorschau der Komponentenaktualisierung anzeigen
Vorschau der Komponentenaktualisierung anzeigen

Änderungen der Benutzeroberfläche bezüglich der Arbeitsabläufe für die Freigabe

14_0-release-share
Alte Bezeichnung Neue Bezeichnung Arbeitsabläufe
(nicht zutreffend) Dokument freigeben Freigeben von Cloud-Dokumenten für das Review
Prototyp veröffentlichen Für Reviewer freigeben Veröffentlichen und Freigeben von Prototypen für Reviewer
Design-Spezifikation veröffentlichen Für Entwickler freigeben Veröffentlichen und Freigeben von Design-Spezifikation für Entwickler
Veröffentlichte Links verwalten Links verwalten Links auf assets.adobe.com verwalten
Video aufzeichnen Video aufzeichnen Aufzeichnen eines Videos, das die Interaktionen zwischen Zeichenflächen zeigt, wenn Sie mit Auto-Animate arbeiten. Wenn es sich um einen interaktiven Prototyp handelt, werden alle Interaktionen als mp4-Datei aufgezeichnet.

Höhere visuelle Genauigkeit beibehaltener Ebenen aus Adobe Illustrator

Das Kopieren und Einfügen von Adobe Illustrator nach XD wurde verbessert, sodass die visuelle Wiedergabetreue der Ebenen, ihrer Struktur und der Effekte so erhalten bleiben, wie sie in Adobe Illustrator entworfen wurden. Dieser Arbeitsablauf ist jetzt mit dem Illustrator-Import gleichwertig.

Verbesserte Integration mit Photoshop, Illustrator und After Effects

Mit Datei > Importieren können Sie beim Konvertieren von Illustrator- oder Photoshop-Inhalten diese in ein vorhandenes XD Dokument einfügen. Wenn Sie Smart-Objekte konvertieren, bleiben sie vollständig bearbeitbar (anstatt reduziert zu werden) und ihre Photoshop-Einstellungsebenen bleiben erhalten.

Weitere Informationen finden Sie unter Arbeiten mit externen Elementen.

Anzeigen von Prototypen auf iOS/Android

Es wurden einige Verbesserungen beim Anzeigen von Prototypen in einem Webbrowser auf iOS/Android vorgenommen, einschließlich des Vollbild-Standardmodus und der Möglichkeit, durch Auf- und Zuziehen Navigationspfeile, die Start-Schaltfläche und Prototypinformationen anzuzeigen und Anliegen zu melden. Weitere Informationen finden Sie unter Echtzeitansicht auf iOS/Android.

Weitere Informationen über das verbesserte Erlebnis auf iOS/Android erhalten Sie in dem folgenden Video.


Verbesserter SVG-Export

Beim Exportieren von SVG-Elementen aus XD oder Design-Spezifikationen können Sie jetzt die Formatierung Präsentationsattribute verwenden. Dies verbessert die Kompatibilität mit gängigen Entwicklungsszenarien, z. B. die Verwendung von aus XD exportierten SVG-Dateien in Android Studio.

Weitere Informationen finden Sie unter Arbeiten mit externen Elementen.

Verbesserte Unterstützung von Wacom und Touch

Adobe XD unterstützt jetzt das Drehen ausgewählter Objekte mit zwei Fingern auf Touchscreen-Geräten (Windows), Trackpads (macOS) und Tablets, Touchpads und Touch Rings (Wacom).

Verbesserte Benutzeroberfläche für Webkommentare

Beim Öffnen eines Webprototyps oder einer Design-Spezifikation wird jetzt auf der rechten Leiste über dem Kommentarsymbol eine graue Markierung mit einer Zahl angezeigt. Die Zahl stellt die Gesamtzahl der nicht aufgelösten Kommentar-Threads für eine Zeichenfläche dar. Die Zahl wird entsprechend aktualisiert, wenn Sie einen neuen Kommentar hinzufügen oder einen vorhandenen Kommentar als aufgelöst markieren.

Benutzeroberfläche für Webkommentare
Benutzeroberfläche für Webkommentare

Neue Funktionen in Adobe XD 13

Designs und Prototypen mit Sprachbefehlen und Sprachwiedergabe erstellen

Sprachbefehle und Sprachwiedergabe
Sprachbefehle und Sprachwiedergabe

Adobe XD bietet eine leicht zu bedienende Lösung, um anhand von Sprachbefehlen eine Interaktion zwischen Zeichenflächen auslösen zu können. Wo Sie sonst per Klick oder Antippen eine Aktion auslösen, können Sie auch Sprache als Trigger für eine Prototypinteraktion und Sprachwiedergabe als ausgelöste Aktion verwenden. Die Sprachwiedergabe bietet Ihnen Zugriff auf eine leistungsstarke Text-in-Sprache-Engine, die Sie beim Design für neue Plattformen wie Sprachassistenten oder intelligente Lautsprecher unterstützt. Weitere Informationen finden Sie unter Design von Prototypen mit Sprachunterstützung in Adobe XD.

Im folgenden Video erhalten Sie weitere Informationen zu Sprachbefehlen und Sprachwiedergabe.


Authoring und Wiedergabe mit Auto-Animate und Ziehgesten

Auto-aminamte--1(source)
Auto-Animate in Aktion

Mit Auto-Animate ist es ein Leichtes, Prototypen mit beeindruckenden animierten Übergängen zu erstellen. Sie duplizieren einfach eine Zeichenfläche, ändern Objekteigenschaften wie Größe, Position, Drehung und wenden eine Auto-Animate-Aktion an. Dadurch wird ein animierter Übergang zwischen den Zeichenflächen erstellt. Damit Sie die Funktion Auto-Animate anwenden können, muss jedes der zu animierenden Objekte auf beiden Zeichenflächen den gleichen Ebenennamen besitzen. Weitere Informationen finden Sie unter Erstellen von Prototypen mit automatischen Animationen.

Mit den Ziehgesten in XD wird die Auto-Animate-Funktion noch einen Schritt weitergeführt, da Sie das Zieherlebnis bei berührungsfähigen Geräten simulieren können. Weitere Informationen finden Sie unter Ziehgeste in Aktion.

Im folgenden Video erhalten Sie weitere Informationen zu Auto-Animate.


Dokumentübergreifende Freigabe mittels verknüpfter Komponenten

Linked-Symbol-Concept

Mit immer größeren Designteams innerhalb von Unternehmen und immer mehr Designoberflächen müssen Designer in Teams zusammenarbeiten, um konsistente und skalierbare Designs zu erstellen. Mit verknüpften Komponenten können Designer dieselbe Komponente in verschiedenen Dokumenten verwenden und sicherstellen, dass sie stets die aktuelle Version der Komponente verwenden.

Anhand von verknüpften Komponenten können Sie eine einzige Quelle der Komponente für UI-Kits, Stickerbögen oder Styleguides erstellen und sie in anderen Adobe XD Dokumenten verwenden. Wenn Sie eine verknüpfte Komponente im Quelldokument aktualisieren, benachrichtigt XD alle Dokumente mit Instanzen dieser verknüpften Komponente über diese Aktualisierungen. Von dort aus können Sie eine Vorschau der Änderungen anzeigen und dann entscheiden, ob Sie sie annehmen oder ablehnen. Weitere Informationen finden Sie unter Arbeiten mit verknüpften Komponenten.

Im folgenden Video erhalten Sie weitere Informationen zu verknüpften Komponenten.


Design-Tool-Innovationen durch Plug-ins

Plugins-updated

Adobe XD startet die erste Welle von Plug-ins, mit denen Sie z. B. Aufgaben automatisieren, Integrationen mit anderen Tools realisieren oder Daten in Ihren Designs nutzen können. Dies beinhaltet auch Integrationen mit einigen der besten Applikationen für Zusammenarbeit und Produktivitätssteigerung auf dem Markt wie Slack, JIRA oder Microsoft Teams.

Wie Sie erste Plug-ins erstellen, erfahren Sie unter Plug-ins für Adobe XD.

Nahtloser Austausch von Elementen mit Illustrator und After Effects

Elemente aus Illustrator importieren
Elemente aus Illustrator importieren

Ab Adobe XD 13.0 können Sie Layout-Designs und Elemente aus Illustrator übernehmen, indem Sie AI-Dateien in Adobe XD öffnen. Der neue, schnelle und praktische Arbeitsablauf ermöglicht Ihnen den nahtlosen Austausch von Elementen mit nativer Zuordnung von Ebenen, Zeichenflächen, Grafiken und Vektoren mit bester visueller Genauigkeit und die Optimierung der Zusammenarbeit in verschiedenen Phasen des UX-Prozesses. Weitere Informationen finden Sie unter Illustrator-Dateien in XD öffnen.

Vorteile der Funktionen:

  • Nahtlose Nutzung von Illustrator-Elementen in Prototypen: Übernehmen Sie Symbole, Logos und andere Vektorelemente in XD und verwenden Sie UI-Kits oder vollständige Bibliotheken, die in Illustrator erstellt wurden, vollständig editierbar sind und die Ebenen dennoch bei voller visueller Wiedergabetreue erhalten.
  • Erstellen interaktiver Designs in Gemeinschaftsarbeit: Öffnen Sie Illustrator-Dateien in XD und verwenden Sie die leistungsfähigen Funktionen von XD für Prototyping und Zusammenarbeit.

Im folgenden Video erhalten Sie weitere Informationen zur Illustrator-Integration.


Animationen in After Effects erstellen
Animationen in After Effects erstellen

Ab Adobe XD 13.0 können Sie XD Designs (ausgewählte Ebenen oder ganze Zeichenflächen) nach After Effects exportieren, um benutzerdefinierte UI-Animationen und Mikrointeraktionen zu erstellen. Sie können nahtlos Ebenen, Zeichenflächen, Grafiken und Vektoren mit gleicher visueller Genauigkeit exportieren und die zahlreichen leistungsstarken Plug-ins für After Effects verwenden, um Ihre Zusammenarbeit mit den Entwicklern zu optimieren. Weitere Informationen finden Sie unter Elemente nach After Effects exportieren.

Vorteile der Funktionen:

  • Vollständige Kontrolle über Ihre Animationen: Designer können After Effects verwenden, um benutzerdefinierte Animationen und Mikrointeraktionen zu erstellen, Übergänge zu optimieren oder Videos in Ihren Designs zu verwenden.
  • Nahtloser Austausch von Elementen: Durch diese Integration profitieren Sie von einem schnellen Austausch von Elementen und einer nativen Zuordnung von Ebenen, Vektoren und Grafiken, wodurch die Weiterentwicklung vom Design zu benutzerdefinierten Animationen viel schneller umsetzbar ist.
  • Wirksame Verwendung von Plug-ins: Sie können Ihre Animationen und die Zusammenarbeit mit den Entwicklern erweitern, indem Sie die zahlreichen Plug-ins für After Effects für einen maßgeschneiderten UX-Designprozess nutzen.

Prototypen aus XD für Win 10 in Echtzeitansicht auf iOS testen

Mobile-Preview

Ab XD 13.0 können Designer, die auf Windows arbeiten, eine USB-Verbindung verwenden, um ihre Designs auf iOS zu testen. Weitere Informationen finden Sie unter Echtzeitansicht auf iOS/Android.

Neue Funktionen in Adobe XD 12

 Die XD Version vom September 2018 besitzt folgende interessante neue Funktionen:

Verbesserungen:

Mehr dazu erfahren Sie in den folgenden Abschnitten.

Responsive Resize und Bedingungen

Beim Gestalten von Designs für verschiedene Geräte müssen Sie auf die verschiedenen Bildschirmgrößen achten, die auf Smartphones, Tablets und Desktops verwendet werden. Da nicht alle Designer die gleichen Geräte verwenden, muss berücksichtigt werden, wie Inhalte auf Bildschirmen unterschiedlicher Größe dargestellt werden. 

Um dieses Benutzerproblem zu lösen, wurde für Adobe XD eine Funktion mit dem Namen „Responsive Resize“ entwickelt, mit der Objekte zur optimalen Anpassung an mehrere Bildschirmgrößen skalieren werden, während bei unterschiedlicher Größe die relativen räumlichen Positionen beibehalten werden. Weitere Informationen zu Responsive Resize und Bedingungen finden Sie unter Responsive Resize.

Im folgenden Video erhalten Sie weitere Informationen zu Responsive Resize.


Responsive Resize
Responsive Resize – das Ergebnis
Bedingungen für Objektgruppen festlegen
Bedingungen für Objektgruppen einrichten

Zeitgesteuerte Übergänge

Mit zeitgesteuerten Übergängen wird eine Kombination von Verzögerung und Dauer auf Übergänge zwischen Zeichenflächen angewendet, um schnelle Onboarding-Flows oder Schleifen zu erstellen. Hierzu verwenden Sie den neuen Trigger vom Typ Zeitgesteuert.

Mit dem Trigger Zeitgesteuert können Sie jetzt den Übergang zwischen Zeichenflächen mit einer bestimmten zeitlichen Verzögerung ablaufen lassen. Dies ist hilfreich, um einen Prototyp für Onboarding- oder Entscheidungs-Flows zu erstellen. 

Wenn Sie im Prototypmodus einen Übergang zwischen zwei Zeichenflächen erstellen, können Sie jetzt Zeitgesteuert anstelle von Antippen auswählen und die Dauer der Verzögerung sowie den gewünschten Übergang festlegen. XD speichert dann die Attribute von diesem Bildschirm und schlägt sie als Standard für weitere Bildschirme vor. Weitere Informationen zu zeitgesteuerten Übergängen finden Sie unter Zeitgesteuerte Übergänge verwenden.

Im folgenden Video erhalten Sie weitere Informationen zu zeitgesteuerten Übergängen.


Zeitgesteuerte Übergänge festlegen
Zeitgesteuerte Übergänge festlegen

A. „Trigger“ auf „Zeitgesteuert“ festlegen B. „Verzögerung“ in Sekunden angeben C. Als „Aktion“ „Übergang“ einstellen D. „Dauer“ in „Sekunden“ angeben 

Integrierte Rechtschreibprüfung

Adobe XD bietet jetzt eine integrierte Rechtschreibprüfung, die in Echtzeit direkt auf der Design-Arbeitsfläche ausgeführt wird. Diese Funktion schlägt Korrekturen auf Grundlage der Betriebssystemsprache vor. Sie haben auch die Möglichkeit, dem Wörterbuch neue Wörter hinzuzufügen.

Bisher mussten Benutzer die Inhalte in eine andere Anwendung kopieren oder einfügen, um sie auf Rechtschreib- und Tippfehler zu überprüfen. 

Ab dieser Version können Sie eine Rechtschreibprüfung des ausgewählten Textes ausführen und Rechtschreibfehler anzeigen lassen und korrigieren.

Hinweis:

Stellen Sie vor dem Starten der Rechtschreibprüfung sicher, dass Sie im Menü Bearbeiten die Rechtschreibprüfung aktiviert haben.

Rechtschreibung prüfen
Rechtschreibung prüfen

Weitere Informationen zur Rechtschreibprüfung finden Sie unter Rechtschreibung prüfen.

Verbesserungen bei der Anzeige von Web-Prototypen im Vollbildmodus

Für Benutzer, die Designs im Browser anzeigen, wurde das Skalierungsverhalten beim Wechsel in den Vollbildmodus verbessert.

Web- und benutzerdefinierte Zeichenflächen werden jetzt ab dem oberen Rand des Browsers angezeigt, ohne dass Probleme mit schwarzen Lücken auftreten. Zeichenflächen für Mobilgeräte sind jedoch weiterhin im Vollbildmodus auf dem Bildschirm zentriert.

Diese Verbesserungen bieten eine realistischere Darstellung beim Anzeigen einer Zeichenfläche im Webformat.

Im folgenden Video erhalten Sie weitere Informationen zu den Verbesserungen bei der Anzeige von Web-Prototypen im Vollbildmodus.


Full-screen-(Before)
Früheres Verhalten
Verbessertes Skalierungsverhalten, wenn ein Web-Prototyp im Vollbildmodus angezeigt wird
Verbessertes Verhalten

Dies entspricht dem tatsächlichen Browserverhalten, da die Hintergrundfarbe der Browser immer Weiß ist und standardmäßig keine schwarze Hintergrundfarbe hinzugefügt wird.

Verbesserungen bei der Standard- und Vollbildansicht:

  • Wenn die Zeichenfläche breiter als der verfügbare horizontale Abstand ist, wird der Prototyp so skaliert, dass die Breite ohne horizontalen Bildlauf Platz hat.
  • Wenn Sie (im Eigenschafteninspektor) die Viewport-Höhe definiert haben, wird zuerst die Höhe des Prototyps angepasst und dann die Breite skaliert, um das Seitenverhältnis beizubehalten. Sie können auch einen vertikalen Bildlauf zum Anzeigen des Inhalts unterhalb der Viewport-Höhe durchführen.
  • Handelt es sich bei dem erstellten Prototyp um eine Web- oder benutzerdefinierte Zeichenfläche, wird der veröffentlichte Link im Webbrowser ab dem oberen Rand des Browser-Fensters angezeigt, wenn der Vollbildmodus aktiviert ist. Designs für Mobil- und Tablet-Geräte bleiben auf dem Bildschirm zentriert.
  • Die Hintergrundfarbe im Vollbildmodus ist nicht mehr Schwarz, sondern Weiß. Dies entspricht dem tatsächlichen Browserverhalten, da Browser standardmäßig keine schwarze Hintergrundfarbe verwenden.

Verbesserungen bei der Darstellung von Zeichenflächen auf Mobilgeräten:

  • Der Inhalt wird an die Höhe angepasst und die Breite wird bei gleichbleibendem Seitenverhältnis entsprechend skaliert.
  • Wenn Sie den veröffentlichten Link in einem Webbrowser im Vollbildmodus anzeigen, wird der Inhalt in der Mitte des Browser-Fensters angezeigt. 

Neue Funktionen in Adobe XD 11

Elementextrahierung in Design-Spezifikationen

Ab XD 11.0 können Sie für den Export markierte Ebenen als Elemente in Design-Spezifikationen einschließen und Entwickler können alle so markierten Ebenen über den Link zur Design-Spezifikation herunterladen.

Entwickler können dann festlegen, ob Vektor-Assets als SVG-, PNG- oder PDF-Dateien heruntergeladen werden und Bitmap-Assets als PNG- oder PDF-Dateien.

Exportieren von Elementen
Markierte Elemente exportieren
Markierte Elemente exportieren

Weitere Informationen finden Sie unter Elementextrahierung in Design-Spezifikationen.

Elemente im Bedienfeld „Elemente“ anders anordnen

Ab dieser Version von Adobe XD können Sie Ihre Elemente organisieren und neu anordnen, indem Sie einzelne oder mehrere Elemente über das Bedienfeld Elemente ziehen. 

Elemente anders anordnen
Elemente anders anordnen

Weitere Informationen finden Sie unter Elemente im Bedienfeld „Elemente“ anders anordnen.

Private Einladungen im Web verwenden

Mit Adobe XD haben Sie die Möglichkeit, über die Weboberfläche sichere Einladungen für Design-Spezifikationen und Prototypen (öffentliche und private Links) nur an benannte Personen zu senden. Wenn ein Designer eine sichere benannte Einladung veröffentlicht, kann er mithilfe der Option Einladen weitere interne und externe Reviewer einladen.

Vom Browser aus private Einladungen an Benutzer senden
Vom Browser aus private Einladungen an Benutzer senden

Hinweis:

Die Option Einladen ist nur für den Designer des Dokuments sichtbar. Die eingeladenen Stakeholder können niemanden einladen, es sei denn, der Designer erteilt ihnen dazu die Berechtigung.

Weitere Informationen finden Sie unter Private Einladungen im Web verwenden.

Unterstützung von @mention für Kommentare

Mit @mention können Sie die Namen der Benutzer anzeigen, die eingeladen wurden, auf eine private Design-Spezifikation zuzugreifen. Bei öffentlichen Prototypen und Design-Spezifikationen erscheinen in der Reviewerliste nur Benutzer, die mindestens einen Kommentar abgegeben haben. Der namentlich erwähnte Reviewer erhält entweder eine E-Mail oder eine Benachrichtigung vom Creative Cloud-Client. Wenn Sie auf die Benachrichtigung klicken, werden Sie zur entsprechenden Zeichenfläche weitergeleitet.

@mention
@mention

Weitere Informationen finden Sie unter Arbeitsablauf für Reviewer.

Unterstützung verschiedener Konturtypen in Design-Spezifikationen

Ab XD 11.0 können Benutzer ein beliebiges Objekt in den freigegebenen Design-Spezifikationen auswählen und auf seine Rahmen klicken, um die auf dem Bildschirm verwendeten Konturen anzuzeigen. 

Konturtypen
A. Konturtypen 

Weitere Informationen finden Sie unter Auswertung der Design-Spezifikationen.

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