🎨 Design Systems

Atomic Design — co to jest?

Metodologia projektowania interfejsów zaproponowana przez Brada Frosta, która dzieli elementy UI na pięciu poziomach: atomy, cząsteczki, organizmy, szablony i strony.

Jak to działa?

Zaczynasz od atomów, czyli najmniejszych elementów: przycisk, pole tekstowe, etykieta. Łączysz je w cząsteczki, np. pole wyszukiwania (input + przycisk). Cząsteczki tworzą organizmy, np. cały nagłówek strony. Organizmy układasz w szablony, a szablony wypełniasz treścią, żeby powstały gotowe strony. To jak budowanie z klocków LEGO, gdzie każdy poziom składa się z mniejszych części.

Dlaczego to ważne?

Atomic Design daje Ci jasną hierarchię komponentów i ułatwia myślenie o tym, co jest współdzielone, a co unikalne. Dzięki temu nie duplikujesz pracy i łatwiej utrzymujesz spójność.