Design system
Definizione breve
Un design system è un insieme riutilizzabile di colori, tipografia, pulsanti e componenti di un marchio, riuniti in un unico corpo di regole.
La palette di colori, i caratteri, gli stili dei pulsanti, i campi dei moduli e i componenti a card vengono definiti ciascuno una volta, e ogni nuova pagina si costruisce a partire da questi componenti pronti invece di essere ridisegnata da zero. Vive come libreria in Figma e come set di componenti condiviso nel codice.
Lo si incontra non appena più di una pagina o prodotto deve portare lo stesso marchio, oppure quando i team di design e sviluppo hanno bisogno di un linguaggio comune.
Viene spesso confuso con una guida di brand. Una guida di brand è un documento che descrive come usare un logo e dei colori; un design system va oltre e include componenti di codice e design realmente pronti all'uso.
L'errore più comune è costruire il design system come una bella libreria Figma senza mai aggiornare i componenti nel codice, così il file di progettazione finisce per divergere da ciò che appare davvero sul sito. L'approccio corretto è trattare l'insieme dei componenti di codice come l'unica fonte di verità e stabilire un processo chiaro affinché lei riporti lì anche ogni cambiamento di design.
Perché conta
Progettare e programmare ogni pagina da zero costa tempo e produce pulsanti e colori incoerenti sul sito. Un design system velocizza la creazione di nuove pagine e mantiene il marchio identico ovunque.
Esempio illustrativo
Le pagine prodotto, servizio e campagna di un produttore di pavimentazioni sono tutte costruite con gli stessi componenti di pulsanti e card, così una nuova pagina viene realizzata in ore anziché in giorni.
