Nachdem wir Ende letzten Jahres Cloud-Dokumente zu Adobe XD hinzugefügt haben, standen für uns weitere wichtige Bereiche im Vordergrund, an denen wir im Laufe des Jahres 2019 arbeiten möchten. Dazu gehört auch die Erstellung und Verwaltung von Designsystemen.
Mit dem Mai Update von Adobe XD veröffentlichen wir eine Reihe neuer Funktionen, mit denen Cloud-Dokumente erstellt werden können, die wiederverwendbare und skalierbare Farben, Zeichenstile und allgemeine Komponenten enthalten. Diese können problemlos mit Teammitgliedern geteilt werden und Updates für Systemelemente können zentral verwaltet werden, sodass jeder im Team die neuesten Ressourcen nutzt.
Dabei war es unser übergeordnetes Ziel, vom Entwerfen einzelner Design-Elemente zum Erstellen eines umfassenden Satzes von wiederverwendbaren Assets überzugehen. Diese sollen dazu beitragen, die Designkonsistenz auch bei immer größer werdenden Projekten sicherzustellen.
Komponenten
Seit der Einführung von XD kennen wir Symbole als wiederverwendbare Elemente, aber sie hatten stets eine Reihe von Einschränkungen, wenn es darum ging, wie flexibel und anpassungsfähig sie sein könnten. Mit dieser Version ersetzen wir Symbole komplett durch Komponenten, die noch leistungsfähiger sind. Sie können eine Master-Komponente erstellen, um ein wiederverwendbares Element, wie beispielsweise eine Schaltfläche, zu definieren. Hiervon können wiederum Instanzen dieses Elements durch Änderungen an beliebigen Eigenschaften angepasst werden. Änderungen, die an einer einzelnen Instanz vorgenommen werden, sind spezifisch für dieses Element – aber Änderungen am Master werden sich auf alle Instanzen auswirken, die Teil der Master-Komponente sind. Es ist ein unglaublich leistungsstarkes Modell, dennoch extrem einfach zu bedienen, und es ist das Herzstück unserer Designsystemlösung.
https://www.youtube.com/embed/PCICHoZDxhM?feature=oembed
Wir haben Komponenten so konzipiert, dass responsive Größenanpassungen es erlauben, jede Instanz individuell nehmen und die Größe der Komponente anpassen zu können, wobei XD automatisch die Platzierung und Skalierung von Elementen innerhalb der Komponente für Sie verwaltet.
https://www.youtube.com/embed/8a6HeEX3lzU?feature=oembed
Komponenten haben das Potenzial, die Art und Weise zu verändern, wie in XD Designs entstehen, und das ist erst der Anfang – in den kommenden Monaten darf man weiteren Support für unsere Komponenten erwarten. Unter anderem möchten wir unsere User dabei unterstützen, die Definition von mehreren Komponentenzuständen und die Animation zwischen Zuständen hinzufügen, robuste und wiederverwendbare Komponenten mit Interaktionen zu erstellen und Möglichkeiten zur Verbindung von Designkomponenten mit ihren Produktionsäquivalenten zu untersuchen.
Verknüpfung von Assets
Das Asset-Panel bietet Ihnen die Möglichkeit, die in Ihrem Dokument verwendeten Farben, Zeichenstile und Komponenten zu verwalten. Als Teil eines Designsystems kann das Asset Panel nun verwendet werden, um eine Sammlung von wiederverwendbaren Elementen zu erstellen, die mit anderen Designern im Team geteilt werden sollen.
Damit andere die vordefinierten Farben, Zeichenstile und Komponenten nutzen können, müssen diese über Share>Invite to Edit in das Dokument eingefügt werden. Sobald der Zugriff erteilt ist, kann das zu nutzende Cloud-Dokument mit dem eigenen verknüpft werden. So werden die Farben, Zeichenstile und Komponenten in das Dokument aufgenommen und wenn Aktualisierungen am Quelldokument vorgenommen wurden, können diese mit ein paar Klicks übernommen werden – was dazu beiträgt, dass alle Mitarbeiter die neuesten Ressourcen verwenden.
https://www.youtube.com/embed/I-OWRCpFgCs?feature=oembed
Style Guides
Neben der Möglichkeit, dass andere Designer sich mit einem erstellten Dokument verlinken können, um Farben, Zeichenstile und Komponenten zu übernehmen, müssen diese möglicherweise auch mit externen Entwicklern geteilt werden. Indem Elemente aus dem Asset-Panel als “Sticker Sheet” im XD-Dokument angelegt werden, können mit der Funktion Share>Share for Development Designsysteme im Web veröffentlicht werden, von dem aus andere auf Farbwerte, Style-Attribute und Download-Assets verweisen können.