Thanks Design System Framework

L’importanza del design system

I design system sono diventati una componente cruciale nella progettazione delle interfacce utente. Nel nostro lavoro utilizziamo questo strumento per i suoi notevoli vantaggi:

• Coerenza visiva e funzionale
• Risparmio di tempo
• Facilità di manutenzione
• Migliore collaborazione tra designer e developer
• Scalabilità
• Riduzione degli errori e ottimizzazione delle risorse

L’adozione di un design system è quindi fondamentale per migliorare l’esperienza dell’utente e rappresenta un elemento essenziale per i nostri progetti.

La nostra sfida

In Thanks, nell’ultimo anno, abbiamo deciso di approfondire l’argomento design system per capire come migliorare il nostro approccio. A noi due, Alejandra e Veronica, è stato affidato il compito di portare avanti questa parte. Dal nostro lavoro di analisi sono emerse due principali elementi:

• In ogni progetto abbiamo individuato una serie di attività ricorrenti time-consuming nella fase di progettazione, che sottraevano molto tempo ai designer.
• Era necessario far emergere nel team un metodo comune, sia teorico che pratico, nella progettazione del design system.

Per rispondere a queste necessità è nata l’idea di creare un framework in Figma, che fosse un punto di partenza per la realizzazione di ogni nuovo design system, garantendo la massima flessibilità grafica tra un progetto e un altro.

Definire un metodo comune

Nella definizione di un metodo comune abbiamo dovuto considerare 3 principali aspetti:

• Teorico
• Progettuale
• Tecnico

Per l’aspetto teorico abbiamo deciso di abbracciare il modello dell’Atomic Design, ideato da Brad Frost, in cui i componenti sono visti come elementi scalabili che possono diventare via via sempre più complessi.

Per la parte progettuale abbiamo definito i diversi criteri di gestione del lavoro in base ad ogni tipologia di progetto, dai più semplici ai più complessi.

Per quanto riguarda l’approccio tecnico, abbiamo creato il nostro design system framework con tutte le linee guide per la creazione di componenti e abbiamo stabilito un piano di formazione per allineare tutto il team, sia per avere lo stesso metodo di progettazione in Figma, che per utilizzare correttamente questo strumento.

Un framework su misura

Per creare il THX Design System Framework siamo partite da zero, poiché nella nostra esperienza i vari UI Kit disponibili nella community non permettono di avere grande adattabilità, talvolta hanno una gestione complessa dei componenti e presentano stili troppo definiti che possono rappresentare un ostacolo alla progettazione.

Abbiamo quindi creato i componenti in modo che fossero:

• Leggeri con pochi elementi costruttivi per evitare di appesantire i file.
• Flessibili per avere maggiore adattabilità nello specifico progetto.
• Personalizzabili per adeguarsi all’identità unica di ogni prodotto.
• Accessibili per rendere le interfacce fruibili da chiunque senza distinzioni.

Per ottenere questo risultato abbiamo sfruttato alcune delle potenzialità di Figma:

• Master components, per riuscire a modificare il contenuto e le caratteristiche di un componte con tante varianti in un colpo solo (es. buttons, input fields, controls, ecc.).
• Autolayout, per avere componenti super flessibili e adattabili.
• Variants, per riuscire a dare diverse proprietà ad un componente (es. status dei buttons).
• Variables, per una gestione rapida e avanzata di stili, spaziature e prototipi.
• Contrast, il plugin di Figma che permette di valutare il contrasto degli elementi in modo che rispettino le Regole WCAG 2.0 per l’accessibilità.

Ad ogni componente inoltre abbiamo affiancato 4 diverse linee guida:

• Definizione, ossia i casi d’uso del componente.
• Categorizzazione, ossia le varie tipologie del componente.
• Accessibilità, ossia i criteri standard per garantire questa prerogativa.
• Documentazione, ossia la gestione e la corretta nomenclatura del componente.

Attraverso una serie di iterazioni abbiamo validato il framework con tutto il team, raccogliendo e integrando di volta in volta i feedback emersi. Alla fine di questo percorso siamo arrivate a rilasciare una prima versione che il team ha iniziato ad utilizzare.

Pianificare la formazione

Un altro aspetto importante è rappresentato dalla formazione e dalla ricerca di un modo per trasmettere le competenze necessarie a tutto il team.

Per quanto riguarda la definizione di un metodo condiviso nell’utilizzo di Figma, abbiamo individuato corsi online specifici che rispecchiano il nostro approccio alla progettazione.

Relativamente al nostro framework, abbiamo organizzato un corso interno per insegnare ai nostri colleghi come utilizzarlo correttamente e sfruttarlo al massimo delle potenzialità.