Atomic Design

Atomic Design ist eine von Brad Frost entwickelte Methodik zum systematischen Aufbau von Design Systems. Die Metapher aus der Chemie strukturiert UI-Komponenten in fünf hierarchische Ebenen: Atoms (kleinste Bausteine wie Buttons, Labels), Molecules (Kombinationen von Atoms wie ein Search-Field mit Button), Organisms (komplexe UI-Abschnitte wie eine Header-Navigation), Templates (Seitenlayouts mit Platzhaltern) und Pages (konkrete Instanzen mit echtem Inhalt).

Der Vorteil dieser Hierarchie liegt in Modularität und Wiederverwendbarkeit. Atoms können in verschiedenen Molecules kombiniert werden, Molecules in verschiedenen Organisms. Änderungen an einem Atom (z.B. Button-Styling) propagieren automatisch durch alle übergeordneten Komponenten. Dies macht Design Systems wartbar und skalierbar, selbst bei Hunderten von Komponenten.

Atomic Design wird oft mit Tools wie Storybook kombiniert, wo jede Ebene separat dokumentiert und getestet wird. Frameworks wie React sind ideal für Atomic Design, da Komponenten natürlich hierarchisch komponierbar sind. Große Unternehmen wie Airbnb, IBM und Salesforce nutzen Atomic Design für ihre Design Systems. Für komplexe Produkte mit vielen Screens ist Atomic Design Best Practice.