Das September-Update für Adobe XD ist da!

Der September bringt ein spannendes Update für Adobe XD mit neuen Tools, mit denen du mühelos für mehrere Geräte mit unterschiedlichen Bildschirmgrößen designen und zeitgesteuerte Übergänge nutzen kannst, um deinen Prototyp noch realistischer zu machen. Responsive Resize ermöglicht das Skalieren von Zeichenflächen oder Gruppierten Elementen unter Beibehaltung der relativen Platzierung und des Maßstabs – ohne vorheriges Festlegen von Regeln. Zeitgesteuerte Übergänge ermöglichen zum Beispiel das Simulieren von Ladebalken, Loop-Animationen und mehr. Zudem wurde die Vollbildanzeige von Prototypen im Browser verbessert und es gibt nun eine Rechtschreibprüfung innerhalb XD.

Neu in XD: Responsive Resize

Adobe XD enthält nun die Responsive Resize-Funktion, die es dir erlaubt, ganze Zeichenflächen oder Gruppen von Objekten zu skalieren, ohne dabei Elemente zu verzerren. Alles, was du tun musst, ist, die Größe der Gruppe auf der Zeichenfläche zu ändern, und XD hält den relativen Abstand und Maßstab der Elemente.

„Um unsere ständig wachsende Element-Bibliothek zu erweitern, muss unser Team verschiedenen Bildschirmgrößen bereits bei der Ideenfindung berücksichtigen”, sagt Greg Pilawa, UX/UI Design Manager bei Wyndham Hotels and Resorts.. “Die neue Responsive Resize-Funktion von XD gibt uns die Möglichkeit, schnell über mehrere Geräte hinweg zu konzipieren, zu entwerfen und zu testen, ohne dass wir jede Komponente von Grund auf neu erstellen oder jedes Element individuell anpassen müssen. Das wird es uns zweifellos ermöglichen, schneller und mehr zu bauen.” Schau dir die Responsive Resize-Funktion in folgendem Video an:

XD zielt darauf ab dir die Arbeit bei der Größenanpassung von Elementen auf andere Bildschirme oder anderen Kontext so leicht wie möglich zu machen und dein Design sinnvoll auf die neuen Dimensionen anzupassen. Neben dem automatischen Modus kannst du jederzeit in den manuellen Modus zu wechseln, um Bedingungen für die Skalierung manuell zu bearbeiten und somit mehr Kontrolle zu nehmen.

Es gibt viele Möglichkeiten, wie Responsive Resize verwendet werden kann, der Prozess des Entwurfs für mehrere Geräte ist nur einer davon.

Neu in XD: Zeitgesteuerte Übergänge

Mit dem Hinzufügen von Zeit als neuem Trigger kannst du Übergänge zwischen Zeichenflächen nun basierend auf einer bestimmten Verzögerung auslösen. Du kannst damit zum Beispiel Loop-Animationen mit Verzögerungen für Auto-Fade-Effekte, Spinner, Loader, Fortschrittsbalken und mehr erstellen.

Wenn du im Prototyp-Modus einen Übergang zwischen zwei Zeichenflächen erstellst, kannst du nun Zeit statt Tippen als Auslöser auswählen, und du kannst festlegen, wie lange die Verzögerung dauern soll. XD speichert deine Attribute und bietet sie auf weiteren Zeichenflächen als Standard an. Schau dir das Video unten an, um Zeitgesteuerte Übergänge in Aktion zu sehen, und sieh zu, wie sie verwendet werden können, um ein Onboarding-Erlebnis in einer App zu simulieren.

Neu bei XD: Rechtschreibprüfung

Jetzt ist der große Lebensretter des digitalen Textens offiziell Teil von Adobe XD. Die Rechtschreibprüfung wurde in XD integriert. Alles, was du tun musst, ist die Rechtschreibprüfung in XD zu aktivieren (sie ist standardmäßig aktiviert), und sobald du deinem Design Text hinzufügst bzw. bearbeitest, werden Dir dort eventuelle Rechtschreibfehler hervorgehoben. Sieh dir im folgenden Video an, wie die Rechtschreibprüfung in Adobe XD aussieht.

Natürlich kannst du auf eine Liste von Vorschlägen für potenziell falsch geschriebene Wörter zugreifen, und um dir Zeit zu sparen, schlägt XD die Schreibweise aller Wörter vor, die du möglicherweise falsch geschrieben hast, während du sie eingibst. Es gibt auch grammatikalische Vorschläge.

Verbessert in XD: Vollbildbetrachtung von Web-Prototypen

Wir haben eine Reihe von Verbesserungen an den Vollbildoptionen in Adobe XD vorgenommen, sodass du anderen eine realistischere Darstellung typischer Designs wie App oder Website im Browser ermöglichen kannst. Web- und benutzerdefinierte Zeichenflächen werden nun bündig mit der oberen Kante des Browserfensters angezeigt, während mobile Zeichenflächen weiterhin im Vollbildmodus auf dem Bildschirm zentriert sind.

Wenn die Zeichenflächenbreite größer als der verfügbare horizontale Raum ist, passt sich der Prototyp der Breite an, ohne horizontal zu scrollen. Du kannst dir ein Video der neuen Vollbild-Ansichtsoptionen unten ansehen.

Die Hintergrundfarbe im Vollbildmodus ist nun weiß statt schwarz. Dadurch wird jede Verwirrung des Benutzers vermieden; die meisten Browser haben einen standardmäßig weißen Hintergrund, und am Ende war es die Community die sich diese Änderung gewünscht hat. Euer Wunsch, unser Auftrag.

UX-Community

Wir würden den Dialog gerne fortsetzen! Helft uns weiterhin, die Zukunft von Adobe XD zu gestalten, indem ihr uns Wünsche für bestimmte Funktionen oder Hinweise zu Dateibugs senden. Ganz einfach unter . Folgt unser unter für Updates oder kontaktiert unser Team auf mit dem Hashtag #AdobeXD. Auch über könnt ihr gerne Kontakt mit uns aufnehmen, wo wir Videos und Updates austauschen und Fragen während der Live-Sessions beantworten.

Wir würden den Dialog gerne fortsetzen! Hilf uns, die Zukunft von Adobe XD zu gestalten, indem du Deine Ideen oder gar Fehlerberichte auf https://adobexd.uservoice.com einträgst. Für Neuigkeiten kannst Du uns per @AdobeXD auf Twitter folgen und das Team auch mit dem Hashtag #AdobeXD erreichen. Du kannst mit uns auch über Facebook sprechen, wo wir Videos und Updates austauschen und Fragen während der Live-Sessions beantworten.

#MadeWithAdobeXD

Wenn du deine Prototypen bei Behance teilst, vergiss nicht, ihn mit #MadeWithAdobeXD zu versehen und Adobe XD unter “Verwendete Tools” auszuwählen, um im Adobe XD Newsletter vorgestellt zu werden.

Wir sind jetzt auf Instagram! Folgt @adobecreativecloud_de und zeigt uns unter dem Hashtag #AdobeCreativeCrowd, was ihr draufhabt!