Frontend Academy · Lektion

Atomisk design: atomer, molekyler och organismer

Kategorisera komponenter som atomer, molekyler, organismer, mallar och sidor för att skapa ett gemensamt ordförråd mellan design och utveckling.

Lektion 1 av 414 steg

Atomisk design: atomer, molekyler och organismer är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad är Atomic Design?

Atomic Design (Brad Frost, 2013) är en mental modell för att organisera UI-komponenter i fem komplexitetsnivåer: Atoms, Molecules, Organisms, Templates och Pages. Den ger designers och utvecklare ett gemensamt vokabulär.

Atoms — de minsta byggblocken

Komponenter med ett enda syfte som inte kan brytas ned ytterligare. Knappar, inmatningsfält, ikoner, etiketter och färgrutor. De är abstrakta och återanvändbara i alla sammanhang.

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

Molecules — enkla komponentgrupper

Kombinera atomer för att utföra något användbart. En SearchBar består av Input + Button + Icon. Ett FormField består av Label + Input + ErrorMessage. De är fortfarande generella.

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

Organisms — komplexa sektioner

Större kompositioner som bildar tydliga sektioner i ett gränssnitt: en Header (logo + nav + sökfält + användarmeny), ett ProductCard (bild + titel + pris + knapp) eller ett SignupForm. De är mer kontextmedvetna.

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

Templates — sidmallar

Wireframe-liknande layouter som placerar organismer utan verkligt innehåll. En BlogTemplate har en Header, en Main med Article-platser och 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>
  );
}

Pages — verkligt innehåll

Mallar med verkligt innehåll. Sidan /blog/[slug] renderar BlogTemplate med det faktiska inlägget, widgetar i sidofältet och övrig sidlayout.

Mappstruktur

Många team organiserar komponenter efter 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

Fördelar

Gemensamt vokabulär mellan designers och utvecklare. Uppmuntrar komposition i stället för duplicering. Gör det enklare att bygga designsystem. Främjar tänkande kring den minsta återanvändbara enheten först.

Kritik: strikt kategorisering är svår

I praktiken är gränsen mellan en molekyl och en organism otydlig. Många team börjar diskutera var något hör hemma — vilket motverkar målet om tydlighet.

Modernt alternativ: funktionsbaserad struktur

Många stora React/Vue-kodbaser föredrar att organisera efter funktion (auth/, checkout/, dashboard/) framför strikta atomnivåer. Atomic Design fungerar fortfarande för det gemensamma designsystemslagret.

Atomic Design i Storybook

Storybook lämpar sig väl för Atomic Design — kategorierna Atoms, Molecules och Organisms på toppnivå gör komponentbiblioteket enkelt att bläddra i.

När ska Atomic Design användas?

Passar bäst för: designsystembibliotek som delas mellan flera appar, stora team som behöver en gemensam mental modell och projekt med aktiv medverkan från designers. Avstå från det för: små appar, prototyper och funktionsintensiva SPA:er där samlokalisering är viktigare.

Snabbtest

I Atomic Design, vilken typ av komponent är en SearchBar som byggs av Input + Button + Icon?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Atomic Design

Fem nivåer: Atoms (Button, Input, Icon), Molecules (SearchBar, FormField), Organisms (Header, ProductCard), Templates (layouter) och Pages (verkligt innehåll). Gemensamt vokabulär och kompositionsbaserat tänkande. Mappstrukturen speglar lagren. Passar bäst för gemensamma designsystem; funktionsbaserade mappar är ofta bättre än Atomic Design för appkod.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Atomisk design: atomer, molekyler och organismer” gratis?

Ja – hela texten till ”Atomisk design: atomer, molekyler och organismer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Atomisk design: atomer, molekyler och organismer”?

Kategorisera komponenter som atomer, molekyler, organismer, mallar och sidor för att skapa ett gemensamt ordförråd mellan design och utveckling. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Atomisk design: atomer, molekyler och organismer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Atomisk design: atomer, molekyler och organismer
Monorepo-konfiguration med Turborepo
Mikrofrontend: Module Federation
Funktionsbaserad mappstruktur

← Tillbaka till Frontend Academy