Design system
Che cos'è un design system
Un design system è l'insieme di token, componenti, documentazione e regole che un prodotto riusa: non un file Figma, non un catalogo di opzioni.
In sintesi
- Un design system è fatto di token, componenti, documentazione e un proprietario.
- Il token è il contratto: se il nome è semantico, il tema cambia senza toccare i componenti.
- Sotto i tre team il costo di un design system supera il beneficio.
Un design system è l'insieme delle decisioni visive e di interazione di un prodotto, espresso in token e componenti riutilizzabili. Non è un file Figma e non è un catalogo di componenti.
Le quattro parti
Un design system maturo ha token, componenti, documentazione e un proprietario. I token sono decisioni con un nome; i componenti sono l'implementazione; la documentazione dice quando usarli; il proprietario decide cosa entra.
Il token è il contratto
Un token è una decisione con un nome: --radius, --primary, --spacing-2. Se il nome è semantico, il tema cambia senza toccare i componenti; se il nome descrive il colore, ogni rebrand diventa una ricerca e sostituzione.
grep -rhoE '^\s*--[a-z0-9-]+:' src/styles/globals.css | sort -u | wc -lIl comando stampa quanti token dichiara il tuo foglio di stile. Un numero molto basso indica valori grezzi scritti dentro i componenti; un numero molto alto indica che manca lo strato semantico.
Il componente è la parte visibile
Un pulsante con varianti, stati e focus visibile è il pezzo che l'utente incontra. Il catalogo EneUI mostra la scheda di sonner di shadcn/ui con file e licenza a monte; sul catalogo trovi anche 12.808 icone e 111.985 componenti.
Design system e catalogo non coincidono
Un catalogo elenca opzioni: utile per scegliere, inutile come regola. Un design system sceglie al posto tuo e documenta il motivo. Per questo due team possono usare lo stesso catalogo e consegnare interfacce diverse.
Licenza e provenienza
Ogni record dichiara la licenza a monte. shadcn/ui e Radix UI sono MIT, quindi puoi copiare e modificare; una libreria GPL o con clausole commerciali cambia il calcolo. Registra la licenza accanto al componente, non solo nel repository.
La limitazione
Un design system costa più di quanto rende sotto i tre team. Token, documentazione e revisioni richiedono un proprietario con tempo dedicato; con un solo prodotto e due sviluppatori, un foglio di stile commentato fa lo stesso lavoro a un decimo del costo.
Dove continuare
Il tema senza un secondo design system è in dark mode senza secondo design system; il contrasto misurato è in palette e contrasto misurato. La differenza tra UI kit, libreria e design system è in UI kit, component library o design system.
Domande frequenti
Un design system è una libreria di componenti?
No. Una libreria fornisce componenti; un design system aggiunge token, regole d'uso, documentazione e un proprietario che decide cosa entra.
Da dove si parte?
Dai token. Inventaria i valori grezzi, dai un nome semantico alle decisioni e solo dopo costruisci i componenti sui token.
Serve Figma?
No. Figma aiuta a progettare, ma il design system vive nel codice: token e componenti sono la fonte di verità. Un file Figma che diverge dal codice è documentazione morta.
Quanti token servono?
Non esiste un numero giusto. Servono abbastanza token per coprire colore, tipografia, spaziatura e raggio, e pochi abbastanza da poterli ricordare.
Chi mantiene un design system?
Una persona con tempo dedicato, non un gruppo senza mandato. Senza un proprietario le eccezioni si accumulano e il sistema smette di essere una regola.