Adobe XD-Release Oktober 2020: Schneller zum Ziel mit 3D-Transormation, Creative Cloud-Bibliotheken, Visual Studio Code und mehr

von Andrew Shorten

Vor drei Jahren haben wir XD im Rahmen der Adobe MAX vorgestellt – inzwischen setzt eine internationale community von über einer million designer*innen täglich auf XD, um Websites, Web- und mobile Apps, digitale Marketingkampagnen und vieles mehr zu entwickeln. Natürlich haben wir auch im Rahmen der aktuellen MAX wieder jede Menge spannende Updates für euch.

Freut euch darauf, neue Dimensionen zu erkunden und als Designer*innen und Entwickler*innen noch enger zusammenarbeiten zu können. Denn je effizienter eure Workflows laufen, desto besser sind am Ende eure Ergebnisse. Und genau darauf kommt es heute an: Mitreißende Erlebnisse zu gestalten, die nachhaltig begeistern.

Adobe XD

Designs, wie du sie dir vorstellst.

Erfahrt mehr >

Kreatives Arbeiten ohne Grenzen mit 3D-Transformation

Die Welt der digitalen Erlebnisse entwickelt sich ständig weiter. Unsere Geräte und Betriebssysteme ändern sich laufend, die Schnittstellen werden immer vielfältiger und immersiver, neue Erlebniswelten wie Augmented und Virtual Reality setzen sich zunehmend durch. Der Haken: Die Tools, die wir zur Gestaltung dieser Erlebnisse verwenden, sind auf flache, zweidimensionale Designstile beschränkt.

Mit 3D-Transformation führen wir jetzt eine völlig neue Art des Designs in XD ein. Das Tool erlaubt es euch, Objekte vorwärts, rückwärts und über Ebenen hinweg zu verschieben und zu drehen, um euren Entwürfen Tiefe und Perspektive zu verleihen und neue Arten von Benutzererlebnissen zu gestalten.

Die Möglichkeiten, eure Designs durch 3D-Transformation auf das nächste Level zu heben, sind nahezu unbegrenzt: Überlagert UI-Elemente in physischen Räumen, um Augmented-Reality-Erlebnisse zu gestalten oder Objekte für spielerische Interaktionen und Animationen zu drehen und zu wenden. Ihr könnt außerdem Objekte in der Tiefe stapeln, um Schichteffekte zu erzeugen, eure Designs drehen und neigen oder Mockups perspektivisch darstellen.

3D-Transformation funktioniert für Formen, Text oder Gruppen. Wenn ihr Objekte in eine transformierte Gruppe einfügt, wendet XD die Transformationen automatisch auf die eingefügten Objekte an. 3D-Transformation funktioniert auch mit anderen Features in XD wie Bildlaufgruppen, Wiederholungsraster und Auto-Animationen.

3D-Transformation ist ein so leistungsstarkes wie intuitiv zu bedienendes Tool. Wählt ein Objekt aus und aktiviert 3D-Transformation im Eigenschafteninspektor (oder drückt ⌘/Strg + T), schon erscheint auf eurer Arbeitsfläche ein neues Steuerelement zum Verschieben und Drehen von Objekten auf verschiedenen Ebenen. Ziemlich simpel, oder?

Wir sind gespannt auf eure Ergebnisse! Teilt eure Projekte unter dem Hashtag #CreateWithAdobeXD in den sozialen Medien und mit ein bisschen Glück werdet ihr in unseren Channels vorgestellt. Alle Informationen findet ihr auf Let’s XD.

Skalierbares Design mit Creative Cloud-Bibliotheken

Da Designteams immer größer werden, ist es wichtig, dass alle Teammitglieder in engem Austausch bleiben. Designsysteme helfen Teams dabei, Ressourcen zu zentralisieren und eine gemeinsame Sprache zu entwickeln, wie die digitale Erfahrung aussehen soll. Sie bieten auch die Grundlage, auf der neue Erfahrungen auf konsistente und skalierbare Weise erstellt werden. Heute führen wir wichtige Verbesserungen bei der Arbeit mit Designsystemen in XD ein.

Deshalb könnt ihr in eurem Team jetzt über Creative Cloud-Bibliotheken Designsysteme erstellen und gemeinsam nutzen. Mit nur einem einzigen Klick könnt ihr eure Entwürfe so mit eurem gesamten Team teilen und Dateien gemeinsam bearbeiten.

Dokument-Assets sind die Bausteine eures Designsystems. Nachdem ihre eure Assets (Farben, Zeichenformate und Komponenten) ausgewählt habt, klickt ihr einfach auf das Symbol „Veröffentlichen“, um eine Bibliothek zu erstellen. Ihr könnt zudem steuern, wer Zugriff auf eure Bibliothek haben soll und Updates systemübergreifend verwalten.

Innerhalb des Designsystems hat jedes Teammitglied eine spezifische Rolle. Mit Bibliotheken könnt ihr Berechtigungen festlegen und verwalten – so habt ihr die volle Kontrolle darüber, wer Entwürfe aktiv mitgestalten darf und wer lediglich Leserechte erhält.

Für eure Zusammenarbeit setzt ihr bestimmt auf mehr als eine Anwendung. Ob ihr nun Illustrationen in Illustrator bearbeiten oder Hero Images in Photoshop optimieren wollt – mithilfe von Bibliotheken könnt ihr ganz einfach auf eure Inhalte in anderen Creative Cloud-Anwendungen zugreifen oder Assets wie Farben, Zeichenformate und Grafiken nahtlos in XD und im Rest der Creative Cloud verschieben. So könnt ihr euer eigenes kreatives Ökosystem aufbauen und innerhalb der Creative Cloud Anwendungen nahtlos über alle Tools hinweg arbeiten.

Ihr könnt Bibliotheken veröffentlichen und freigeben, egal welchen XD-Plan ihr abonniert habt. Nächstes Jahr wird die Veröffentlichung und gemeinsame Nutzung von Bibliotheken bei kostenpflichtigen Plänen unbegrenzt und auf eine veröffentlichte Bibliothek mit bis zu einem weiteren Herausgeber im XD-Starterplan beschränkt sein.

Designer*innen und Entwickler*innen mit Designsystemen verbinden

Damit ein Designsystem zum Erfolg wird, muss es sowohl von Designer*innen als auch von Entwickler*innen gestaltet und gepflegt werden. Oftmals ist dieser Workflow über mehrere Tools verteilt, das heißt Entwickler*innen müssen zwischen verschiedenen Tools hin und her wechseln.

Wir finden: Das geht auch besser. Deshalb führen wir die Adobe XD-Erweiterung für Microsoft Visual Studio Code ein, die es Entwicklern ermöglicht, mit Designsystemen zu arbeiten, ohne jemals ihren Editor verlassen zu müssen. Visual Studio Code ist einer der beliebtesten Code-Editoren für Entwickler, die mit einer beliebigen Programmiersprache arbeiten, und er ist kostenlos für Windows, MacOS und Linux erhältlich.

Die Adobe XD-Erweiterung für Visual Studio Code, die jetzt auf dem Visual Studio Marketplace verfügbar ist, bringt Designer*innen und Entwickler*innen zusammen. Mithilfe von Creative Cloud-Bibliotheken können Entwickler*innen in Sekundenschnelle Design-Token erstellen und sie für verschiedene Plattformen wie Web, iOS, Android und Flutter kompilieren. Während der Programmierung können sie schnell auf alle relevanten Dokumentationen und Codeausschnitte zugreifen.

Bei der Entwicklung der Adobe XD-Erweiterung für Visual Studio Code haben wir eng mit Kund*innen und Partner*innen zusammengearbeitet, um ein neues offenes Paketformat namens Design System Package (DSP) zu definieren, das Teams beim Austausch von Designsystem-Informationen zwischen verschiedenen Tools unterstützen soll. Ihr könnt die Visual Studio Code-Erweiterung nutzen, um DSPs unter Verwendung von Assets in einem Designsystem in Creative Cloud-Bibliotheken zu erstellen.

Weitere neue Funktionen und Verbesserungen

Zusätzlich zu den oben beschriebenen neuen Funktionen haben wir noch einige weitere Updates für euch:

• Zusammenarbeit in Echtzeit mit Co-Editing. Co-Editing ist nicht mehr in der Beta-Phase und damit ab sofort allgemein verfügbar. Ladet andere Personen ein, Design-Dokumente gemeinsam zu bearbeiten. So könnt ihr in Echtzeit zusammenarbeiten oder Änderungen vornehmen, wann immer ihr Zeit habt. Weil alle Beteiligten am selben Dokument arbeiten, gehen keine Bearbeitungsschritte verloren und ihr erspart euch den Dokumentendschungel. Das funktioniert, weil alle Änderungen automatisch mit der Cloud synchronisiert werden. Weitere Details findet ihr in Co-Editing in Adobe XD.
• Neue Plugins und Integrationen. Auch wenn das Design in XD stattfindet – Teams nutzen viele verschiedene Tools für ihre Zusammenarbeit. XD bietet fast 275 Plugins und Integrationen, die XD mit anderen Apps und Tools im Workflow eures Teams verbinden und neue Funktionen hinzufügen. Zu unseren Neuzugängen gehören Plugins und Integrationen für Anwendungen wie Zoom, Wrike, Miro, UserZoom Go, UserTesting und Maze. Demnächst folgen Plugins für Microsoft Teams und Confluence.
• Automatische Größenanpassung von Textebenen mit Auto Height Text. Auto Height-Textfelder ändern basierend auf der enthaltenen Textmenge automatisch ihre Höhe. In Kombination mit Stapeln könnt ihr Layouts designen, die Inhalte unterschiedlicher Länge aufnehmen können und gleichzeitig den Abstand zwischen den Objekten in einem Layout beibehalten. Schaut euch das Video über Auto Height Text an und lest hier mehr über Arbeiten mit Text in XD.
• Flexiblere Komponenten durch Schachtelung erstellen. Mit XD könnt ihr Komponenten innerhalb anderer Komponenten platzieren (oder „schachteln“). Wenn ihr jetzt Änderungen an einer Instanz vornehmt, die in eine andere Komponente geschachtelt ist, werden diese Änderungen nun auf die Instanzen der äußeren Komponente übertragen.
• Unterstützung von Komponentenzuständen in Designspezifikationen. Designspezifikationen helfen, den Übergabeprozess vom Design zum Code zu optimieren. Jetzt sehen Entwickler*innen, ob eine Komponente mehrere Zustände hat, und erhalten konkrete Spezifikationen für jeden Zustand in den Designspezifikationen.