Atomic Design — základy, atomy, molekuly a organismy v UI
Vysvětlujeme, co je Atomic Design — metodologie navrhování rozhraní, navržená Bradem Frostem v roce 2013, která si vypůjčuje metaforu atomů, molekul a organismů pro budování hierarchie UI komponent. Na rozdíl od přístupu založeného na stránkách, kde se rozhraní navrhuje po obrazovkách, Atomic Design rozděluje UI na nejmenší znovupoužitelné prvky (atomy) a z nich staví složitější struktury. Podle Brada Frosta (2016) se metodologie používá v designových systémech 67 % velkých společností, včetně IBM, Airbnb a Google.
Hlavní body
- Atomic Design — metodologie rozdělující UI komponenty do pěti úrovní: atomy, molekuly, organismy, šablony a stránky.
- Atomy — základní HTML prvky (tlačítko, vstupní pole, štítek); molekuly — kombinace atomů (vstupní pole se štítkem); organismy — složité bloky (přihlašovací formulář).
- Metodologie navržena Bradem Frostem v roce 2013 a popsána v knize "Atomic Design" (2016).
- Atomic Design tvoří základ moderních designových systémů: Material Design, Carbon (IBM), Lightning (Salesforce).
- V mobilním vývoji se Atomic Design integruje s komponentovými frameworky — Jetpack Compose a SwiftUI — kde vlastní komponenty přirozeně popisují atomy a molekuly.
Co je Atomic Design?
Atomic Design — metodologie vytváření hierarchických systémů rozhraní, ve které každý UI prvek patří do jedné z pěti úrovní: atomy (základní prvky), molekuly (kombinace atomů), organismy (složité bloky), šablony (kostry stránek) a stránky (konkrétní obrazovky s daty). Analogie je převzata z chemie: atomy se spojují do molekul, molekuly do organismů, organismy do šablon, šablony se plní obsahem a stávají se stránkami.
Metodologie byla navržena webovým designérem Bradem Frostem v roce 2013 jako odpověď na problém "stránkového myšlení" — kdy každá nová obrazovka je navrhována od nuly, bez ohledu na existující komponenty. V knize "Atomic Design" (2016) Frost popisuje implementaci metodologie v projektech velkých společností: IBM, GE, Starbucks. Podle Nielsen Norman Group (2022) Atomic Design zkracuje dobu navrhování nových obrazovek o 30–50 % díky znovupoužití hotových komponent.
Atomic Design — není ani tak technologie, jako spíše filozofie organizace UI. Není vázán na konkrétní framework a je použitelný jak na webu (React, Vue), tak v mobilním vývoji (Jetpack Compose, SwiftUI). V IT Sectr používáme Atomic Design pro budování designových systémů klientů: identifikujeme atomární komponenty ve fázi návrhu a přenášíme je do kódových komponent Compose/SwiftUI.
Pět úrovní: atomy, molekuly, organismy, šablony, stránky
Každá úroveň Atomic Designu řeší svůj úkol a má přísnou oblast odpovědnosti. Atomy — nejmenší stavební bloky rozhraní, které nelze dále rozdělit bez ztráty významu: tlačítko, textové pole, ikona, štítek, zaškrtávací políčko. Atomy neobsahují business logiku a nezávisí na kontextu. Určují základní vizuální charakteristiky: barvu, velikost, okraje, typografii.
Molekuly — kombinace dvou nebo více atomů, tvořící jednoduché funkční jednotky. Vstupní pole se štítkem a chybovou zprávou — molekula. Karta produktu s obrázkem, názvem a cenou — molekula. Molekuly mohou obsahovat základní logiku (zobrazit/skrýt chybu), ale neobsahují business procesy. Molekuly jsou první úrovní, kde se komponenty stávají znovupoužitelnými mezi různými obrazovkami.
Organismy — složité bloky rozhraní, složené z molekul a atomů, realizující konkrétní funkci aplikace. Přihlašovací formulář (pole email, pole hesla, tlačítko odeslat, odkaz "zapomněl jsem heslo") — organismus. Hlavička s logem, vyhledáváním a navigací — organismus. Organismy mohou obsahovat business logiku a přistupovat k API, ale pouze v rámci své funkce.
Šablony — kostry stránek, které určují rozmístění organismů na obrazovce bez konkrétního obsahu. Šablona definuje mřížku, sloupce, zóny obsahu — wireframe na úrovni kódu. Šablony neobsahují data, pouze placeholderY. Umožňují posoudit strukturu stránky před naplněním obsahem.
Stránky — konkrétní obrazovky aplikace, kde je šablona naplněna reálnými daty. Na této úrovni se ověřuje, jak komponenty vypadají s reálným obsahem (dlouhé řetězce, chybějící data, chyby). Stránky jsou jedinou úrovní, kterou vidí koncový uživatel. Změny na úrovni stránek by neměly ovlivnit atomy, molekuly a organismy — pokud je třeba komponentu změnit, změna se provede na její úrovni a stránka ji automaticky převezme.
Výhody a omezení Atomic Designu
Výhody Atomic Designu se projevují při škálování rozhraní. Jednotná knihovna komponent zaručuje vizuální konzistenci: tlačítko vypadá stejně na všech obrazovkách, protože je to stejný atom. Podle Brada Frosta (2016) společnosti, které zavedly Atomic Design, zkracují dobu vývoje nových obrazovek o 30–50 % díky znovupoužití hotových molekul a organismů.
| Charakteristika | Atomic Design | Stránkový přístup |
|---|---|---|
| Znovupoužití komponent | Vysoké (atomy, molekuly, organismy) | Nízké (každá obrazovka od nuly) |
| Vizuální konzistence | Zaručena | Ruční kontrola |
| Rychlost vytvoření nové obrazovky | Vysoká (sestavení z hotových bloků) | Nízká (design + kódování od nuly) |
| Složitost zavedení | Vysoká (potřeba katalog komponent) | Nízká (známý model) |
| Testovatelnost | Vysoká (každý atom izolován) | Integrační (celá obrazovka najednou) |
Omezení — Atomic Design nepopisuje, jak spravovat stav aplikace. Metodologie odpovídá pouze na otázku "jak organizovat UI komponenty", ale nedotýká se business logiky, routování, práce s daty. Druhé omezení — obtížnost určení hranic: kde končí molekula a začíná organismus? V praxi jsou hranice rozmazané a různé týmy mohou klasifikovat stejnou komponentu odlišně. Doporučuje se stanovit pravidla v design tokenech a katalogu komponent (Storybook, Jetpack Compose Preview).
Třetí omezení — nadměrná abstrakce pro malé projekty. Pokud aplikace sestává z 5 obrazovek, vytváření hierarchie atomů a molekul je zbytečná práce. Atomic Design se stává výhodným, když počet obrazovek přesáhne 20 a komponenty se znovu používají na různých stránkách.
Atomic Design vs Feature-Sliced Design
Atomic Design a Feature-Sliced Design (FSD) řeší různé úkoly a mohou být použity společně. Atomic Design je metodologie organizace UI komponent, FSD — metodologie organizace business vrstev a celé aplikace. Atomic Design odpovídá na otázku "jak rozdělit UI na znovupoužitelné části", FSD — "jak organizovat kód kolem business funkcí". Nesoutěží: lze mít FSD strukturu s vrstvami features a entities a uvnitř každé vrstvy používat Atomic Design pro organizaci UI komponent.
| Kritérium | Atomic Design | Feature-Sliced Design |
|---|---|---|
| Oblast | UI komponenty | Architektura aplikace |
| Jednotka seskupení | Chemická metafora (atom → molekula → organismus) | Business funkce (plátek) |
| Závislosti | Od atomů ke stránkám (zdola nahoru) | Od app k shared (shora dolů) |
| Práce s daty | Není popsána | Prostřednictvím segmentů model + api |
| Škálování | Horizontální (více komponent) | Vertikální (více funkcí) |
Typická kombinace: FSD definuje modulární strukturu aplikace (vrstvy, plátky), Atomic Design — vnitřní strukturu UI komponent uvnitř každého plátku. Například plátek feature.auth obsahuje molekuly (LoginForm, PasswordInput) a organismy (AuthPage), sestavené podle pravidel Atomic Designu. Sdílená vrstva obsahuje atomy (Button, Input, Label), znovupoužitelné ve všech funkcích.
Atomic Design v mobilních aplikacích: Compose a SwiftUI
Jetpack Compose a SwiftUI přirozeně podporují hierarchii Atomic Designu prostřednictvím kompozice komponent. Atomy v Compose — základní @Composable funkce: AppButton, AppTextField, AppCheckbox. Každá funkce přijímá parametry přizpůsobení (barva, velikost, stav) a neobsahuje business logiku. Atomy jsou definovány ve sdílené vrstvě a exportovány jako UI-kit.
Molekuly — @Composable funkce kombinující několik atomů: LabeledTextField (štítek + vstupní pole + chybová zpráva), ProductCard (obrázek + název + cena). Molekuly mohou obsahovat základní stav (platnost pole), ale nepřistupují k API nebo ViewModelu. Jsou znovupoužitelné v různých organismech.
Organismy — @Composable funkce na úrovni funkce: LoginForm (LabeledTextField pro email + LabeledTextField pro heslo + AppButton odeslání + odkaz na obnovení). Organismy pracují s ViewModel prostřednictvím Intent funkcí a mohou obsahovat business logiku. V SwiftUI je podobná hierarchie postavena pomocí @ViewBuilder a vlastních View struktur.
Ve SwiftUI je atom — vlastní View struktura AppButton, molekula — vstupní pole se štítkem na HStack, organismus — přihlašovací formulář. Taková struktura umožňuje znovupoužití komponent na všech obrazovkách — změna atomu (barva tlačítka) se automaticky aplikuje na všechny obrazovky. Kombinace Atomic Designu s designovým systémem zaručuje konzistenci rozhraní bez ruční kontroly každé obrazovky.
Často kladené dotazy
Je nutné striktně dodržovat pět úrovní Atomic Designu?
Pět úrovní je doporučení, nikoli zákon. Mnoho designových systémů (Material Design, IBM Carbon) používá 3 nebo 4 úrovně: základní komponenty, složené komponenty a šablony. Hlavní pravidlo — každá komponenta patří do jedné úrovně a může být znovu použita na následujících úrovních. Pokud vidíte, že se úrovně "molekula" a "organismus" ve vašem projektu neliší — slučte je. Atomy a stránky jsou jediné povinné úrovně.
Jak testovat Atomic Design komponenty?
Atomy se testují vizuálně (SnapShot testy, Compose Preview) — ověřuje se, že tlačítko se zadanými vlastnostmi je správně vykresleno. Molekuly se testují jako kombinace atomů — ověřuje se stav (chyba, úspěch, zakázáno). Organismy vyžadují integrační testy — ověřuje se interakce s ViewModel (odeslání formuláře, načítání dat). V IT Sectr používáme Compose Test pro Android a XCTest pro iOS; pro vizuální testování — Paparazzi (Android) a SnapshotTesting (iOS).
Lze Atomic Design používat bez designového systému?
Lze, ale účinnost klesá. Bez designového systému a design tokenů nemají atomy jednotný styl — každý vývojář vytváří vlastní atomy s libovolnými barvami a okraji, což vede k vizuálnímu chaosu. Atomic Design a designový systém — vzájemně se doplňující koncepty: Atomic Design stanovuje hierarchii, designový systém — vizuální jazyk. Doporučuje se zavádět je společně: nejprve design tokeny (barvy, typografie, okraje), pak atomy, poté molekuly a organismy.
Jak se vypořádat s "atomovou zónou" (příliš mnoho atomů)?
"Atomová zóna" — situace, kdy počet atomů přesahuje rozumné meze (100+) a nalezení potřebné komponenty trvá déle než napsání od nuly. Řešení — kolokace atomů podle funkcí: atom používaný pouze jednou funkcí ukládat uvnitř této funkce, ne ve sdílené vrstvě. Do sdílené vrstvy se dávají pouze globální atomy (Button, Text, Input). Podle Brada Frosta kolokace snižuje počet sdílených atomů o 60–70 % bez ztráty znovupoužitelnosti.
Je Atomic Design jen pro UI, nebo také pro kód?
Atomic Design je původně metodologie navrhování rozhraní (design), ale v moderní praxi se používá i pro organizaci kódu (code). V designových nástrojích (Figma, Sketch) jsou atomy komponenty knihovny; v kódu — funkce a třídy. Metodologie nerozlišuje mezi design a code — atom je stejný v mockupu i v implementaci. V IT Sectr používáme supernova.io pro synchronizaci design atomů a kódových atomů, což eliminuje odchylku mezi mockupem a výsledným rozhraním.
Shrnutí
- Atomic Design — metodologie hierarchické organizace UI komponent, využívající metaforu atomů, molekul, organismů, šablon a stránek.
- Atomy — základní prvky (tlačítko, vstupní pole); molekuly — jejich kombinace (pole se štítkem); organismy — složité bloky (vyhledávací formulář).
- Šablony určují kostru, stránky — konkrétní naplnění daty.
- Atomic Design nespravuje stav a business logiku — je zodpovědný pouze za organizaci UI vrstvy.
- V mobilním vývoji jsou atomy přirozeně popsány @Composable funkcemi (Android) a View strukturami (iOS).
- Atomic Design se dobře kombinuje s FSD: FSD definuje architekturu, Atomic Design — organizaci UI uvnitř plátků.
- Hlavní výhody — znovupoužití komponent, vizuální konzistence, rychlost vytváření nových obrazovek.
Vyvineme mobilní aplikaci na klíč
IT Sectr vytváří aplikace pro iOS a Android pro startupy a podniky od roku 2017. Poradíme vám a navrhneme nejlepší řešení.
Přečtěte si také