Das August-Update von Adobe XD

Beeindruckende Erlebnisse brauchen eine leistungsstarke, dynamische Plattform. Wir entwickeln Adobe XD kontinuierlich weiter, um Designteams optimal in ihrem kreativen Workflow zu unterstützen. Diesen Monat haben wir mit dem neuen Bedienfeld “Plug-ins” verbesserte Möglichkeiten für die Verwendung von Plugins entwickelt, außerdem läuft die Integration zwischen Adobe XD und Adobe Photoshop jetzt noch reibungsloser. Entwickler können zudem den automatisch generierten CSS-Code aus den Design-Spezifikationen jetzt einfach kopieren und in ihren eigenen Code einfügen. Und dank einiger wichtiger Verbesserungen für die Komponenten könnt ihr Erlebnisse jetzt noch einfacher und schneller gestalten.

Plug-ins direkt aus der Designvorlage starten: Das neue Bedienfeld “Plug-ins”

Mithilfe von Plug-ins können Designer ihre Workflows in XD effizienter gestalten, etwa indem sie neue Funktionen hinzufügen oder XD mit anderen Anwendungen verbinden. Inzwischen gibt es knapp 200 solcher Plug-ins – und mit dem neuen Plug-ins-Bedienfeld können sie ihre Leistungsstärke voll ausspielen. Denn über die neue Benutzeroberfläche könnt ihr eure Lieblings-Plug-ins direkt aus der Designvorlage starten.

Für das Update des neuen Plug-ins-Bedienfeldes haben wir in enger Abstimmung mit den Entwicklern aus der XD-Community zusammengearbeitet. Und natürlich sind auch in dieser Runde wieder tolle neue Plug-ins dabei, die optimal an das Plug-ins-Bedienfeld angepasst sind. Ihr wollt mehr über das neue Bedienfeld erfahren und euch von dessen Vorzügen überzeugen? Dann schaut euch den vollständigen englischsprachigen Blogpost zum Thema an.

Auch für Plug-in-Entwickler bietet das Bedienfeld einen echten Mehrwert: Über die Oberfläche der Plattform könnt ihr andere Designer direkt in der Designvorlage mit den Funktionen eurer Plug-ins überzeugen. Wie es funktioniert, erfahrt ihr auf unserer Website für Entwickler. Ihr fangt gerade erst an, Plug-ins zu entwickeln? Dann hilft euch unser Leitfaden für XD-Plugins.

Bilder direkt in XD mit Photoshop öffnen und bearbeiten

Adobe XD ist die einzige Experience Design-Plattform, die sich nahtlos in andere Creative Cloud Anwendungen integrieren lässt. In Adobe Photoshop erstellte und bearbeitete Bilder ließen sich schon immer leicht in XD-Prototypen importieren. Doch dank der neuen, verbesserten Integration könnt ihr jetzt alle Tools von Photoshop direkt in XD nutzen.

Und das geht mit einem einzigen Klick: Wenn ihr über die rechte Maustaste „Bearbeiten in Photoshop“ klickt, öffnet sich das Bild automatisch auf der Ebene, die ihr in Adobe Photoshop ausgewählt habt. Habt ihr Photoshop noch nicht geöffnet, nimmt XD euch den Schritt ab. Jetzt könnt ihr euer Bild in Photoshop bearbeiten. Der Clou: Wenn ihr das Bild speichert, wird die bearbeitete Version in Echtzeit wieder in XD platziert. Natürlich könnt ihr eure Anpassungen in Photoshop auf dem gleichen Weg rückgängig machen und das Bild auf seine ursprüngliche Form zurücksetzen.

CSS-Code-Snippets direkt aus Design-Spezifikationen kopieren

Ein besonders leistungsstarkes XD-Feature ist die Option, Prototypen immersiver, interaktiver User Experiences zu entwerfen und zu teilen. Entwickler können so alle wichtigen Parameter auf einen Blick erfassen und die gewünschten Designs 1:1 umsetzen. Dank automatisch generierter CSS-Code-Snippets lassen sich die entsprechenden Parameter einfach per Copy + Paste in den bestehenden Code einfügen. Sowohl für Designer als auch für Entwickler bedeutet das eine echte Arbeitserleichterung.

Im Video zeigen wir euch, wie das funktioniert: Wenn ihr ein Element in den Design-Spezifikationen auswählt, erscheint in der rechten unteren Ecke ein CSS-Feld mit dem zugehörigen CSS-Code-Snippet. Diesen Abschnitt könnt ihr auswählen und in euren Code kopieren. Beachtet, dass CSS-Codes dynamisch sind und sich Anpassungen im Design automatisch auch im Code aktualisieren. Wenn ihr beispielsweise in eurem Design das Farbformat ändert, wird der entsprechende Codeabschnitt direkt angepasst. Sind alle Designentscheidungen getroffen, müsst ihr den Code im CSS-Feld anklicken und in seiner endgültigen Form in die Zwischenablage kopieren. Informationen zu Farbe, Schatten oder Farbverläufe sind dann in den automatisch generierten CSS-Code-Snippets enthalten.

Smartes Freistellen von Komponenten

Mit Components von Adobe XD lassen sich Erlebnisse im Handumdrehen gestalten. Die Designelemente können innerhalb des Designs wiederverwendet werden. Designer müssen so nicht wieder und wieder dieselben Objekte erstellen. Mit der neusten Version wird die Verwendung von Components jetzt noch einfacher für Designer und Teams, die ein Designsystem in XD verwenden.

Aufgrund des Schatteneffekts sind die Begrenzungslinien oft viel größer als das eigentliche Objekt. Mit der rechten Maustaste könnt ihr die Begrenzungslinien jetzt anpassen, indem ihr auf eine Komponente klickt und „Grenzen an Inhalt anpassen“ auswählt. Das funktioniert sowohl für ein einzelnes, ausgewähltes Element als auch für den übergeordneten Master – die Änderungen übertragen sich automatisch auf alle zugehörigen Objekte. Bei Komponenten, die ihr in der neusten XD-Version erstellt habt, werden die Begrenzungslinien des Elements automatisch zurückgesetzt, wenn ihr Inhalte hinzufügt oder entfernt.

Nie wieder Teilpixel

Teilpixel sind ein echtes Ärgernis. Oft lassen sich unscharfe oder verzerrte Designs jedoch kaum vermeiden, wenn man die Größe einer Objektgruppe ändert oder Bildmasken anwendet. Egal ob ihr die Größe eurer Elemente anpasst, Rastereinstellungen wiederholt oder Bildmasken und Objektgruppen erstellt: In der neusten XD-Version werden die Komponenten jetzt immer als ganzer Pixelwert ausgegeben – ganz ohne manuelle Anpassung.

Konkret heißt das: Boolesche Elemente können zwar Teilpixel sein, das Objekt insgesamt bleibt davon jedoch unbeeinflusst. Formen, die in Pfade umgewandelt wurden oder mit dem Stiftwerkzeug erstellte Elemente hingegen behalten ihre Bruchwerte bei. So wird die ursprüngliche Intention beibehalten.

Alle mit älteren Versionen erstellten Inhalte bleiben von diesem Update unberührt – schließlich wollen wir eure bestehenden Designs nicht zerschießen. Doch wie immer wollen wir eure Workflows mit unseren Updates einfacher und effizienter machen. Eine vollständige Liste aller neuen Funktionen und Updates für Adobe XD findet ihr auf unserer What’s New-Website.

UX Community

Helft uns, Adobe XD noch besser zu machen: Ihr habt Verbesserungsvorschläge oder einen Bug gefunden? Dann kontaktiert uns unter https://adobexd.uservoice.com. Folgt uns außerdem unter @AdobeXD und erfahrt als Erste, was es Neues gibt. Natürlich könnt ihr uns auch über Twitter kontaktieren. Nutzt dafür einfach #AdobeXD. Und über Facebook teilen wir spannende Videos und Updates mit euch und beantworten eure Fragen.

#MadeWithAdobeXD

Vergesst nicht den Hashtag #MadeWithAdobeXD, wenn ihr eure Prototypen bei Behance teilt. Und wenn ihr unter „Verwendete Werkzeuge“ Adobe XD auswählt, seid ihr vielleicht schon im nächsten Adobe XD Newsletter mit dabei.