Atomic Design — metodologia
Atomic Design to metodologia projektowania interfejsów, która dzieli elementy UI na pięć poziomów: atomy, cząsteczki, organizmy, szablony i strony.
Co to jest?
Atomic Design to metodologia zaproponowana przez Brada Frosta, która organizuje komponenty UI w hierarchię inspirowaną chemią. Atomy to najprostsze elementy (przycisk, input, etykieta). Cząsteczki to połączenia atomów (pole wyszukiwania = input + przycisk). Organizmy to złożone sekcje (nagłówek strony). Szablony to układy stron. Strony to szablony wypełnione treścią.
Jak to działa?
Każdy poziom buduje się z elementów poziomu niższego. Atom (Button) + Atom (Input) = Cząsteczka (Search Bar). Cząsteczka (Search Bar) + Cząsteczka (Nav Links) + Atom (Logo) = Organizm (Header). Ta hierarchia pomaga identyfikować współdzielone elementy, redukować duplikację i utrzymywać spójność.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Shopify Polaris stosuje podejście atomic: Elements (atomy), Components (cząsteczki/organizmy), Patterns (szablony). Atlassian dzieli komponenty na Primitives i Composed Components. GOV.UK Design System rozdziela Styles (atomy), Components (cząsteczki) i Patterns (organizmy/szablony).