Hier ein kleiner Vorgeschmack auf mein aktuelles "Freizeit-Projekt" für den fiktiven Kunden "Singlespeed Shop".

Ziel dieses Projektes ist es, ein möglichst umfassendes Set von UI-Komponenten auf Basis von Atomic Design Prinzipien zu erstellen, das als Basis für Kundenprojekte genutzt werden kann. Das Projekt findest auch hier in der Figma Community veröffentlicht.

Die UI-Elemente in diesem Kit werde ich sukzessive erweitern und die visuellen Eigenschaften der Komponenten mit Token Studio in eine semantische Struktur überführen, so dass eine konsistente Wiederverwendung der Komponenten erleichtert wird. Einen Dark-Mode wird es am Ende auch geben :-)

‍

Atome

Atome sind die Grundbausteine aller Materie, also die kleinste funktionelle Einheit. Das Gleiche gilt für die Atome einer UI-Schnittstelle: Atome sind die grundlegenden Bausteine, aus denen alle unsere UI-Komponenten bestehen:

‍

‍

Moleküle

In der Chemie sind Moleküle Gruppen von Atomen, die miteinander verbunden sind und bestimmte neue Eigenschaften annehmen. In Schnittstellen sind Moleküle relativ einfache Gruppen von UI-Elementen, die als Einheit funktionieren:

‍

‍

Organismen

Organismen sind relativ komplexe UI-Komponenten, die aus Gruppen von Molekülen und/oder Atomen und/oder anderen Organismen bestehen. Diese Organismen bilden verschiedene Abschnitte einer Benutzeroberfläche:

‍

‍

Demo

Hier siehst du die UI-Komponenten in Aktion:

‍