

Discover more from Designabile
Design System: componenti e sotto-componenti
đ Il numero di oggi è un approfondimento: un solo tema trattato in profonditĂ
Un Design System non può anticipare e produrre ogni possibile configurazione di qualunque bisogno che chiunque possa avere.
Sarebbe troppo complesso da creare e da gestire, nonchĂŠ poco flessibile ai cambiamenti.
In passato (e tuttâoggi) mi è capitato spesso di lavorare alla creazione e alla documentazione dei componenti di un Design System.
Ogni volta che pensavamo di aver creato tutte le possibili configurazioni, venivamo riportati alla realtĂ dellâuso reale del prodotto. Mancava sempre una variante o quella âpensataâ non andava bene nel contesto dâuso.
Come gestire qualcosa di cui non si conosce in anticipo la variabilitĂ ?
I sotto-componenti
Nathan Curtis suggerisce una soluzione interessante: usare i subcomponents.
Tra lâaltro, pochi giorni fa ne ha parlato alla conferenza Schema by Figma, qui di seguito il video del suo intervento:

Architecting Subcomponents - Nathan Curtis - YouTube
Playing constant catch up, adding prop after prop to support and maintain too many cases? Break larger components into flexible subcomponents so that users câŚ
Lâidea è molto interessante: invece che prevedere le varianti al livello piĂš alto del componente (esempio: Card, Card con immagine, Card con immagine e pulsante, etc) meglio intervenire ad un livello inferiore, ovvero quelli che lui chiama subcomponents, parti (mi piace definirle sezione) piĂš piccole da cui è composto.
Molecules vi ricorda qualcosa?! đ
Queste sezioni infatti devono poter contenere a loro volta parti piĂš piccole.
Vediamo un esempio concreto: un classico componente âCardâ e il sub-component âCardContainerâ (ovvero il contenitore al suo interno)


Agendo su questâultimo è possibile modificare il layout di tutto il componente, passando ad esempio da uno orizzontale ad uno verticale.
In questo modo non sarĂ piĂš necessario pensare e disegnare tutte le varianti possibili.
Abbiamo a disposizione invece un insieme di proprietĂ con cui sarĂ possibile gestire e mantenere il componente in modo flessibile.

Qualâè il vantaggio?
â Per chi âconsumaâ il Design System, câè la possibilitĂ di sperimentare tante configurazioni diverse in poco tempo.
â Per chi crea e mantiene il DS, non câè piĂš la necessitĂ di prevedere a monte tutte le varianti specifiche di un componente.
Combattere lâinefficacia
Dopo il boom degli anni passati, i Design Systems vivono un momento critico: diventa sempre piĂš complesso adottarli.
Il Design System Report del 2021 parla di un 40% che ha successo. Questo significa che quasi 2 su 3 diventa in poco tempo obsolete. Tra tutte le possibile cause ce nâè una che ritengo la piĂš delicata: đ Design systems go stale fast
Cosa ne pensi di questo formato di newsletter?
đ Molto interessante
đ Mah, troppo tecnico
đ Preferisco una lista di articoli e risorse da leggere con calma