Il mondo del design digitale è in continua evoluzione e, per rimanere competitivi, è essenziale mantenere la coerenza visiva su tutte le piattaforme e dispositivi. È qui che entrano in gioco i token di progettazione. Queste piccole unità di design, sebbene spesso trascurate, svolgono un ruolo essenziale nella creazione di esperienze utente armoniose ed efficaci.

Cos'è un token di progettazione?

I token di progettazione lo sono valori standardizzati che rappresentano gli elementi base di un sistema di progettazione.
Per richiamare, un sistema di progettazione è un repository che riunisce tutte le componenti di un progetto digitale. Questi permettono di progettare una logica coerente durante tutta la produzione e di guidare tutti i team coinvolti nella progettazione di un'interfaccia.
I token di progettazione possono essere utilizzati per definire colori, caratteri, dimensioni, margini, spazi bianchi e altri elementi di progettazione. Questi sono strumenti potenti che possono aiutare a migliorare il coerenza con verso la qualità design, nonché la collaborazione tra designer e sviluppatori.
Invece di usare un valore, usiamo il token. Questo permette poi di avere una sola pagina con tutti i token inseriti e di poter contare su un unica fonte.

Esempio per una pedina di un colore:

A questo livello, il design di un token è un po' come gli stili su Figma ou Schizzo (colori, caratteri, ombre, ecc.) ma con molte più possibilità e molta più flessibilità. Un token di progettazione viene spesso utilizzato per colori, dimensioni, margini, opacità, bordi, ecc.

Quindi, invece di avere:

Noi avremmo:

Il design del token ce lo consente cambiare valore al volo da “{primary}” se necessario, senza dover tornare sulle diverse righe.
Inoltre, in caso di Sistema di progettazione multimarca, questo rende possibile anche averne uno solo una ed unica pagina da modificare per cambiare lo stile.
L'ideale è avere lo stesso nome negli stili sul nostro software di progettazione per una maggiore coerenza e semplicità quando giù le mani tra progettisti e sviluppatori.
Tuttavia, l’uso dei token di progettazione come parte integrante di un sistema di progettazione è molto più di questo. Consentono inoltre a maggiore scalabilità, una migliore comunicazione tra i team e quindi un migliore processo decisionale.

I due tipi di Design Token

• Primitive token
  Le primitive del token sono valori fondamentali sistema di progettazione. Includono colori, caratteri, dimensioni dei caratteri, margini, spazi bianchi e altri elementi di progettazione. Le primitive dei token vengono solitamente archiviate in un formato dati standardizzato, ad esempio JSON, CSS ou Yamla. Ciò semplifica la condivisione e l'utilizzo da parte di designer e sviluppatori.
• Gettoni semantici
  I token semantici sono combinazioni di token primitivi che hanno un significato specifico nel sistema di progettazione. Ad esempio, un token semantico potrebbe essere un colore specifico utilizzato per un pulsante di comando o un carattere specifico utilizzato per il titolo di una pagina. I token semantici ti consentono di creare un file progettazione coerente ed omogeneae semplificare la collaborazione tra progettisti e sviluppatori.

Primitive e semantica sono due elementi essenziali di un sistema di progettazione. Loro permettono definire gli elementi fondamentali progettarli e organizzarli in modo che siano facili da trovare e utilizzare. Utilizzando i token, progettisti e sviluppatori possono creare interfacce coerenti e di alta qualità in modo più rapido e semplice.

I vantaggi dei Design Token

• coerenza
  I token di progettazione rispondono, tra le altre cose, a a problema aziendale : come garantire l'identità grafica del brand con il minimo attrito?
  In caso di modifica delle fondamenta (ad esempio un rebranding), i design token consentono di implementare rapidamente queste modifiche.
  Gli stili sono unificati in tutti i prodotti e le piattaforme.
• Riutilizzabilità
  I token di progettazione possono essere riutilizzati in uno o più prodotti, il che lo consenterisparmiare tempo e risorse in sviluppo. Gli sviluppatori recuperano i token direttamente invece di dover creare ogni volta nuovi stili.
  I token di progettazione evitano la scrittura di valori nel codice.
• manutenibilità
  I token di progettazione facilitano la manutenzione del progetto perché lo consentono aggiornamento rapido dello stile. Come ? I token sono dati che contengono un nome e un valore centralizzati.
  Modificando semplicemente il valore di un token, come ad esempio quello del colore di un pulsante principale, questo avrà effetto su tutti i pulsanti dell'applicazione/sito in un unico intervento! Gli sviluppatori possono quindi mantenere più facilmente gli stili di progetto anche quando le scelte progettuali evolvono.

I limiti dei Design Token

• Gli strumenti non sono pronti
  Poiché il formato dei token di progettazione non è scolpito nella pietra, nessuno ha ancora concordato come utilizzarli. Ogni squadra e azienda lo ha il proprio funzionamento e il proprio linguaggio. Attualmente il W3C sta attualmente lavorando su un formato che risolverebbe questo problema. Ma per il momento è opportuno accontentarsi degli strumenti a disposizione e dei loro limiti. Figma ha fatto sapere che sta lavorando su questo argomento, ma probabilmente questa funzionalità non verrà rilasciata prima della fine dell'anno.
• Un rallentamento del flusso di lavoro
  Trova un nomenclatura compresa da tutti è una vera ricerca del Santo Graal. Oltre a ciò, come ogni sistema, dovrà evolversi secondo un buon numero di parametri. A ciò si aggiunge il complessità della documentazione e tempo necessario per scriverlo. I team specializzati in Design System non sono ancora diffusi, e questo è ancora più vero per le persone dedite alla scrittura di documentazione.
  La minima modifica di una di queste primitive può generare numerosi aggiornamenti di cui bisogna tenere conto.
  Avere una panoramica del sistema è essenziale quando si implementano i token di progettazione.
  ill'implementazione è complessa e richiede un notevole sforzo dal basso, ma sono fiducioso che un simile approccio sia di gran lunga superato dai benefici esponenziali che può portare.

Conclusione

I token di progettazione sono entità con un nome e una nomenclatura specifici che memorizzano dati indivisibili (come spaziatura o colore per esempio). Sono tutti valori necessari per la realizzazione e la manutenzione dell’impianto. Utilizziamo questi valori anziché "codificarli" nel codice per garantire il massimo flessibilità, omogeneità e tanta tanta scalabilità attraverso i diversi prodotti ed esperienze... Sono anche agnostici e dovrebbero funzionare su qualsiasi piattaforma.
Ma soprattutto rappresentano una metodologia e non solo “variabili”. Consentono a qualsiasi sistema di progettazione di crescere su tutte le piattaforme, dispositivi e prodotti che un marchio può avere. La parte variabile è solo una goccia nell’oceano.

togliere

• I token di progettazione non solo memorizzano informazioni, ma trasmettono anche informazioni.
• Si usano per indicare il valori primitivi, ma il loro vero potenziale si rivela quando vengono utilizzati Documentazione dei componenti dell'interfaccia utente.
• Sono simili ad a metodologia e un modo per costruire un sistema complesso.

Risorse per andare oltre

• Token nei sistemi di progettazione: 10 suggerimenti per progettare e implementare decisioni di progettazione per tutti: Da leggere qui 
• Token di progettazione oltre i colori, la tipografia e la spaziatura: Da leggere qui

 

 

 

Alexandre Caillé, responsabile dell'interfaccia utente e del sistema di progettazione presso UX-Republic