Con anni di esperienza nello sviluppo di design system, in Buildo siamo orgogliosi di aver creato Bento DS, il nostro avanzato design system white-label che aiuta le aziende a ottimizzare i processi di design e a creare esperienze utente coerenti e di alta qualità.
Gabriele Petronella Con anni di esperienza nello sviluppo di design system, in Buildo siamo orgogliosi di aver creato Bento DS, il nostro avanzato design system white-label che aiuta le aziende a ottimizzare i processi di design e a creare esperienze utente coerenti e di alta qualità. Uno dei principali artefici dello sviluppo di Bento DS è Gabriele Petronella, esperto di software engineering con una lunga esperienza nello sviluppo front-end con React e TypeScript. Lo abbiamo incontrato per parlare del processo di creazione di Bento DS, di ciò che lo rende unico e di come possa aiutare aziende di ogni dimensione a migliorare le proprie competenze di design.
Bento DS è un design system versatile che dà priorità a tecnologie web come React e Figma. Inizialmente lo abbiamo sviluppato come strumento per supportare i nostri clienti, ma, riconoscendone il grande potenziale in termini di ingegnerizzazione, personalizzazione e accessibilità, abbiamo deciso di renderlo disponibile a un pubblico più ampio.
Il successo di Bento DS si fonda sulla sua capacità di allineare perfettamente i team di design e di sviluppo, sia nei processi sia nei componenti. Questa caratteristica unica non solo riduce i tempi di sviluppo, ma rende anche più fluido il passaggio di consegne dal team di design a quello di sviluppo. Lavorando con lo stesso strumento per progettare e sviluppare, designer e sviluppatori possono collaborare più strettamente, assicurandosi che tutti abbiano la stessa visione e che le aspettative di design siano chiare. Con Bento DS, gli sviluppatori non devono più faticare per interpretare o ricreare un design, e i designer non devono più preoccuparsi che i loro progetti siano effettivamente realizzabili.
Questo livello di allineamento e collaborazione è fondamentale per le aziende che vogliono massimizzare produttività ed efficienza, e Bento DS offre una soluzione concreta per farlo.
Inoltre, il sistema pone grande attenzione all’accessibilità: i componenti seguono le best practice in materia e sono utilizzabili su molti device — per questo diciamo “accessible by design”.
Nel complesso, Bento DS offre una solida base per lo sviluppo di prodotti digitali completamente accessibili.
Ciò che rende Bento DS un prodotto speciale è l’influenza diretta che, come software house, abbiamo avuto sul suo design e sullo sviluppo complessivo.
Al suo interno vive una cultura dello sviluppo software fortemente orientata al risultato finale e all’integrazione delle competenze.
Come software house, sviluppiamo ogni giorno software per altre aziende, con designer e sviluppatori che lavorano a stretto contatto per offrire il miglior prodotto possibile. Questa collaborazione quotidiana ci ha permesso di maturare una profonda comprensione delle principali frizioni e incomprensioni che possono nascere tra il mondo del design e quello dello sviluppo. Partendo da questa esperienza, abbiamo progettato Bento DS per incorporare le best practice di entrambi gli ambiti e per semplificare il processo di sviluppo, garantendo al contempo un alto livello di fedeltà al design. Bento DS rappresenta la sintesi della nostra esperienza nella costruzione di software e del nostro impegno per la collaborazione interdisciplinare.
In questo sistema la linea tra design e sviluppo è sfumata: le decisioni si prendono insieme e gli artefatti non vengono mantenuti separati. Questo approccio riflette la filosofia della nostra azienda, che mira ad abbattere i silos e a promuovere una cultura di collaborazione interdisciplinare.
I vantaggi non derivano semplicemente dall’essere una software house, ma dall’essere una software house che segue l’intero processo di consegna del prodotto.
In Buildo abbiamo un’ampia esperienza nel portare i progetti dal concept iniziale fino alla consegna.
Dopo anni di utilizzo di design system di terze parti, abbiamo deciso di sfruttare le nostre competenze e il nostro know-how per creare Bento DS.
Questo significa che lo utilizziamo come nostro design system ogni giorno e siamo stati i primi a testarlo in modo approfondito. Possiamo dire che il nostro team è il nostro primo e più esigente cliente!
Crediamo fermamente che un design system possa avere successo solo se sviluppato da chi lo utilizza quotidianamente.
Questo sviluppo interno ci ha permesso di ottenere un notevole incremento sia nella velocità di sviluppo sia nella qualità dei progetti.
Siamo impegnati a continuare a migliorare Bento DS, assicurandoci che soddisfi le esigenze in evoluzione di Buildo e dei nostri clienti. La roadmap per il futuro di Bento è ricca di aggiornamenti e nuove funzionalità in arrivo nei prossimi mesi. Lavoriamo costantemente per mantenere e perfezionare il sistema, e siamo sempre aperti al feedback degli utenti.
Che tu sia uno sviluppatore esperto o un imprenditore che desidera migliorare i processi di design e sviluppo, Bento DS offre strumenti e funzionalità potenti, in continua evoluzione.
Sul mercato esistono altri design system generici, ma la sfida — e il nostro valore aggiunto — è creare un forte legame tra design e sviluppo. Altri sistemi sono solo parzialmente allineati, con metodologie di layout differenti e token esposti leggermente diversi.
Noi colmiamo questo divario concentrandoci sulle tecnologie web Figma e React, allineandole il più possibile e utilizzando gli stessi metodi di design. Dove l’allineamento non è possibile, interveniamo con la documentazione. Investiamo in R&D per automatizzare questi processi e fornire la migliore guida possibile ai team che utilizzano il nostro sistema.
In termini di personalizzazione, crediamo nel dare agli utenti un alto grado di flessibilità pur mantenendo un set coerente di scelte funzionali. Ad esempio, quando si utilizzano i componenti React, non permettiamo l’aggiunta di classi arbitrarie. Può sembrare una limitazione, ma in realtà serve a garantire alta qualità ed evitare che gli utenti rompano involontariamente pattern progettati con cura. Imponendo questi vincoli riduciamo il carico di lavoro e i rischi potenziali legati alla personalizzazione del sistema. Quindi, anche se esistono alcune regole in più, il nostro approccio rende il processo più snello ed efficiente, permettendo agli utenti di sfruttare al meglio Bento DS.
Il cambiamento principale riguarda la prospettiva: con Bento DS, il processo è design-first. Allineando design e sviluppo, ciò che il designer crea esiste già e può essere implementato direttamente dal lato sviluppo.
Tutto è standardizzato all’interno di Bento DS, e questo dà al designer piena libertà creativa, con la certezza che il suo lavoro sarà implementabile dagli sviluppatori.
In pratica, quando il design arriva, lo sviluppatore assembla i componenti senza doverli costruire da zero o cercare di imitarli con ciò che ha a disposizione.
Gli strumenti dello sviluppatore sono potenti perché corrispondono 1:1 a ciò che è stato progettato.
Quando emergono difetti, non spetta al singolo sviluppatore risolverli con soluzioni temporanee: il problema viene segnalato al team del design system, che si occupa di individuare la strategia migliore, centralizzando la correzione all’interno del DS o creando soluzioni personalizzate. In questo modo il problema viene gestito a livello centrale, e le criticità del DS non ricadono sui team di progetto locali, né sugli sviluppatori né sui designer.
Quando si lavora su prodotti o settori specifici, è inevitabile dover progettare componenti UI particolari. In questi casi il design system è estensibile: sia sviluppatori che designer possono creare componenti aggiuntivi. Con il DS puoi creare il componente personalizzato, ma questo seguirà le stesse regole del resto di Bento DS, come se ne facesse parte fin dall’inizio.
Tutti i componenti si basano su token esposti, così il sistema può essere esteso preservandone la coerenza interna e la semantica.
In questo modo i nuovi componenti si integrano perfettamente con quelli preesistenti, rispettando le linee guida e permettendo di discutere su aspetti specifici piuttosto che sull’aspetto complessivo. Così si può concentrare l’attenzione sulle parti più rilevanti del progetto e investire le risorse dove servono di più, avendo la libertà di ragionare a livello funzionale.
Il designer lavora con un file Figma che contiene una libreria di simboli e le tecniche per crearli, oltre alla documentazione sui pattern di utilizzo.
Il compito principale consiste nel personalizzare l’identità visiva del progetto, aggiungendo documentazione al sito e configurando i token su Figma.
Questo include la personalizzazione di colori, tipografia e di ogni singolo componente.
La base viene applicata automaticamente dal tema a tutti i componenti, ma i dettagli più specifici possono essere modificati regolando i parametri.
Una volta completato, il design viene esportato e reso disponibile agli sviluppatori tramite un plugin specifico di Bento DS.
La UI viene costruita seguendo lo stesso approccio dello sviluppo, con le stesse dipendenze, permettendo un flusso di lavoro parallelo e un ciclo di vita condiviso tra design e sviluppo all’interno dello stesso progetto.
Per utilizzare Bento DS, lo sviluppatore installa un pacchetto npm, operazione più semplice rispetto a Figma grazie a strumenti di astrazione più avanzati per lo sviluppo. Il pacchetto è uguale per tutti, ma la configurazione può essere personalizzata seguendo la documentazione disponibile sul sito. Esiste anche un pacchetto aggiuntivo che si integra con Figma, legge la configurazione e la scrive in un file versionabile.
Ogni team può decidere quando e come eseguire questa operazione, ma non è prevista alcuna personalizzazione manuale.
Dopo aver configurato Bento DS, è necessario separare i moduli del DS da quelli dell’applicazione. Il modulo del design system riesporta tutti i componenti, mentre l’applicazione importa il DS con eventuali componenti personalizzati e li utilizza secondo necessità.
La documentazione online fornisce anche informazioni specifiche su TypeScript, per supportare livelli di personalizzazione avanzata che lo sviluppatore può decidere di attivare o meno.
Per garantire la manutenzione e il miglioramento continuo del design system è necessario un team dedicato. Questa separazione tra il team del Design System e i team che lavorano ai progetti dei clienti, unita alla centralizzazione delle responsabilità del DS, favorisce una collaborazione più efficace all’interno dell’organizzazione e traccia una linea sana tra la UI e la logica di business.
Inoltre, questa separazione permette ai designer di sollevare problematiche o preoccupazioni senza mettere eccessiva pressione sugli sviluppatori affinché realizzino un’implementazione perfettamente identica al design.
Direi che i risultati complessivi rappresentano la vera storia di successo. In tutti i progetti in cui abbiamo usato Bento DS, non è stato necessario configurare un sistema di styling o CSS nelle applicazioni finali. Gli sviluppatori che usano Bento DS possono realizzare l’intero prodotto finale utilizzando solo quei componenti, senza scrivere CSS personalizzato. Non mi era mai capitato prima: normalmente, qualsiasi DS o libreria richiede qualche intervento manuale per funzionare al meglio. Con un approccio full-stack tra design e sviluppo, questo risultato è stato garantito, e non è stato nemmeno necessario discutere quali librerie integrare. Non era proprio un argomento di conversazione. Non era il nostro obiettivo primario con il primo DS, ma è stato un risultato naturale. Impariamo dai nostri errori!
La governance è un aspetto importante quando si parla di design system. Se un’azienda decide di adottarne uno, può erroneamente considerarlo uno strumento per sviluppatori o designer, come un computer. In realtà, un design system è un approccio all’organizzazione dei sistemi e richiede l’istituzione di funzioni aziendali specifiche per gestirlo. Che si tratti di team piccoli o grandi, dovrebbe esistere un gruppo dedicato con ruoli definiti — come DS developer o DS designer — incaricato di amministrare e centralizzare il design system. Non è un prodotto che si può semplicemente acquistare e utilizzare: deve essere sostenuto da una struttura organizzativa interna.
Questo perché le problematiche legate al design system — come la gestione dei bug — devono essere documentate, affrontate e trattate come se fossero quelle di una piccola attività.
Ad esempio, io sono sviluppatore su alcuni progetti e anche sviluppatore per il team di Bento DS: creo cose diverse in contesti differenti. Non è necessario ricoprire solo uno di questi ruoli: ciò che conta è dividere con chiarezza le responsabilità e avere uno spazio definito in cui discutere ciascun insieme di problemi.
Grazie a voi!
Se ti interessano i design system o vuoi provare Bento DS,scrivici o visita il sito di Bento DS .
Gabriele is co-founder of Buildo, where he works as co-CTO. He is passionate about front-end and back-end architectures, and has long-term experience with React, TypeScript and Scala.
Ogni mese scegliamo articoli utili ma anche idee fresche e stimolanti. Proprio quello che vorremmo trovare noi in una newsletter!
