Creative Connection

Das März Update für Adobe XD ist da!

Unser März-Update für Adobe XD bringt eine Menge Verbesserungen mit sich, die eure Arbeit noch produktiver machen. Das beinhaltet auch einen verbesserten Workflow beim Arbeiten mit XD und Illustrator: Das Einfügen von Elementen in Illustrator für präzise Vektorbearbeitungen ist jetzt so einfach wie das Copy & Paste in die App (und Copy & Paste in XD, wenn ihr fertig seid). Außerdem gibt es Verbesserungen beim Exportieren, die eine Menge Zeit sparen. Zum Beispiel ein neues, leicht zugängliches Kästchen für Import-Markierungen sowie die Möglichkeit, dieses für mehrere ausgewählte Objekte auf der Entwurfsfläche anzuwählen.

Auch die Arbeit mit Schriften soll ab sofort einfacher funktionieren. Wenn ihr nun ein Design einbringt, das unbekannte Schriften enthält, werden diese automatisch im Hintergrund geladen. Die mühsame manuelle Suche nach fehlenden Schriften entfällt also. Ab sofort habt ihr außerdem mehr Kontrolle über UI-Elemente von Prototypen für effektivere Usability-Tests; Jira-Server-Integration; die Möglichkeit, Ziehgesten im Browser anzuzeigen, und eine Verbesserung der direkten Auswahl, die es euch ermöglicht, mehrere Elemente aus verschiedenen Objektgruppen auszuwählen – das spart Zeit bei komplexen Benutzeroberflächenprojekten. Was es sonst noch Neues gibt, verraten wir euch jetzt.

Neu: Kopieren und Einfügen editierbarer Vektoren direkt in Illustrator

Designer, die sowohl mit Adobe XD als auch mit Illustrator arbeiten, dürfen sich diesen Monat über neue Funktionen freuen, mit denen sie komplexe Vektorinhalte wie eine Reihe von Symbolen oder Logodesigns verwalten können. Sie können nun Vektoren in XD kopieren und als vollständig editierbaren Vektorinhalt in Illustrator einfügen. Dieser einfache Copy-&-Paste-Prozess ermöglicht die schnelle Anpassung kleiner Details der Designelemente, wie ihr auch im Video sehen könnt.

Besagter Copy & Paste Workflow wird durch SVG (Scalable Vector Graphics) auf dem Clipboard ermöglicht. SVG ist in vielen modernen Webbrowsern integriert und auflösungsunabhängig; wenn ihr die Inhalte aus Adobe XD exportiert, könnt ihr die Symbole im SVG-Format speichern.

Verbessert: Elemente für den Export markieren

Was den Entwicklungsprozess betrifft, so hat das Adobe XD-Team es nun einfacher gemacht, eure Arbeit in die Produktion zu übergeben. Während es schon immer möglich war, einzelne Elemente manuell für den Export im Ebenenbereich zu markieren, markiert XD nun automatisch alle Elemente für den Export, die aus Photoshop und Illustrator importiert wurden.

Außerdem könnt ihr jetzt auch über das rechte Menü auf der Entwurfsfläche, eine Tastenkombination oder direkt im Eigenschafteninspektor Elemente für den Export markieren. Mehr dazu im Video.

Wenn ihr nicht alle Elemente einzeln zum Export auswählen wollt, wählt einfach „Alle auswählen“ auf der Entwurfsfläche und klickt auf „Für Export markieren“, um diese Option für alle Elemente festzulegen. Klickt ihr ein zweites Mal, werden die Markierungen rückgängig gemacht. Wenn ihr euer Design an den Entwickler geben wollt, geht auf Datei auswählen > Exportieren, um alle Elemente herunterzuladen und zu teilen > Teilen für Entwicklung. So kann der Entwickler das finale Dateiformat sowie die Auflösungsinformation kontrollieren.

Fehlende Schriften werden automatisch geladen

Wir wissen, dass ein reibungsloser Workflow bezüglich Schriften-Management essenziell ist. Deshalb haben wir einige Verbesserungen in diesem Bereich vorgenommen. In älteren Versionen von XD war es etwas schwierig, Schriften in Designs zu verwalten, wenn ihr diese Schriften aus eurem Creative Cloud-Konto entfernt hattet, oder wenn ein anderer Designer ein XD-Dokument mit euch geteilt hat, das Schriften enthielt, die ihr nicht auf eurem PC geladen hattet.

Wenn ihr jetzt ein Dokument mit Schriften öffnet, die ihr momentan nicht in der Creative Cloud installiert habt, wird im Hintergrund automatisch Adobe Fonts aktiviert, ohne dass ihr das Dokument schließen müsst.

Im Video seht ihr, dass eine neue Fläche für fehlende Schriften in XD hinzugefügt wurde. Das Asset-Panel umfasst diese neue Fläche, damit ihr fehlende Schriften leicht identifizieren und installieren könnt. Oder ihr ersetzt die fehlende durch eine Schrift, die ihr bereits geladen habt.

Gruppenübergreifende Änderung von Objektattributen

Wenn ihr eine umfassende Benutzeroberfläche mit vielen Elementen in XD erstellt, ist die Gruppierung dieser Elemente ein Muss, um eure Objekte übersichtlich zu halten. Wenn es jedoch darum geht, einzelne Objekte in einer Gruppe zu bearbeiten, kann der Prozess umständlich sein. Deshalb haben wir die Direktauswahl erweitert, um die gruppenübergreifende Auswahl (und Bearbeitung) von Inhalten zu erleichtern.

Wenn ihr jetzt Änderungen an mehreren Elementen vornehmen wollt, diese Elemente aber verschiedenen Gruppen angehören, könnt ihr sie ganz einfach durch Befehl+Umschalt+Klick (macOS) bzw. Strg+Umschalt+Klick (Windows) einzeln auswählen. Ihr könnt alle gemeinsamen Attribute der ausgewählten Gruppe im Eigenschafteninspektor bearbeiten, Inhalte duplizieren und vieles mehr.

Ihr müsst die Gruppierung von Objekten also nicht mehr aufheben, nur um Änderungen an bestimmten Elementen vorzunehmen. Eine kleine Änderung, die jedoch eine große Zeitersparnis bedeuten kann.

Mehr Kontrolle bei Usability-Tests

Wie ihr im folgenden Video sehen könnt, könnt ihr nun die Navigationssteuerung deaktivieren, wenn ihr einen Prototyp zur Überprüfung freigeben wollt. Dies verbirgt die vorherigen/nächsten Steuerelemente und die gesamte Anzahl der Zeichenflächen, die normalerweise in Web-Prototypen sichtbar sind und ermöglicht so ein authentischeres Web-Erlebnis für Test-User.

Ihr habt auch die Möglichkeit, die Option Hotspot-Hints zu deaktivieren, was bedeutet, dass euer Benutzer keine Hinweise darauf erhält, wo er klicken soll. Er wird gezwungen sein, mit der Benutzeroberfläche zu interagieren, als sei es eine Live-Anwendung – ein echter Usability-Test ohne Hinweise.

Verbesserte Integration mit Jira und Ziehgesten im Webbrowser

Die Integration von Adobe XD mit Jira Software optimiert die Zusammenarbeit zwischen Designern und Entwicklern und bietet sofortigen Zugriff auf freigegebene XD-Prototypen und Designspezifikationen direkt im Jira-Projekt. Letzten September haben wir bereits XD für Jira mit Unterstützung für die Jira Software Cloud gelauncht. Jetzt freuen wir uns, die Unterstützung für Jira Software Server und Jira Software Data Center hinzuzufügen, um diese Vorteile für Unternehmenskunden nutzbar zu machen, die eine maßgeschneiderte Lösung mit speziellen Data Governance-Anforderungen benötigen. Erfahrt mehr auf unserer Atlassian Marketplace Seite. Hier erfahrt ihr, wie eure Jira-Administratoren es aktivieren können.

Ein weiterer großer Schritt beim Betrachten von Prototypen im Webbrowser: Bei der Überprüfung von Prototypen und Design-Spezifikationen im Browser werden jetzt Animationen von Ziehgesten angezeigt.

XD-Plugin-Ökosystem: KI zur Verbesserung von UX

Unsere wachsende Entwickler-Community schafft mit neuen Plugins ständig weitere Innovationen. Diesen Monat stellen wir zwei Plugins vor, die KI verwenden. Mit Vempathy for XD könnt ihr Prototypen in ein Self-Service-Portal exportieren, sodass ihr Anzahl und Profile der Benutzer auswählen könnt und Aufgaben, die sie ausführen sollen. Klickt auf Senden und es wird ein Standard-Benutzertest gestartet, der das Video des Teilnehmers aufzeichnet, der mit eurem XD-Prototypen interagiert und die Stimmung durch Video- und Audioanalyse ermittelt. Die Testergebnisse werden innerhalb von 24 Stunden an euer Portal gesendet. Das zweite Plugin integriert XD mit dem neuen Service “this person does not exist”, sodass ihr KI-generierte Avatare in eure Designs integrieren könnt.

UX Community

Wir freuen uns über Kritik und Anregungen! Helft uns, die Zukunft von Adobe XD zu gestalten, indem ihr Funktionsanfragen oder Dateifehler an https://adobexd.uservoice.com sendet. Um über neue Updates auf dem Laufenden zu bleiben oder unser Team zu erreichen, folgt uns auf unter dem Handle @AdobeXD oder dem Hashtag #AdobeXD auf Twitter. Außerdem erreicht ihr uns auf Facebook, wo wir Videos und Updates teilen und in Live-Sessions Fragen beantworten.
#MadeWithAdobeXD

Wenn ihr eure Prototypen auf Behance teilt, vergesst nicht, sie mit #MadeWithAdobeXD zu taggen und Adobe XD unter „Verwendete Tools“ auszuwählen, um die Möglichkeit zu bekommen, im Adobe XD Newsletter gefeatured zu werden.

UX/UI Design, Web-Design

Join the discussion