Design system
UI kit, component library o design system: cosa serve davvero
Tre parole che il mercato usa come sinonimi, ma che risolvono problemi diversi. Ecco cosa consegna ognuna, quando basta un UI kit e quando state comprando solo l’ennesimo file Figma.
In sintesi
- Un UI kit è un file, una component library è codice, un design system è un contratto.
- La scelta dipende dal passaggio di consegne, non dallo screenshot.
- EneUI indicizza 111.985 componenti da 1.472 librerie: è un catalogo, non un design system pronto.
UI kit, component library e design system vengono usati come sinonimi nelle pagine di vendita. Non lo sono. Un UI kit è un file di design; una component library è codice installabile; un design system è l’insieme di regole che tiene i due allineati dopo il primo restyling.
Scegliere lo strato sbagliato costa più di non sceglierne nessuno: compri un kit che nessuno implementa, o una libreria che nessuno riesce a progettare.
Cosa consegna ognuno
| Strato | Consegna | Chi lo usa | Quando basta |
|---|---|---|---|
| UI kit | Frame, varianti, text style | Design | Prototipo o validazione |
| Component library | Codice con props e stati | Sviluppo | Prodotto da spedire |
| Design system | Token, regole, release | Design + sviluppo | Più team o redesign frequenti |
Il test del passaggio di consegne
Chiediti chi riceve il file dopo. Se lo sviluppatore deve ricostruire ogni stato a occhio, il UI kit è l’acquisto sbagliato. Se il designer deve ridisegnare ogni componente dopo un rebranding, la component library da sola non basta. Se due team spediscono bottoni di altezze diverse, manca il design system.
Un catalogo non è un design system
EneUI indicizza 111.985 componenti da 1.472 librerie. È utile per scegliere un componente o confrontare stili, ma non decide la tua scala di spaziatura, il tuo focus ring o il tuo processo di rilascio. Il design system resta tuo.
La sequenza che evita acquisti inutili
- Definisci i sei token di base: colore, tipo, spazio, raggio, focus, motion.
- Scegli una component library che rispetti quei token, non il contrario.
- Aggiungi un UI kit solo se il team di design deve esplorare prima del codice.
- Scrivi le regole di rilascio: chi aggiorna, quando, con quale test.
La guida completa è UI kit vs component library vs design system.
Domande frequenti
UI kit e component library sono la stessa cosa?
No. Il UI kit è un file di design; la component library è codice installabile. Comprare uno non dà l’altro.
Serve un design system per un piccolo team?
Non subito. Bastano token condivisi e tre componenti base. Il design system completo arriva quando due prodotti o due team iniziano a divergere.
EneUI è un design system?
No, è un catalogo di componenti e librerie. Puoi usarlo per scegliere i pezzi, ma le regole del tuo sistema restano tue.
Quanti componenti servono per iniziare?
Dipende dalla schermata. Per una dashboard bastano button, input, select, card, table, dialog e toast; il resto si aggiunge quando serve.
Meglio Figma o codice prima?
Per un prodotto nuovo, il codice prima se il team è piccolo. Per un redesign, Figma prima se il linguaggio visivo deve cambiare davvero.