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.

In der Praxis entzündet sich die häufigste Diskussion an der Einordnung: Ist eine Card ein Molecule oder schon ein Organism? Ist ein Formularfeld mit Label ein Atom oder ein Molecule? Brad Frost selbst betont, dass die fünf Ebenen ein mentales Modell sind, keine starre Ordnervorschrift - viele Teams übernehmen die Denkweise, ohne die Verzeichnisstruktur wörtlich zu spiegeln. Die Metapher hilft vor allem, zwei Fragen zu trennen: Aus welchen kleineren Teilen besteht diese Komponente, und in welchem Kontext wird sie zusammengesetzt? Wer sie zu dogmatisch anwendet, verbringt mehr Zeit mit Kategorisieren als mit Bauen.

Moderne Komponenten-Frameworks setzen Atomic Design ohnehin natürlich um, weil Komposition ihr Grundprinzip ist: Ein Organism ist schlicht eine Komponente, die kleinere Komponenten importiert. Als Alternative oder Ergänzung hat sich für größere Anwendungen eine feature- bzw. domänenbasierte Struktur etabliert, bei der Code nach fachlichem Zusammenhang (etwa checkout, auth) statt nach abstrakter Größe gruppiert wird - gemeinsam genutzte Atoms und Molecules landen in einem geteilten ui-Ordner, fachspezifische Organisms beim jeweiligen Feature. Für Design Systems und Component Libraries bleibt Atomic Design das klarste gemeinsame Vokabular zwischen Design und Entwicklung; für die konkrete Projektstruktur ist es ein Werkzeug, kein Gesetz.