Strumenti per i token: Style Dictionary

Style Dictionary è uno strumento di build open source di Amazon che trasforma una sorgente JSON di token in output per diverse piattaforme: proprietà personalizzate CSS, variabili SCSS, costanti Swift per iOS, XML per Android e moduli JavaScript/TypeScript, tutto a partire da un'unica fonte di verità.

Organizzi i token nella directory tokens/ come file JSON o JSON5. Style Dictionary unisce automaticamente tutti i file. Separi i file per categoria: tokens/color.json, tokens/spacing.json, tokens/typography.json.

Ogni token è un oggetto annidato con una chiave value e i campi facoltativi type, description e comment. Style Dictionary appiattisce la struttura annidata trasformandola in nomi con notazione a punti nell'output.

Il file config.json specifica le origini (i file dei token), le piattaforme (web, ios, android) e le trasformazioni o i formati per ogni piattaforma. Ogni piattaforma può applicare trasformazioni diverse e produrre file in formati differenti.

Le trasformazioni modificano i valori dei token durante la build: color/css formatta i colori come valori esadecimali, size/rem converte i px in rem e name/cti/kebab genera nomi in kebab-case dalla struttura annidata categoria-tipo-elemento.

I formati determinano il contenuto dei file di output. Tra quelli integrati: css/variables produce un blocco CSS :root, scss/variables produce variabili SASS e javascript/module esporta un oggetto JS. I formati personalizzati consentono di generare qualsiasi struttura di output necessaria.

Faccia riferimento ad altri token usando la sintassi con parentesi graffe: {"value": "{color.brand.primary}"}. Style Dictionary risolve i riferimenti durante la build, producendo valori concreti nell'output. I riferimenti creano la mappatura tra alias e token globali.

Registri trasformazioni personalizzate per gestire esigenze specifiche del progetto: rimuovere il canale alpha dai colori, convertire i valori di opacità degli strumenti di design e aggiungere prefissi dei vendor. Le trasformazioni personalizzate si inseriscono nella pipeline di build come quelle integrate.

Esegua npx style-dictionary build oppure aggiunga il comando allo script di build di npm. I file di output vengono inseriti nelle directory buildPath configurate. Può eseguire il commit dei file generati oppure generarli durante la build in CI: entrambi gli approcci sono comuni.

Tokens Studio for Figma sincronizza il JSON dei token con un repository GitHub. Style Dictionary viene eseguito in CI quando il JSON cambia e genera automaticamente i file CSS e quelli per le altre piattaforme. Le modifiche al design arrivano nel codice senza dover copiare e incollare manualmente.

Versioni il pacchetto dei token in npm. Chi lo utilizza fissa una versione e decide consapevolmente quando aggiornarla. I changelog documentano i token aggiunti, deprecati e rimossi. Il versionamento semantico comunica le modifiche incompatibili rispetto agli aggiornamenti sicuri.

Style Dictionary trasforma un'unica sorgente JSON di token in output specifici per ogni piattaforma tramite trasformazioni e formati configurabili. Consente la sincronizzazione dei token da Figma al codice, la coerenza tra più piattaforme e pacchetti di token versionati che i team possono utilizzare e aggiornare consapevolmente.