Frontend Academy · Lekcja

Atomic Design: atomy, molekuły i organizmy

Przyporządkuje Pan/Pani komponenty do atomów, molekuł, organizmów, szablonów i stron, aby stworzyć wspólny język projektowania i programowania.

Lekcja 1 z 414 kroki

Atomic Design: atomy, molekuły i organizmy to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym jest Atomic Design?

Atomic Design (Brad Frost, 2013) to model mentalny organizowania komponentów interfejsu na pięciu poziomach złożoności: atomy, molekuły, organizmy, szablony i strony. Zapewnia projektantom i inżynierom wspólny słownik.

Atomy — najmniejsze elementy budulcowe

Komponenty o jednym przeznaczeniu, których nie można już bardziej rozłożyć. Przyciski, pola wejściowe, ikony, etykiety i próbki kolorów. Są abstrakcyjne i można je ponownie wykorzystać w dowolnym kontekście.

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

Molekuły — proste grupy komponentów

Łączą atomy, aby wykonać konkretne użyteczne zadanie. SearchBar składa się z Input + Button + Icon. FormField składa się z Label + Input + ErrorMessage. Nadal są to komponenty ogólnego przeznaczenia.

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

Organizmy — złożone sekcje

Większe kompozycje tworzące odrębne sekcje interfejsu: Header (logo + nav + search bar + user menu), ProductCard (image + title + price + button) oraz SignupForm. Są bardziej zależne od kontekstu.

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

Szablony — szkielety stron

Układy na poziomie makiety, które rozmieszczają organizmy bez rzeczywistych treści. BlogTemplate zawiera Header, Main z miejscami na Article oraz 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>
  );
}

Strony — rzeczywiste treści

Szablony wypełnione rzeczywistymi treściami. Strona /blog/[slug] renderuje BlogTemplate z właściwym artykułem, widżetami paska bocznego i pozostałymi elementami interfejsu.

Struktura folderów

Wiele zespołów organizuje komponenty według poziomów.

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

Korzyści

Wspólny słownik projektantów i programistów. Zachęca do kompozycji zamiast duplikowania. Ułatwia budowanie systemów projektowych. Promuje myślenie najpierw o najmniejszej jednostce, którą można ponownie wykorzystać.

Krytyka: ścisła kategoryzacja jest trudna

W praktyce granica między molekułą a organizmem jest nieostra. Wiele zespołów zaczyna spierać się o to, do której kategorii coś należy, co niweczy cel, jakim jest przejrzystość.

Nowoczesna alternatywa: podejście oparte na funkcjach

Wiele dużych baz kodu React/Vue woli organizację według funkcji (auth/, checkout/, dashboard/) zamiast ścisłych poziomów atomowych. Atomic Design nadal sprawdza się w warstwie współdzielonego systemu projektowego.

Atomic Design w Storybook

Storybook dobrze współpracuje z Atomic Design — kategorie najwyższego poziomu Atoms, Molecules i Organisms ułatwiają przeglądanie biblioteki komponentów.

Kiedy używać Atomic Design

Najlepiej sprawdza się w: bibliotekach systemu projektowego współdzielonych przez wiele aplikacji, dużych zespołach potrzebujących wspólnego modelu mentalnego oraz projektach z aktywnym udziałem projektantów. Należy pominąć go w przypadku: małych aplikacji, prototypów i SPA z dużą liczbą funkcji, w których ważniejsze jest współlokowanie kodu.

Szybkie sprawdzenie

W Atomic Design jakiego rodzaju komponentem jest SearchBar zbudowany z Input + Button + Icon?

Odpowiedz w interaktywnej lekcji

Podsumowanie: Atomic Design

Pięć poziomów: atomy (Button, Input, Icon), molekuły (SearchBar, FormField), organizmy (Header, ProductCard), szablony (układy) i strony (rzeczywiste treści). Wspólny słownik i myślenie oparte na kompozycji. Struktura folderów odzwierciedla warstwy. Atomic Design najlepiej sprawdza się we współdzielonych systemach projektowych; w kodzie aplikacji foldery oparte na funkcjach często są lepsze.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 41
Lekcje: 163

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Atomic Design: atomy, molekuły i organizmy” jest bezpłatna?

Tak — pełny tekst „Atomic Design: atomy, molekuły i organizmy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Atomic Design: atomy, molekuły i organizmy”?

Przyporządkuje Pan/Pani komponenty do atomów, molekuł, organizmów, szablonów i stron, aby stworzyć wspólny język projektowania i programowania. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Atomic Design: atomy, molekuły i organizmy”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Atomic Design: atomy, molekuły i organizmy
Konfiguracja monorepo z Turborepo
Mikrofrontendy: Module Federation
Struktura folderów według funkcji

← Powrót do Frontend Academy