Design system: cos’è, cosa contiene e quando serve a un’azienda

Ogni azienda che ha più di un prodotto digitale arriva prima o poi allo stesso punto: tre siti con tre pulsanti diversi, un’app che sembra di un altro brand, fornitori che ridisegnano da zero gli stessi moduli a ogni progetto. Il design system nasce per risolvere esattamente questo. È il tipo di lavoro che ho fatto per Commercialisti.it, un design system nazionale costruito sulle linee guida AGID.

Cos’è un design system

Un design system è l’insieme condiviso di principi, regole, componenti e codice con cui un’azienda progetta e sviluppa le sue interfacce: siti, app, piattaforme, gestionali.

La differenza con una semplice raccolta di grafiche è che un design system vive in due posti contemporaneamente: negli strumenti di chi progetta e nel codice di chi sviluppa. Un pulsante del design system è lo stesso pulsante nel file di progetto e nel prodotto pubblicato.

Design system, brand book e UI kit: le differenze

	Cos’è	Chi lo usa
Brand book	Le regole dell’identità del brand	Marketing, comunicazione, fornitori
UI kit	Una libreria di elementi grafici per le interfacce	Designer
Design system	Principi, componenti, codice e documentazione	Designer, sviluppatori, product team

Il brand book dice come appare il brand. L’UI kit è un pezzo del design system. Il design system è il sistema completo che porta l’identità dentro i prodotti digitali, e la mantiene nel tempo.

Cosa contiene un design system

Un design system maturo comprende di solito:

• principi: due o tre criteri che guidano ogni scelta, per esempio “chiaro prima che bello”;
• fondamenta: colori, tipografia, spaziature, griglie, icone, ombre, raggi degli angoli;
• componenti: pulsanti, campi, menu, card, tabelle, finestre di dialogo, ciascuno con i suoi stati (normale, attivo, disabilitato, errore);
• pattern: soluzioni ricorrenti a problemi ricorrenti, come un modulo di registrazione, una ricerca, un messaggio di errore;
• regole per i contenuti: come si scrivono etichette, messaggi e microtesti, in linea con il tone of voice;
• accessibilità: contrasti, dimensioni minime, navigazione da tastiera, testi alternativi;
• documentazione e codice: quando usare ogni componente, quando no, e la sua versione pronta per lo sviluppo.

I design token, spiegati semplice

I design token sono le decisioni di base del sistema salvate come valori con un nome: “colore primario”, “spaziatura media”, “testo grande”. Invece di scrivere ovunque un codice colore, si usa il nome del token.

Il vantaggio è enorme: se il colore primario cambia, si aggiorna il token e il cambiamento arriva in tutti i prodotti. È anche il modo più pulito per gestire temi diversi, come la modalità scura o più brand nello stesso gruppo.

A cosa serve un design system

• Coerenza: tutti i prodotti parlano la stessa lingua visiva, chiunque li realizzi.
• Velocità: designer e sviluppatori non ridisegnano ogni volta gli stessi elementi.
• Qualità: accessibilità e buone pratiche si risolvono una volta, nel componente, e valgono ovunque.
• Fornitori allineati: chi arriva dall’esterno trova le regole già scritte.
• Manutenzione: un cambiamento si fa in un punto solo, non in cento pagine.

Quando serve a un’azienda, e quando no

Un design system conviene quando:

• l’azienda ha più prodotti digitali, o un prodotto che cresce di continuo;
• più team o più fornitori lavorano sulle stesse interfacce;
• le incoerenze visive iniziano a costare: rifacimenti, errori, clienti confusi.

Non serve, almeno all’inizio, a chi ha un solo sito vetrina aggiornato di rado. In quel caso bastano poche regole ben scritte. Si parte piccoli e si cresce quando il problema diventa reale.

Come si costruisce un design system

1. Inventario. Si raccolgono tutte le interfacce esistenti e si contano le varianti dello stesso elemento. Di solito sono più di quanto si pensi.
2. Principi e fondamenta. Si decidono criteri, colori, tipografia, spaziature, e si trasformano in token.
3. Componenti essenziali. Si parte da quelli che compaiono ovunque: pulsanti, campi, navigazione, card.
4. Documentazione. Ogni componente con il suo uso corretto, gli esempi giusti e quelli sbagliati.
5. Adozione. Il sistema si usa su un progetto reale prima di estenderlo agli altri.
6. Governance. Qualcuno decide cosa entra nel sistema, come si propone un componente nuovo e come si aggiorna.

Il punto 6 è quello che decide se un design system sopravvive. Senza qualcuno che lo governa, dopo un anno torna a essere una raccolta di eccezioni.

Design system e AI

Gli strumenti di intelligenza artificiale oggi generano schermate, componenti e interi prototipi in pochi secondi. Senza un sistema di riferimento, ognuno di questi risultati introduce varianti nuove: un altro pulsante, un’altra spaziatura, un altro grigio.

Un design system diventa così il vincolo che rende utile la velocità dell’AI:

• token e componenti sono regole precise, che anche uno strumento può rispettare;
• la documentazione diventa il contesto da dare all’AI quando genera interfacce o testi;
• la revisione si fa confrontando ogni proposta con il sistema, non con il gusto del momento.

È lo stesso principio che guida tutta la AI Creative Direction: l’AI esegue dentro regole che decide una persona.

Errori comuni

• Partire dall’UI kit invece che dai problemi. Un bel file di componenti che nessuno usa non è un design system.
• Volere tutto subito. Cento componenti documentati a metà valgono meno di dieci fatti bene.
• Lasciarlo solo ai designer. Se non arriva nel codice, il sistema resta un’intenzione.
• Non assegnare un responsabile. Senza governance, ogni progetto aggiunge la sua eccezione.

Domande frequenti

Cos’è un design system?

È l’insieme di principi, regole, componenti e codice con cui un’azienda progetta e sviluppa le sue interfacce digitali. Permette di riusare gli stessi elementi su tutti i prodotti, mantenendo coerenza e qualità.

Che differenza c’è tra design system e UI kit?

L’UI kit è una libreria di elementi grafici per chi progetta. Il design system comprende anche principi, regole d’uso, documentazione e codice, ed è usato insieme da designer e sviluppatori.

Che differenza c’è tra design system e brand book?

Il brand book raccoglie le regole dell’identità del brand per la comunicazione. Il design system porta quell’identità dentro i prodotti digitali, con componenti e codice pronti da usare.

Cosa sono i design token?

Sono le decisioni di base del design system, come colori, tipografia e spaziature, salvate come valori con un nome. Cambiando un token, il cambiamento si applica a tutti i prodotti che lo usano.

Quando serve un design system a un’azienda?

Quando ha più prodotti digitali, o un prodotto in crescita, e quando più team o fornitori lavorano sulle stesse interfacce. Per un singolo sito aggiornato di rado bastano poche regole scritte.

Come cambia il design system con l’intelligenza artificiale?

Diventa il riferimento che gli strumenti di AI devono rispettare quando generano interfacce e contenuti. Token, componenti e documentazione trasformano la velocità dell’AI in risultati coerenti con il brand.

---

Antonio Amore è Creative Director e Head of AI Creative in One [Assodigit] e si occupa di AI Creative Direction. Graphic designer dal 2005 e art director per circa dieci anni, lavora con PMI e aziende italiane su identità di marca, design system, UX di prodotto e integrazione dell’AI nei processi creativi. Scrivimi su LinkedIn.