My Swisscom Design Bibliothek

Nicht nur die Kunden sollten ein gutes Benutzererlebnis haben, sondern auch die Designer. Mein Hauptziel ist es, eine Bibliothek zu erstellen, mit der MEIN Team gerne arbeitet - daher sind Kommunikation und Besprechungen mit meinem Team entscheidend für dieses Projekt.

Bei der Erstellung der Komponenten nutze ich die Eigenschaftsoptionen von Figma. Um den Prozess zu veranschaulichen, ist hier eine Visualisierung eines einfachen Beispiels. Diese Komponente ist für alle Titel auf unseren My Swisscom Seiten. Ich gebe ihr die "Variante" von "Titel" mit den Werten "Unterseite" und "Hub". Diese Werte werden dann auf die entsprechende Version des Designs angewendet. Da der "Sub-title" ein optionales Element ist, weise ich ihm eine "Boolean-property" zu, mit der man seine Sichtbarkeit steuern kann.

Da wir für mobile und Desktop-Geräte entwerfen, füge ich eine zweite "Variante" namens "Gerät" hinzu. Für diese füge ich zwei Werte "desktop" und "mobile" hinzu, die der entsprechenden Variante zugeordnet werden.

Wenn alles fertig ist und die Bibliothek veröffentlicht ist, beginnt der spaßige Teil. Jetzt können die "Instanzen" der Komponenten einfach in den Entwürfen verwendet werden. Diesen Prozess wiederhole ich für jede Komponente. Ich analysiere, wo welche Eigenschaften Sinn machen und bespreche diese mit meinem Team.