Methodik für skalierbare, wiederverwendbare Komponentensysteme.
Atomic Design ist eine Methodik von Brad Frost, die Oberflächen aus kleinen, wiederverwendbaren Bausteinen Schritt für Schritt zu größeren Strukturen zusammensetzt. Aus Atomen wie Buttons und Eingabefeldern werden Moleküle, daraus Organismen, dann Templates und schließlich konkrete Seiten. Der Gewinn liegt nicht in der Begriffshierarchie selbst, sondern in der Disziplin, zuerst die kleinen Teile sauber zu durchdenken, bevor Seiten entstehen. So wächst ein Komponentensystem konsistent mit, statt mit jeder neuen Ansicht in Wildwuchs zu kippen.
Mehr in der DokumentationWir strukturieren deine Komponenten genau nach diesem Prinzip, vom kleinsten Element bis zur fertigen Seite, und spiegeln das in Figma wie im Code wider. Dadurch findet jeder im Team sofort den richtigen Baustein und niemand baut versehentlich den fünften leicht anderen Button. Storybook macht diese Ebenen sichtbar und prüfbar, sodass dein Designsystem dokumentiert ist, statt nur in Köpfen zu existieren.
Gut zu wissen
Die fünf Stufen sind ein Denkmodell, kein Gesetz. In der Praxis lohnt es sich, die starre Hierarchie locker zu nehmen und Bausteine eher nach tatsächlicher Wiederverwendung zu schneiden, statt jede Komponente zwanghaft in eine der Schubladen zu pressen.
Weitere Werkzeuge, mit denen wir im selben Bereich arbeiten.
Das musst du nicht entscheiden, das ist unser Job. Erzähl uns einfach von deinem Vorhaben.