Frontend Academy · leksjon

Atomic Design: Atomer, molekyler og organismer

Kategoriser komponenter som atomer, molekyler, organismer, maler og sider for å skape et felles begrepsapparat mellom design og utvikling.

Leksjon 1 av 414 trinn

Atomic Design: Atomer, molekyler og organismer er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva er Atomic Design

Atomic Design (Brad Frost, 2013) er en tankemodell for å organisere UI-komponenter i fem kompleksitetsnivåer: Atomer, Molekyler, Organismer, Maler og Sider. Den gir designere og utviklere et felles vokabular.

Atomer — de minste byggeklossene

Komponenter med ett formål som ikke kan brytes ned ytterligere. Knapper, inndatafelt, ikoner, etiketter og fargeprøver. De er abstrakte og kan gjenbrukes i enhver sammenheng.

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

Molekyler — enkle komponentgrupper

Kombiner atomer for å utføre noe nyttig. En SearchBar består av Input + Button + Icon. Et FormField består av Label + Input + ErrorMessage. De er fortsatt generelle.

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

Organismer — komplekse seksjoner

Større komposisjoner som utgjør tydelige seksjoner i et grensesnitt: en Header (logo + nav + søkefelt + brukermeny), et ProductCard (bilde + tittel + pris + knapp) og et SignupForm. De er mer kontekstavhengige.

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

Maler — sideskjeletter

Oppsett på wireframe-nivå som arrangerer organismer uten reelt innhold. En BlogTemplate har en Header, en Main med Article-plassholdere 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 — reelt innhold

Maler med reelt innhold. /blog/[slug]-siden gjengir BlogTemplate med det faktiske innlegget, widgeter i sidepanelet og resten av grensesnittet.

Mappestruktur

Mange team organiserer komponenter etter nivå.

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

Fordeler

Et felles vokabular for designere og utviklere. Oppmuntrer til komposisjon fremfor duplisering. Gjør det enklere å bygge designsystemer. Fremmer tankegangen om å starte med den minste gjenbrukbare enheten.

Kritikk: Streng kategorisering er vanskelig

I praksis er grensen mellom et molekyl og en organisme uklar. Mange team ender med diskusjoner om hvor noe hører hjemme — noe som undergraver målet om tydelighet.

Moderne alternativ: funksjonsbasert organisering

Mange store React/Vue-kodebaser foretrekker organisering etter funksjon (auth/, checkout/, dashboard/) fremfor strenge atomnivåer. Atomic Design fungerer fortsatt godt for det delte designsystemlaget.

Atomic Design i Storybook

Storybook egner seg godt for Atomic Design — kategorier på øverste nivå som Atoms, Molecules og Organisms gjør komponentbiblioteket enkelt å utforske.

Når bør du bruke Atomic Design

Best egnet for: designsystembiblioteker som deles av flere apper, store team som trenger en felles tankemodell, og prosjekter med aktiv involvering fra designere. Unngå det for: små apper, prototyper og funksjonstunge SPA-er der samlokalisering er viktigere.

Kort sjekk

I Atomic Design, hva slags komponent er en SearchBar som er bygget av Input + Button + Icon?

Besvar den i den interaktive leksjonen

Oppsummering: Atomic Design

Fem nivåer: Atoms (Button, Input, Icon), Molecules (SearchBar, FormField), Organisms (Header, ProductCard), Templates (oppsett) og Pages (reelt innhold). Felles vokabular og komposisjonsorientert tankegang. Mappestrukturen gjenspeiler lagene. Best egnet for delte designsystemer; funksjonsbaserte mapper er ofte bedre enn Atomic Design for appkode.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Atomic Design: Atomer, molekyler og organismer» gratis?

Ja – hele teksten i «Atomic Design: Atomer, molekyler og organismer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Atomic Design: Atomer, molekyler og organismer»?

Kategoriser komponenter som atomer, molekyler, organismer, maler og sider for å skape et felles begrepsapparat mellom design og utvikling. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Atomic Design: Atomer, molekyler og organismer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Atomic Design: Atomer, molekyler og organismer
Monorepo-oppsett med Turborepo
Mikrofrontend: Module Federation
Mappestruktur basert på funksjoner

← Tilbake til Frontend Academy