Atomic Design — mga batayan, atomo, molekula, at organismo sa UI

Ano ang Atomic Design?

Atomic Design — metodolohiya ng paglikha ng hierarchical na mga sistema ng interface, kung saan ang bawat UI elemento ay kabilang sa isa sa limang antas: atomo (mga pangunahing elemento), molekula (kombinasyon ng atomo), organismo (kumplikadong bloke), template (balangkas ng pahina), at pahina (konkretong screen na may datos). Ang analogiya ay hiram mula sa kemika: ang mga atomo ay nagsasama-sama sa mga molekula, molekula sa organismo, organismo sa template, template ay pinupunan ng nilalaman at nagiging pahina.

Ang metodolohiya ay iminungkahi ng web designer na si Brad Frost noong 2013 bilang tugon sa problema ng "pag-iisip na nakabatay sa pahina" — kung saan ang bawat bagong screen ay idinisenyo mula sa simula, hindi isinasaalang-alang ang mga umiiral nang component. Sa aklat na "Atomic Design" (2016), inilalarawan ni Frost ang implementasyon ng metodolohiya sa mga proyekto ng malalaking kumpanya: IBM, GE, Starbucks. Ayon sa Nielsen Norman Group (2022), binabawasan ng Atomic Design ang oras ng disenyo ng mga bagong screen ng 30–50% sa pamamagitan ng muling paggamit ng mga yari na component.

Ang Atomic Design — ay hindi gaanong teknolohiya kundi isang pilosopiya ng organisasyon ng UI. Hindi ito nakatali sa isang partikular na framework at naaangkop sa web (React, Vue) at sa mobile development (Jetpack Compose, SwiftUI). Sa IT Sectr, ginagamit namin ang Atomic Design para sa pagbuo ng mga design system ng kliyente: kinikilala namin ang mga atomikong component sa yugto ng disenyo at inililipat ang mga ito sa mga code component ng Compose/SwiftUI.

Limang antas: atomo, molekula, organismo, template, pahina

Ang bawat antas ng Atomic Design ay lumulutas ng sarili nitong gawain at may mahigpit na lugar ng responsibilidad. Atomo — ang pinakamaliit na bloke ng gusali ng interface, na hindi na maaaring hatiin pa nang hindi nawawala ang kahulugan: buton, text field, icon, label, checkbox. Ang mga atomo ay hindi naglalaman ng business logic at hindi umaasa sa konteksto. Tinutukoy nila ang mga pangunahing visual na katangian: kulay, sukat, margin, tipograpiya.

Molekula — kombinasyon ng dalawa o higit pang atomo, na bumubuo ng mga simpleng functional na yunit. Ang input field na may label at mensahe ng error — molekula. Ang product card na may larawan, pangalan, at presyo — molekula. Ang mga molekula ay maaaring maglaman ng pangunahing lohika (ipakita/itago ang error), ngunit hindi naglalaman ng mga proseso ng negosyo. Ang mga molekula ay ang unang antas kung saan ang mga component ay nagiging magagamit muli sa iba't ibang screen.

Organismo — kumplikadong bloke ng interface, binubuo ng mga molekula at atomo, na nagpapatupad ng isang partikular na function ng application. Ang login form (email field, password field, send button, link "nakalimutan ang password") — organismo. Ang header na may logo, paghahanap, at nabigasyon — organismo. Ang mga organismo ay maaaring maglaman ng business logic at ma-access ang API, ngunit sa loob lamang ng kanilang function.

Template — balangkas ng pahina na tumutukoy sa paglalagay ng mga organismo sa screen nang walang konkretong nilalaman. Tinutukoy ng template ang grid, column, content zone — wireframe sa antas ng code. Ang mga template ay hindi naglalaman ng datos, placeholder lamang. Pinapayagan nila ang pagsusuri ng istraktura ng pahina bago ito punan ng nilalaman.

Pahina — konkretong screen ng application, kung saan ang template ay napuno ng tunay na datos. Sa antas na ito, sinusuri kung paano ang hitsura ng mga component na may tunay na nilalaman (mahabang string, kawalan ng datos, error). Ang mga pahina ay ang tanging antas na nakikita ng end user. Ang mga pagbabago sa antas ng pahina ay hindi dapat makaapekto sa mga atomo, molekula, at organismo — kung ang isang component ay kailangang baguhin, ang pagbabago ay ginagawa sa antas nito, at ang pahina ay awtomatikong kumukuha nito.

Mga benepisyo at limitasyon ng Atomic Design

Mga benepisyo ng Atomic Design ay nagpapakita kapag nag-scale ng mga interface. Ang isang pinag-isang library ng component ay ginagarantiyahan ang visual consistency: ang buton ay mukhang pareho sa lahat ng screen dahil ito ay parehong atomo. Ayon kay Brad Frost (2016), ang mga kumpanyang nagpatupad ng Atomic Design ay binabawasan ang oras ng pag-develop ng mga bagong screen ng 30–50% sa pamamagitan ng muling paggamit ng mga yari na molekula at organismo.

Mga limitasyon — hindi inilalarawan ng Atomic Design kung paano pamahalaan ang estado ng application. Ang metodolohiya ay sumasagot lamang sa tanong na "paano ayusin ang mga UI component", ngunit hindi hinahawakan ang business logic, routing, o paghawak ng datos. Pangalawang limitasyon — kahirapan sa pagtukoy ng mga hangganan: saan nagtatapos ang molekula at nagsisimula ang organismo? Sa praktika, ang mga hangganan ay malabo, at ang iba't ibang koponan ay maaaring mag-classify ng parehong component nang iba. Inirerekomenda na ayusin ang mga patakaran sa mga design token at component catalog (Storybook, Jetpack Compose Preview).

Pangatlong limitasyon — labis na abstraction para sa maliliit na proyekto. Kung ang application ay binubuo ng 5 screen, ang paggawa ng hierarchy ng mga atomo at molekula ay dagdag na trabaho. Ang Atomic Design ay nagiging kapaki-pakinabang kapag ang bilang ng mga screen ay lumampas sa 20 at ang mga component ay ginagamit muli sa iba't ibang pahina.

Atomic Design vs Feature-Sliced Design

Atomic Design at Feature-Sliced Design (FSD) ay lumulutas ng iba't ibang gawain at maaaring gamitin nang magkasama. Ang Atomic Design ay isang metodolohiya ng pag-oorganisa ng mga UI component, FSD — metodolohiya ng pag-oorganisa ng mga business layer at buong application. Sumasagot ang Atomic Design sa tanong na "paano hatiin ang UI sa mga magagamit muli na bahagi", FSD — "paano ayusin ang code sa paligid ng mga business feature". Hindi sila nagkakumpitensya: maaaring magkaroon ng FSD structure na may features at entities layers, at sa loob ng bawat layer gamitin ang Atomic Design para sa pag-oorganisa ng mga UI component.

Karaniwang kombinasyon: tinutukoy ng FSD ang modular na istraktura ng application (mga layer, slices), Atomic Design — ang panloob na istraktura ng mga UI component sa loob ng bawat slice. Halimbawa, ang slice feature.auth ay naglalaman ng mga molekula (LoginForm, PasswordInput) at organismo (AuthPage), na binuo ayon sa mga patakaran ng Atomic Design. Ang shared layer ay naglalaman ng mga atomo (Button, Input, Label), magagamit muli sa lahat ng feature.

Atomic Design sa mga mobile app: Compose at SwiftUI

Ang Jetpack Compose at SwiftUI ay natural na sumusuporta sa Atomic Design hierarchy sa pamamagitan ng component composition. Atomo sa Compose — mga pangunahing @Composable function: AppButton, AppTextField, AppCheckbox. Ang bawat function ay tumatanggap ng mga parameter ng kustomisasyon (kulay, sukat, estado) at hindi naglalaman ng business logic. Ang mga atomo ay tinutukoy sa shared layer at iniluluwas bilang UI-kit.

Molekula — mga @Composable function na nagsasama ng maraming atomo: LabeledTextField (label + input field + mensahe ng error), ProductCard (larawan + pangalan + presyo). Ang mga molekula ay maaaring maglaman ng pangunahing estado (validity ng field), ngunit hindi naa-access ang API o ViewModel. Ang mga ito ay ginagamit muli sa iba't ibang organismo.

Organismo — mga @Composable function sa antas ng feature: LoginForm (LabeledTextField para sa email + LabeledTextField para sa password + AppButton send + recovery link). Ang mga organismo ay gumagana sa ViewModel sa pamamagitan ng Intent function at maaaring maglaman ng business logic. Sa SwiftUI, ang katulad na hierarchy ay binuo sa pamamagitan ng @ViewBuilder at custom na View structures.

Sa SwiftUI, atomo — custom na View structure AppButton, molekula — input field na may label sa HStack, organismo — login form. Ang ganitong istraktura ay nagpapahintulot sa muling paggamit ng mga component sa lahat ng screen — ang pagbabago ng isang atomo (kulay ng buton) ay awtomatikong nalalapat sa lahat ng screen. Ang kombinasyon ng Atomic Design sa isang design system ay ginagarantiyahan ang consistency ng interface nang walang manu-manong kontrol ng bawat screen.