Atomic Design — bazele, atomii, moleculele și organismele în UI

Ce este Atomic Design?

Atomic Design — metodologia de creare a sistemelor ierarhice de interfețe, în care fiecare element UI aparține unuia dintre cele cinci niveluri: atomi (elemente de bază), molecule (combinații de atomi), organisme (blocuri complexe), șabloane (scheme de pagini) și pagini (ecrane concrete cu date). Analogia este împrumutată din chimie: atomii se combină în molecule, moleculele — în organisme, organismele — în șabloane, șabloanele se umplu cu conținut și devin pagini.

Metodologia a fost propusă de designerul web Brad Frost în 2013 ca răspuns la problema „gândirii pe pagini" — când fiecare ecran nou este proiectat de la zero, fără a lua în considerare componentele existente. În cartea „Atomic Design" (2016), Frost descrie implementarea metodologiei în proiectele marilor companii: IBM, GE, Starbucks. Potrivit Nielsen Norman Group (2022), Atomic Design reduce timpul de proiectare a noilor ecrane cu 30–50% datorită reutilizării componentelor gata făcute.

Atomic Design — nu este atât o tehnologie, cât o filozofie de organizare a UI. Nu este legată de un framework specific și este aplicabilă atât în web (React, Vue), cât și în dezvoltarea mobilă (Jetpack Compose, SwiftUI). În IT Sectr folosim Atomic Design pentru construirea sistemelor de design ale clienților: extragem componente atomare în faza de proiectare și le transferăm în componentele de cod Compose/SwiftUI.

Cinci niveluri: atomi, molecule, organisme, șabloane, pagini

Fiecare nivel al Atomic Design își rezolvă sarcina și are un domeniu strict de responsabilitate. Atomii — cele mai mici blocuri constructive ale interfeței, care nu pot fi divizate fără pierderea sensului: buton, câmp text, pictogramă, etichetă, casetă de selectare. Atomii nu conțin logică de business și nu depind de context. Ei definesc caracteristicile vizuale de bază: culoare, dimensiune, spațieri, tipografie.

Moleculele — combinații de doi sau mai mulți atomi, care formează unități funcționale simple. Câmpul de intrare cu etichetă și mesaj de eroare — moleculă. Cardul de produs cu imagine, nume și preț — moleculă. Moleculele pot conține logică de bază (arată/ascunde eroarea), dar nu conțin procese de business. Moleculele sunt primul nivel la care componentele devin reutilizabile între diferite ecrane.

Organismele — blocuri complexe de interfață, formate din molecule și atomi, care implementează o funcție concretă a aplicației. Formularul de autentificare (câmp email, câmp parolă, buton de trimitere, link „am uitat parola") — organism. Header-ul cu logo, căutare și navigare — organism. Organismele pot conține logică de business și pot apela API, dar numai în cadrul funcției lor.

Șabloanele — scheme de pagini, care determină amplasarea organismelor pe ecran fără conținut concret. Șablonul definește grila, coloanele, zonele pentru conținut — wireframe la nivel de cod. Șabloanele nu conțin date, doar placeholder-e. Ele permit evaluarea structurii paginii înainte de umplerea cu conținut.

Paginile — ecrane concrete ale aplicației, unde șablonul este umplut cu date reale. La acest nivel se verifică cum arată componentele cu conținut real (șiruri lungi, lipsa datelor, erori). Paginile sunt singurul nivel pe care îl vede utilizatorul final. Modificările la nivel de pagini nu ar trebui să afecteze atomii, moleculele și organismele — dacă o componentă trebuie modificată, modificarea se aplică la nivelul său, iar pagina o preia automat.

Avantajele și limitările Atomic Design

Avantajele Atomic Design se manifestă la scalarea interfețelor. O bibliotecă unică de componente garantează consistența vizuală: butonul arată la fel pe toate ecranele, deoarece este același atom. Potrivit lui Brad Frost (2016), companiile care au implementat Atomic Design reduc timpul de dezvoltare a noilor ecrane cu 30–50% datorită reutilizării moleculelor și organismelor gata făcute.

Limitările — Atomic Design nu descrie cum să gestionăm starea aplicației. Metodologia răspunde doar la întrebarea „cum să organizăm componentele UI", dar nu atinge logica de business, rutarea, lucrul cu datele. A doua limitare — dificultatea definirii granițelor: unde se termină molecula și începe organismul? În practică, granițele sunt neclare și echipele diferite pot clasifica aceeași componentă diferit. Se recomandă fixarea regulilor în tokeni de design și catalogul de componente (Storybook, Jetpack Compose Preview).

A treia limitare — abstractizarea excesivă pentru proiecte mici. Dacă aplicația constă din 5 ecrane, crearea ierarhiei de atomi și molecule este o muncă suplimentară. Atomic Design devine avantajos când numărul de ecrane depășește 20, iar componentele sunt reutilizate pe diferite pagini.

Atomic Design vs Feature-Sliced Design

Atomic Design și Feature-Sliced Design (FSD) rezolvă sarcini diferite și pot fi utilizate împreună. Atomic Design este o metodologie de organizare a componentelor UI, FSD — o metodologie de organizare a stratelor de business și a întregii aplicații. Atomic Design răspunde la întrebarea „cum să împărțim UI în părți reutilizabile", FSD — „cum să organizăm codul în jurul funcțiilor de business". Ele nu concurează: se poate avea o structură FSD cu straturi features și entities, iar în interiorul fiecărui strat să se folosească Atomic Design pentru organizarea componentelor UI.

Combinația tipică: FSD definește structura modulară a aplicației (straturi, felii), Atomic Design — structura internă a componentelor UI în interiorul fiecărei felii. De exemplu, felia feature.auth conține molecule (LoginForm, PasswordInput) și organisme (AuthPage), construite după regulile Atomic Design. Stratul shared conține atomi (Button, Input, Label), reutilizabili în toate funcțiile.

Atomic Design în aplicațiile mobile: Compose și SwiftUI

Jetpack Compose și SwiftUI sprijină în mod natural ierarhia Atomic Design prin compoziția componentelor. Atomii în Compose — funcții @Composable de bază: AppButton, AppTextField, AppCheckbox. Fiecare funcție primește parametri de personalizare (culoare, dimensiune, stare) și nu conține logică de business. Atomii sunt definiți în stratul shared și exportați ca UI-kit.

Moleculele — funcții @Composable care combină mai mulți atomi: LabeledTextField (etichetă + câmp de intrare + mesaj de eroare), ProductCard (imagine + nume + preț). Moleculele pot conține stare de bază (validitatea câmpului), dar nu accesează API sau ViewModel. Ele sunt reutilizabile în diferite organisme.

Organismele — funcții @Composable la nivel de funcție: LoginForm (LabeledTextField pentru email + LabeledTextField pentru parolă + AppButton de trimitere + link de recuperare). Organismele lucrează cu ViewModel prin funcții Intent și pot conține logică de business. În SwiftUI, ierarhia similară se construiește prin @ViewBuilder și structuri View personalizate.

În SwiftUI, atomul — o structură View personalizată AppButton, molecula — câmp de intrare cu etichetă pe HStack, organismul — formular de autentificare. O astfel de structură permite reutilizarea componentelor pe toate ecranele — modificarea unui atom (culoarea butonului) se aplică automat pe toate ecranele. Combinarea Atomic Design cu un sistem de design garantează consistența interfeței fără control manual al fiecărui ecran.