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