L'atomic design è una metodologia introdotta da Brad Frost nel 2013 (libro "Atomic Design", pubblicato gratuitamente online) per organizzare i componenti di un'interfaccia in cinque livelli gerarchici. Prende ispirazione dalla chimica: atomi compongono molecole, molecole compongono organismi, e così via. È diventata negli anni la metodologia più adottata per progettare e mantenere design system scalabili.
In questo articolo: cosa significa esattamente, come si applicano i 5 livelli a un sistema reale (con esempi Figma), perché funziona ma non è una soluzione universale, e una guida pratica per partire da zero a costruire il tuo primo design system atomic-style.
Cos'è atomic design — i 5 livelli
1. Atomi
Gli atomi sono i mattoni elementari dell'interfaccia: un colore, un font size, un'icona, un input field, un bottone, una label. Non hanno significato isolato — sono troppo astratti per essere usati da soli — ma sono la base di tutto il resto.
Esempi: colore primary blu navy, font Inter 16px, icona "search", border-radius 8px, button base.
2. Molecole
Le molecole sono combinazioni di atomi che formano qualcosa di funzionalmente più ricco. Una search bar è una molecola: combina un input field (atomo) + un'icona search (atomo) + un button submit (atomo).
Le molecole hanno responsabilità singola e specifica. Sono ancora riutilizzabili in molti contesti.
3. Organismi
Gli organismi sono assemblati di molecole + atomi che formano sezioni distinte di interfaccia. Un header è un organismo: contiene logo (atomo) + navigation (molecola) + search bar (molecola) + user profile menu (molecola).
Gli organismi iniziano ad avere identità : un "header del checkout" è diverso da un "header marketing".
4. Template
I template sono layout di pagina senza contenuto reale. Definiscono la struttura: dove va l'header, dove la sidebar, dove il main, dove il footer. Lavorano con placeholder, non con dati veri.
I template separano la struttura dal contenuto, permettendo di progettare la grid prima di sapere il copy esatto.
5. Pagine
Le pagine sono template riempite di contenuto reale. La pagina prodotto, la pagina checkout, la pagina profilo utente. Sono il punto in cui il design diventa testabile con utenti reali.
Le pagine sono dove emergono i bug: copy troppo lungo che rompe il layout, casi edge non considerati, dati reali che fanno saltare la grid.
I 4 vantaggi di pensare per atomi
1. Scalabilità . Cambiare un atomo (es. il colore primary) si propaga automaticamente in tutte le molecole, organismi, template e pagine. Il rebrand di un design system atomic-style è 10× più rapido.
2. Comunicazione team. Designer, sviluppatori e PM hanno un linguaggio condiviso. "Aggiungi un'altra molecola tipo search" è chiaro a tutti.
3. Riusabilità . Le molecole/organismi sono modulari e portabili tra progetti. Una "card prodotto" funziona su homepage, listing, ricerca, recommendation.
4. Manutenzione. Bug fix sono localizzati: riparare un atomo non rischia di rompere tutta la libreria.
Come applicarlo in pratica con Figma
Step 1 — Inizia dagli atomi
Crea una pagina Figma "Foundations" con: color tokens (variables), typography scales, spacing system, shadow elevations, border radii, base icons.
Step 2 — Costruisci 5-10 molecole essenziali
Le più comuni: button (primary/secondary/ghost), input field (con stati: default, focus, error, disabled), checkbox, radio, dropdown, link, badge, avatar.
Step 3 — Assembla 5-10 organismi
Header, footer, card componenti, modal dialog, navigation sidebar, form section, breadcrumbs, pagination, table.
Step 4 — Progetta 3-5 template
Marketing landing template, dashboard template, form-based page template, list/detail template, error template.
Step 5 — Compila pagine reali
Solo a questo punto disegni la home page, la pagina prodotto, la pagina checkout — combinando organismi nei template.
Atomic design vs design system
Confusione comune. La differenza:
- Design system è il prodotto: la libreria di componenti + documentazione + linee guida
- Atomic design è la metodologia per organizzare quel design system in livelli gerarchici
Puoi avere un design system non-atomic (es. organizzato per "componenti" senza gerarchia) o un sistema atomic non-design-system (es. atomic in un singolo progetto isolato). I due si sovrappongono spesso ma non sono sinonimi.
Critiche legittime ad atomic design
Atomic design ha ricevuto critiche valide nel tempo:
Categorizzazione rigida. Alcuni componenti non si lasciano facilmente categorizzare. Una "card prodotto" è una molecola o un organismo? La discussione consuma tempo senza valore.
Over-engineering precoce. Per progetti piccoli (1-2 designer, 5-10 schermate), atomic design è overkill. Un sistema semplice di componenti senza gerarchia funziona meglio.
Non risolve il vero problema. Il problema dei design system non è categorizzare componenti — è governance, adozione e manutenzione nel tempo. Atomic design non aiuta con questo.
Brad Frost stesso ha aggiornato il pensiero negli anni: nel 2024 ha pubblicato "Atomic Design 2.0" che enfatizza meno la rigidità della categorizzazione.
Alternative ad atomic design
- BEM (Block Element Modifier): metodologia CSS che organizza per blocco, tipica nei team frontend
- Material Design 3 token system: gerarchia 3-tier (reference, system, component) — più tecnica
- Theo's Design System Pattern: enfatizza i pattern d'uso più che la struttura
- Custom hierarchies: molti team grandi (Shopify, Atlassian) hanno proprie tassonomie ibride
Domande frequenti
Ha senso atomic design per un progetto piccolo?
Sotto 1 designer + 20 schermate totali, no. Sopra 3 designer + 50 schermate, sì. Tra i due, dipende da quanto velocemente cresce il progetto.
Devo creare una pagina Figma per ogni livello?
È una convenzione comune (pagina "Atoms", "Molecules", ecc.) ma non obbligatoria. L'importante è che la gerarchia sia leggibile, non che sia organizzata in pagine separate.
Quanti componenti dovrei creare al lancio?
Per un MVP: 10-15 atomi, 8-12 molecole, 5-8 organismi, 3-5 template. Totale circa 30-40 componenti. Aggiungi solo quando una nuova schermata richiede qualcosa che non esiste.
Lo capirò da junior?
I primi 3 livelli (atomi, molecole, organismi) sono intuitivi. Template e pagine richiedono più esperienza per fare bene. Inizia a categorizzare i componenti dei tuoi primi progetti — è il modo migliore per interiorizzarlo.
Posso usarlo senza un design system formale?
Sì. Anche su un progetto singolo, organizzare i tuoi componenti in atomi/molecole/organismi rende il file Figma più navigabile. Non hai bisogno di un design system completo per beneficiare della gerarchia.
Prossimi passi
Atomic design è centrale per chi vuole specializzarsi in design system engineering, una nicchia che paga molto bene (€48-65k senior in Italia secondo Crebs 2026). Il Corso di UI & Visual Design di CorsoUX dedica capitoli a design system, atomic design, Figma Variables e tokens. 101 lezioni con mentor 1:1.
Per approfondire: cos'è un design system, Material Design 3 (che usa atomic-like 3-tier tokens) e tutorial Figma con focus su componenti riutilizzabili.
