Frontend Academy · Lektion

Atomic Design: Atoms, Molecules og Organisms

Kategorisér komponenter som atoms, molecules, organisms, templates og pages for at skabe et fælles ordforråd mellem design og udvikling.

Lektion 1 af 414 trin

Atomic Design: Atoms, Molecules og Organisms er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er Atomic Design?

Atomic Design (Brad Frost, 2013) er en tankemodel til organisering af UI-komponenter i fem kompleksitetsniveauer: Atomer, Molekyler, Organismer, Skabeloner og Sider. Den giver designere og udviklere et fælles sprog.

Atomer — de mindste byggesten

Komponenter med ét formål, som ikke kan opdeles yderligere. Knapper, indtastningsfelter, ikoner, etiketter og farveprøver. De er abstrakte og kan genbruges i enhver sammenhæng.

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

Molekyler — simple komponentgrupper

Kombinér atomer for at udføre noget nyttigt. En SearchBar er en kombination af Input + Button + Icon. Et FormField er en kombination af Label + Input + ErrorMessage. De er stadig generelle.

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

Organismer — komplekse sektioner

Større kompositioner, der danner tydelige sektioner i en brugerflade: en Header (logo + navigation + søgefelt + brugermenu), et ProductCard (billede + titel + pris + knap) og en SignupForm. De er mere kontekstafhængige.

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

Skabeloner — sideskeletter

Layout på wireframe-niveau, der arrangerer organismer uden rigtigt indhold. En BlogTemplate har en Header, en Main med Article-pladser og en 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>
  );
}

Sider — rigtigt indhold

Skabeloner med rigtigt indhold. Siden /blog/[slug] renderer BlogTemplate med det faktiske indlæg, widgets i sidepanelet og øvrige grænsefladeelementer.

Mappestruktur

Mange teams organiserer komponenter efter niveau.

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

Fordele

Et fælles sprog mellem designere og udviklere. Tilskynder til komposition frem for duplikering. Gør designsystemer lettere at opbygge. Fremmer fokus på den mindste genanvendelige enhed først.

Kritik: Streng kategorisering er vanskelig

I praksis er grænsen mellem et molekyle og en organisme uklar. Mange teams ender med diskussioner om, hvor noget hører til — og dermed modarbejdes målet om klarhed.

Moderne alternativ: funktionsbaseret organisering

Mange store React-/Vue-kodebaser foretrækker organisering efter funktion (auth/, checkout/, dashboard/) frem for strenge atomniveauer. Atomic fungerer stadig godt til det fælles designsystemlag.

Atomic i Storybook

Storybook passer godt til Atomic Design — kategorierne Atoms, Molecules og Organisms på øverste niveau gør komponentbiblioteket let at gennemse.

Hvornår skal du bruge Atomic Design?

Bedst til: designsystembiblioteker, der deles på tværs af flere apps, store teams med behov for en fælles tankemodel og projekter med aktiv deltagelse fra designere. Spring over til: små apps, prototyper og funktionsrige SPA'er, hvor samplacering er vigtigere.

Hurtigt tjek

I Atomic Design, hvilken type komponent er en SearchBar, der er bygget af Input + Button + Icon?

Besvar den i den interaktive lektion

Opsummering: Atomic Design

Fem niveauer: Atoms (Button, Input, Icon), Molecules (SearchBar, FormField), Organisms (Header, ProductCard), Templates (layouts) og Pages (rigtigt indhold). Fælles sprog og kompositionsbaseret tænkning. Mappestrukturen afspejler lagene. Bedst til fælles designsystemer; funktionsbaserede mapper er ofte bedre end atomic til appkode.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Atomic Design: Atoms, Molecules og Organisms” gratis?

Ja — hele teksten til “Atomic Design: Atoms, Molecules og Organisms” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Atomic Design: Atoms, Molecules og Organisms”?

Kategorisér komponenter som atoms, molecules, organisms, templates og pages for at skabe et fælles ordforråd mellem design og udvikling. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Atomic Design: Atoms, Molecules og Organisms”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Atomic Design: Atoms, Molecules og Organisms
Monorepo-opsætning med Turborepo
Mikrofrontends: Module Federation
Featurebaseret mappestruktur

← Tilbage til Frontend Academy