Zeichenwerkzeuge im Detail – Tutorial zu Adobe XD

Widmen wir uns in diesem Video den Komponenten. Komponenten sind Designelemente mit einer sehr großen Flexibilität, in denen Sie Elemente, die immer wieder vorkommen, erstellen und verwalten können. Und das haben wir bereits in einem der vorherigen Videos getan, wir haben einen Button als Komponente angelegt und einmal ein person_icon, das ist nämlich dieses hier. Ich zeige Ihnen nun, worauf Sie bei der Arbeit mit Komponenten achten sollten. Das Erste, was wichtig ist, ist, dass in XD keine separaten Ansichten zum Bearbeiten von Primärkomponenten existieren. Wenn Sie also eine Primärkomponente bearbeiten, dann geschieht das immer auf der Arbeitsfläche. Wenn ich z.B. den Button hier bearbeiten möchte, dann kann ich hier in der Bibliothek auf Komponenten mit der rechten Maustaste klicken und sagen "Hauptkomponente bearbeiten". Und Sie sehen, dann springt er in die Arbeitsfläche, in der sich die Hauptkomponente befindet. Das ist allerdings keine gute Einstellung, wie wir sie jetzt hier haben. Wir haben die Komponente hier auf der Arbeitsfläche erstellt, das ist auch okay, aber Sie sollten sich angewöhnen, eine extra Zeichenfläche für Primärkomponenten zu eröffnen, vor allen Dingen dann, wenn Sie viele solcher Komponenten nutzen. Ich habe bereits eine Zeichenfläche erzeugt, die befindet sich hier rechts, ganz außerhalb des Blickfeldes, und da befindet sich bereits die Primärkomponente von diesem person_icon drin. Ich nehme jetzt den Button und ziehe den einfach auch hier in die Zeichenfläche. So, und wenn Sie nun in den Zeichenflächen, die für das Layout bestimmt sind, solche Komponenten verwenden wollen, dann gehen Sie hin und nehmen nun eine Instanz, also hier aus dem Bibliothekspanel, und fügen diese Instanz in die jeweilige Arbeitsfläche ein. So, das ist der empfohlene und auch richtige Weg für die Arbeit mit Komponenten. Wenn Sie auf der Arbeitsfläche eine Primärkomponente löschen, also das wäre jetzt in dem Fall hier, das mache ich jetzt mal gerade, ich lösche die, dann gibt es ja auf den Arbeitsflächen überhaupt keine Primärkomponente mehr. Wenn ich die nun nachträglich bearbeiten möchte, dann klicke ich mit der rechten Maustaste hier drauf, sage "Hauptkomponente bearbeiten" und dann erzeugt einfach Adobe XD die Primärkomponente, die kann ich ja dann auch wieder hier auf meine Arbeitsfläche ziehen. So, also das ist noch mal so eine Besonderheit. Wenn Sie Verknüpfungen von bestimmten Komponenten-Instanzen aufheben möchten, dann können Sie auch hier mit der rechten Maustaste auf so eine Instanz klicken und dann z.B. die Komponentengruppierung aufheben, dann haben wir wieder einzelne Objekte wie vor der Anlage einer Komponente. So, und jetzt schauen wir uns einmal die Unterschiede an. Wir brauchen ja noch weitere Instanzen dieses Buttons, und zwar einmal hier an der Stelle in der Zeichenfläche Registration und einmal an dieser Stelle in der Zeichenfläche Confirmation. So, hier müssen wir nun die Texte ändern, bei beiden Buttons, einmal in dieser Zeichenfläche ändern wir den Text in "Account erstellen" und in dem anderen Button wird der Text verändert in "Akzeptieren". So, die letzte Komponente, die wir noch benötigen, ist hier dieses person_icon. Dafür ziehe ich das einfach hier rüber und setze das mal hier an die Stelle. Das Tolle ist, ich kann über die Zeichenflächen hinweg auch Ausrichtungen vornehmen und so haben wir dann wirklich das gleiche Aussehen. Ja, was können wir erkennen? Wenn wir hier einmal auf die Primärkomponente gehen, dann befindet sich hier links oben eine ausgefüllte, grüne Raute. Die gesamte grüne Umrandung signalisiert sowieso schon einmal, dass es sich um Komponenten und nicht um Gruppierungen handelt. In unseren Designzeichenflächen haben wir hier keine ausgefüllte, sondern eine weiße Raute, und dabei handelt es sich nun um eine Instanz. Und an dieser Stelle haben wir eine Instanz bearbeitet, was Adobe XD mit diesem Punkt in der weißen Raute signalisiert. Also diese drei Einstellungen gibt es. Ein letzter Hinwies zu den Komponenten: Das Tolle an Komponenten ist, wenn ich die Hauptkomponente bearbeite, also bspw. hier, wieder auf Hauptkomponente, jetzt mache ich mal einen Doppelklick und ändere die Farbe, es ist völlig egal, nehmen wir mal ein Grün, und jetzt schauen wir uns das wieder im Layout an, dann sind alle Instanzen, die auf dieser Hauptkomponente beruhen, ebenfalls geändert. Und das macht es natürlich so leistungsstark, dass wir Komponenten erstellen, auf vorgefertigten Zeichenflächen, also quasi wie eine Bibliothek, und diese dann verwenden können. Ich mache das Ganze mit Strg+Z bzw. mit Ctrl+Z wieder rückgängig. Die Komponenten, das wissen Sie bereits, können Sie ja auch in die Creative Cloud laden und somit als Online-Bibliothek zur Verfügung stellen und dann, denke ich mal, wird das ganz besonders deutlich, wie wertvoll diese Komponenten- Erstellungen sind, denn man spart richtig viel Zeit damit und kann die leicht übertragen auf andere Layouts.