La parola 'design system' evoca Google Material o il sistema di Airbnb. Centinaia di componenti, team dedicati, documentazione da 200 pagine. Ma un design system può essere anche 40 componenti e un documento di 15 pagine. E per molte piccole imprese con un prodotto digitale, è esattamente quello di cui hanno bisogno.

Cos'è un design system in termini pratici

Un design system è un insieme di componenti visivi riutilizzabili, con regole chiare su come usarli. In Figma, significa componenti con varianti, variabili di stile per colori e tipografia, e una documentazione che spiega le eccezioni. L'obiettivo è che chiunque lavori sul prodotto, designer o sviluppatore, prenda decisioni coerenti senza dover chiedere ogni volta.

Quando ha senso costruirlo

Ha senso quando il prodotto ha più di cinque schermate, quando ci sono più persone che lavorano sul design o sullo sviluppo, o quando il prodotto viene aggiornato regolarmente. Non ha senso per un sito vetrina di cinque pagine che non cambierà per tre anni. In quel caso, un file Figma ben organizzato con stili condivisi è sufficiente.

Cosa deve contenere un sistema minimo

Per un prodotto digitale di medie dimensioni: variabili di colore (primari, secondari, stati di errore e successo), scala tipografica con almeno quattro livelli, componenti base (bottoni, input, card, navigazione, modali), e una pagina di documentazione con le regole di spaziatura. Tutto il resto si aggiunge quando serve, non prima.

Come consegnarlo a un team di sviluppo

Il file Figma da solo non basta. I nomi dei componenti devono corrispondere ai nomi usati nel codice. Le variabili di stile devono avere valori in tutti i formati necessari (HEX, RGB, HSL). Le eccezioni vanno documentate esplicitamente. Nel progetto dell'app per pendolari, abbiamo aggiunto una sezione 'non fare questo' che ha evitato almeno sei errori di implementazione.

Il costo di non averlo

Senza un sistema, ogni nuova schermata è una decisione da zero. I colori si moltiplicano, i bottoni diventano leggermente diversi in ogni sezione, i margini non tornano. Il debito visivo si accumula come il debito tecnico. Rifarlo dopo due anni di sviluppo costa molto di più che costruirlo all'inizio.

Se state costruendo un prodotto digitale e volete capire se un design system fa al caso vostro, scriveteci. Facciamo una valutazione iniziale gratuita di 30 minuti.