Cosa sono i design token

I design token sono variabili denominate che memorizzano decisioni progettuali, come colori, spaziatura, tipografia e ombre, in un formato indipendente dalla tecnologia. Fungono da collegamento tra gli strumenti di design e il codice, garantendo coerenza tra le piattaforme.

Senza token, i valori vengono duplicati nei codebase CSS, iOS e Android. Un'unica fonte di verità per i token consente di aggiornare contemporaneamente ogni piattaforma modificando un solo colore del brand.

Categorie comuni: colore (brand, semantico, neutro), tipografia (font-family, dimensione, peso, altezza della riga), spaziatura (griglia da 4px), raggio, ombra e animazione (durata, easing).

I token vengono memorizzati in formato JSON, YAML o nel W3C Design Token Format. Ogni token ha un nome, un valore, un tipo e una descrizione facoltativa. Le trasformazioni li convertono in output specifici per la piattaforma.

I token globali sono valori grezzi: color-blue-500: #3b82f6. I token alias fanno riferimento semanticamente ai token globali: color-action-primary: {color-blue-500}. I componenti fanno riferimento ai token alias, non ai valori grezzi.

Le custom property CSS sono l'output naturale per i token web. Un token denominato spacing-4 diventa --spacing-4: 1rem e viene utilizzato in tutto il foglio di stile come margin: var(--spacing-4).

Il plugin Figma Tokens e Tokens Studio sincronizzano i design token tra Figma e i repository di codice. Designer e sviluppatori condividono lo stesso vocabolario di token, eliminando gli errori di traduzione durante il passaggio di consegne.

I token evolvono: ritiri i vecchi valori senza interrompere i consumer fornendo mapping per la migrazione. Il versionamento semantico dei pacchetti di token segnala le modifiche incompatibili ai team che li utilizzano.

Lo stesso JSON dei token genera variabili CSS per il web, costanti Swift per iOS e risorse XML per Android. Un unico file di definizione elimina le divergenze tra le piattaforme nelle decisioni di design.

Inizi con i token per colori e spaziatura. Sostituisca i valori hardcoded un file alla volta. Esegua una ricerca nel codebase dei valori esadecimali e dei valori letterali in pixel per trovare le decisioni di design ancora hardcoded.

I token alias abilitano la gestione dei temi: sostituisca il token globale a cui punta un alias e l'intero tema cambierà senza modificare il codice dei componenti. I temi chiaro, scuro e del brand derivano tutti dallo stesso livello di alias.

Qual è la differenza tra un token globale e un token alias?

I design token sono variabili denominate che codificano le decisioni di design in un formato indipendente dalla piattaforma. I token globali contengono valori grezzi, mentre i token alias ne definiscono il significato semantico. Insieme, alimentano sistemi di design coerenti, manutenibili e multipiattaforma.