Atomic Design

Atomic Design je metodika pro budování systémů komponent uživatelských rozhraní, která pochází od designéra Brada Frosta. Název vychází z chemie: stejně jako se hmota skládá z atomů kombinujících se do molekul a organismů, rozhraní jsou budována z malých, znovupoužitelných jednotek kombinujících se do stále složitějších struktur.

Hierarchie má pět úrovní. Atomy jsou nejmenší prvky: tlačítka, vstupy, popisky, ikony. Molekuly jsou skupiny atomů pracujících společně, například vyhledávací pole kombinující vstupní pole a tlačítko. Organismy jsou složitější sekce sestavené z molekul a atomů, třeba hlavička webu. Šablony definují strukturu rozložení bez skutečného obsahu. Stránky jsou konkrétní instance šablon s vyplněným skutečným obsahem.

Hodnota tohoto přístupu nespočívá v nomenklatuře, ale v disciplíně, kterou vynucuje. Navrhování a budování komponent v izolaci -- typicky v nástrojích jako Storybook -- nutí týmy přemýšlet o opětovném využití jednotlivých částí, místo aby řešily každý ekran jako jednorázový problém. Udržování konzistence při růstu produktu se tak výrazně zjednodušuje.

Atomic Design přirozeně doplňuje design systémy a knihovny komponent. Když tým sdílí stejnou slovní zásobu pro stavební bloky UI, předávání mezi designem a vývojem probíhá hladčeji a dochází k méně nedorozuměním ohledně toho, co má komponenta dělat.