Meine Swisscom Design Library

Nicht nur der Kunde sollte eine gute Benutzererfahrung haben, sondern auch Designer. Mein Hauptziel war es also, eine Bibliothek zu erstellen, mit der MEIN Team gerne arbeiten würde. Daher waren Kommunikation und Besprechungen mit meinem Team von entscheidender Bedeutung.

Für den eigentlichen Bau der Komponenten habe ich die großartigen Eigenschaftsoptionen von figma genutzt. Dies ist eines der einfacheren Beispiele. Diese Komponente ist für alle Titel auf unseren My Swisscom-Seiten. Ich habe ihr die „Variante“ von „Titel“ mit den Werten „Unterseite“ und „Hub“ gegeben. Diese Werte wurden dann auf die entsprechende Version des Designs angewendet. Da der „Untertitel“ ein optionales Element ist, habe ich ihm eine „Boolean-Eigenschaft“ zugewiesen, mit der Sie die Sichtbarkeit verwalten können.

Da wir für Handy und Desktop designen, habe ich eine zweite „Variante“ mit dem Namen „Gerät“ hinzugefügt. Dort habe ich die beiden Werte „Desktop“ und „Mobile“ hinzugefügt, die auch dem entsprechenden Design zugeordnet wurden.

Wenn alles fertig ist und die Bibliothek veröffentlicht ist, beginnt der lustige Teil. Jetzt können die „Instanzen“ der Komponenten einfach in den Designs verwendet werden. Ich habe diesen Vorgang für alle Komponenten durchgeführt. Ich habe analysiert, wo welche Eigenschaften Sinn machen würden, und das mit meinem Team besprochen.