Atomic Design: atomi, molecole e organismi
Classificare i componenti in atomi, molecole, organismi, template e pagine per creare un vocabolario condiviso tra design e sviluppo
Atomic Design: atomi, molecole e organismi è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos'è l'Atomic Design?
L'Atomic Design (Brad Frost, 2013) è un modello concettuale per organizzare i componenti dell'interfaccia utente in cinque livelli di complessità: Atomi, Molecole, Organismi, Template e Pagine. Fornisce a designer e sviluppatori un vocabolario condiviso.
Atomi — i blocchi costitutivi più piccoli
Componenti con un'unica responsabilità che non possono essere ulteriormente scomposti. Pulsanti, campi di input, icone, etichette e campioni di colore. Sono astratti e riutilizzabili in qualsiasi contesto.
// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>Molecole — semplici gruppi di componenti
Combinano gli atomi per svolgere una funzione utile. Una SearchBar è composta da Input + Button + Icon. Un FormField è composto da Label + Input + ErrorMessage. Restano componenti generici.
function SearchBar({ onSearch }) {
return (
<div className="search-bar">
<Input placeholder="Search..." />
<Button onClick={onSearch}>
<Icon name="search" />
</Button>
</div>
);
}Organismi — sezioni complesse
Composizioni più grandi che formano sezioni distinte di un'interfaccia: un Header (logo + nav + barra di ricerca + menu utente), una ProductCard (immagine + titolo + prezzo + pulsante), uno SignupForm. Sono più consapevoli del contesto.
function Header({ user }) {
return (
<header>
<Logo />
<Navigation links={navLinks} />
<SearchBar onSearch={handleSearch} />
<UserMenu user={user} />
</header>
);
}Template — scheletri delle pagine
Layout a livello di wireframe che organizzano gli organismi senza contenuti reali. Un BlogTemplate contiene un Header, un Main con slot Article e una Sidebar.
function BlogTemplate({ header, article, sidebar, footer }) {
return (
<div className="blog-layout">
{header}
<div className="main">
<main>{article}</main>
<aside>{sidebar}</aside>
</div>
{footer}
</div>
);
}Pagine — contenuti reali
Template con contenuti reali. La pagina /blog/[slug] esegue il rendering di BlogTemplate con l'articolo effettivo, i widget della sidebar e gli elementi strutturali dell'interfaccia.
Struttura delle cartelle
Molti team organizzano i componenti per livello.
src/components/
atoms/
Button.tsx
Input.tsx
Icon.tsx
molecules/
SearchBar.tsx
FormField.tsx
organisms/
Header.tsx
ProductCard.tsx
templates/
BlogTemplate.tsx
pages/
BlogPage.tsxVantaggi
Vocabolario condiviso tra designer e sviluppatori. Incoraggia la composizione invece della duplicazione. Rende più semplice creare sistemi di design. Promuove l'attenzione verso la più piccola unità riutilizzabile.
Critica: la categorizzazione rigida è difficile
Nella pratica, il confine tra molecola e organismo è sfumato. Molti team finiscono per discutere su dove collocare un elemento, vanificando l'obiettivo di chiarezza.
Alternativa moderna: organizzazione per funzionalità
Molti codebase React/Vue di grandi dimensioni preferiscono organizzare il codice per funzionalità (auth/, checkout/, dashboard/) invece che secondo livelli atomici rigidi. L'approccio atomico resta efficace per il livello del sistema di design condiviso.
Atomic Design in Storybook
Storybook si adatta bene all'Atomic Design: le categorie di primo livello Atoms, Molecules e Organisms rendono la libreria dei componenti facile da esplorare.
Quando utilizzare l'Atomic Design
È ideale per: librerie di sistemi di design condivise tra più app, team numerosi che necessitano di un modello concettuale condiviso e progetti con il coinvolgimento attivo dei designer. Lo eviti per: app di piccole dimensioni, prototipi e SPA incentrate sulle funzionalità, dove la colocation è più importante.
Verifica rapida
Nell'Atomic Design, che tipo di componente è una SearchBar composta da Input + Button + Icon?
Riepilogo: Atomic Design
Cinque livelli: Atomi (Button, Input, Icon), Molecole (SearchBar, FormField), Organismi (Header, ProductCard), Template (layout) e Pagine (contenuti reali). Vocabolario condiviso e approccio basato sulla composizione. La struttura delle cartelle rispecchia i livelli. È ideale per i sistemi di design condivisi; per il codice delle app, le cartelle organizzate per funzionalità spesso sono preferibili a quelle atomiche.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Atomic Design: atomi, molecole e organismi» è gratuita?
Sì — il testo completo di «Atomic Design: atomi, molecole e organismi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Atomic Design: atomi, molecole e organismi»?
Classificare i componenti in atomi, molecole, organismi, template e pagine per creare un vocabolario condiviso tra design e sviluppo Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Atomic Design: atomi, molecole e organismi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Atomic Design: atomi, molecole e organismi
- Configurare un monorepo con Turborepo
- Micro-frontend: Module Federation
- Struttura delle cartelle basata sulle funzionalità