Frontend Academy · Lektion

Atomic Design: Atome, Moleküle und Organismen

Kategorisieren Sie Komponenten als Atome, Moleküle, Organismen, Templates und Seiten, um ein gemeinsames Vokabular zwischen Design und Entwicklung zu schaffen.

Lektion 1 von 414 Schritte

Atomic Design: Atome, Moleküle und Organismen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Atomic Design?

Atomic Design (Brad Frost, 2013) ist ein Denkmodell zur Organisation von UI-Komponenten in fünf Komplexitätsstufen: Atoms, Molecules, Organisms, Templates und Pages. Es gibt Designern und Entwicklern ein gemeinsames Vokabular.

Atoms — Die kleinsten Bausteine

Komponenten mit genau einer Aufgabe, die sich nicht weiter zerlegen lassen. Buttons, Eingabefelder, Icons, Labels und Farbfelder. Sie sind abstrakt und in jedem Kontext wiederverwendbar.

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

Molecules — Einfache Komponentengruppen

Kombinieren Sie Atoms, um eine nützliche Funktion zu erfüllen. Eine SearchBar besteht aus Input + Button + Icon. Ein FormField besteht aus Label + Input + ErrorMessage. Sie bleiben allgemein einsetzbar.

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

Organisms — Komplexe Bereiche

Größere Kompositionen, die eigenständige Bereiche einer Oberfläche bilden: ein Header (Logo + Navigation + Suchleiste + Benutzermenü), eine ProductCard (Bild + Titel + Preis + Button) und ein SignupForm. Sie berücksichtigen den Kontext stärker.

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

Templates — Seitengerüste

Layouts auf Wireframe-Ebene, die Organisms ohne echte Inhalte anordnen. Ein BlogTemplate enthält einen Header, einen Main mit Article-Platzhaltern und eine Sidebar.

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

Pages — Echte Inhalte

Templates mit echten Inhalten. Die Seite /blog/[slug] rendert ein BlogTemplate mit dem tatsächlichen Beitrag, Sidebar-Widgets und dem übrigen Seitenrahmen.

Ordnerstruktur

Viele Teams organisieren Komponenten nach ihrer Ebene.

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

Vorteile

Gemeinsames Vokabular für Designer und Entwickler. Fördert Komposition statt Duplizierung. Vereinfacht den Aufbau von Designsystemen. Lenkt den Blick zuerst auf die kleinste wiederverwendbare Einheit.

Kritik: Strikte Kategorisierung ist schwierig

In der Praxis ist die Grenze zwischen Molecule und Organism unscharf. Viele Teams streiten darüber, wo etwas eingeordnet werden soll — und verfehlen damit das Ziel der Klarheit.

Moderne Alternative: featurebasierte Struktur

Viele große React-/Vue-Codebasen organisieren sich lieber nach Features (auth/, checkout/, dashboard/) als nach strikt getrennten Atomic-Ebenen. Für die gemeinsame Designsystem-Schicht funktioniert Atomic Design weiterhin gut.

Atomic Design in Storybook

Storybook eignet sich gut für Atomic Design — die übergeordneten Kategorien Atoms, Molecules und Organisms machen die Komponentenbibliothek leicht durchsuchbar.

Wann Sie Atomic Design verwenden sollten

Besonders geeignet für: Designsystem-Bibliotheken, die von mehreren Apps gemeinsam genutzt werden, große Teams mit Bedarf an einem gemeinsamen Denkmodell und Projekte mit aktiver Beteiligung von Designern. Nicht geeignet für: kleine Apps, Prototypen und featurelastige SPAs, bei denen die gemeinsame Ablage wichtiger ist.

Kurzer Check

Welche Art von Komponente ist im Atomic Design eine SearchBar, die aus Input + Button + Icon besteht?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Atomic Design

Fünf Ebenen: Atoms (Button, Input, Icon), Molecules (SearchBar, FormField), Organisms (Header, ProductCard), Templates (Layouts) und Pages (echte Inhalte). Gemeinsames Vokabular und kompositionsorientiertes Denken. Die Ordnerstruktur bildet die Ebenen ab. Am besten geeignet für gemeinsame Designsysteme; featurebasierte Ordner sind für Anwendungscode oft besser als Atomic Design.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Atomic Design: Atome, Moleküle und Organismen“ kostenlos?

Ja — der vollständige Text von „Atomic Design: Atome, Moleküle und Organismen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Atomic Design: Atome, Moleküle und Organismen“?

Kategorisieren Sie Komponenten als Atome, Moleküle, Organismen, Templates und Seiten, um ein gemeinsames Vokabular zwischen Design und Entwicklung zu schaffen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Atomic Design: Atome, Moleküle und Organismen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Atomic Design: Atome, Moleküle und Organismen
Monorepo-Einrichtung mit Turborepo
Micro-frontends: Module Federation
Featurebasierte Ordnerstruktur

← Zurück zu Frontend Academy