Design Tokens raccoglie ogni variabile CSS, colore, stack di caratteri, raggio e ombra utilizzati da una pagina, li ordina in tokens di base, modalità tema e ambiti dei componenti e li scarica come design-token W3C JSON per Figma o come file CSS.
Un sistema di progettazione raramente viene scritto così completamente come viene implementato. La tavolozza reale, la scala di spaziatura e la rampa di tipo si trovano nei fogli di stile, distribuiti tra proprietà personalizzate, sostituzioni di temi e valori codificati, e ricostruirli manualmente da DevTools significa fare clic su centinaia di regole e copiare i valori uno alla volta.
Questo strumento li legge tutti in una volta. Percorre ogni foglio di stile della pagina, compresi quelli multiorigine che la pagina stessa non è autorizzata a ispezionare, e raccoglie ogni proprietà personalizzata, oltre alle variabili impostate in fase di runtime negli stili in linea. Le variabili su:root diventano tokens di base; gli stessi nomi ridefiniti in un selettore di temi come.dark, [data-theme="dark"] o prefers-color-scheme diventano modalità separate; le variabili definite sui singoli componenti sono elencate come con ambito. Ogni valore viene risolto tramite la sua catena var(), quindi vedi il colore effettivamente visualizzato, non solo un riferimento a un'altra variabile.
Ogni token è classificato in base al suo valore e nome - colore, famiglia di caratteri, dimensione del carattere, peso, altezza della linea, spaziatura, raggio, ombra, gradiente, durata, andamento o z-index - e i colori sono normalizzati in esadecimale, inclusi i formati solo canale utilizzati da Tailwind e shadcn ( 222 47% 11%) e le triplette -rgb di Bootstrap. Oltre alle variabili dichiarate, lo strumento campiona gli elementi renderizzati per riportare i colori, gli stack di caratteri, le dimensioni, i raggi e le ombre effettivamente utilizzati, con i conteggi di utilizzo: esattamente ciò di cui hai bisogno su un sito che non ha mai adottato variabili.
L'esportazione richiede un clic. Download tokens JSON salva il formato W3C Design Tokens ( $value e $type), che il plugin Tokens Studio importa in Figma e Style Dictionary trasforma in codice per qualsiasi piattaforma; le modalità tematiche e i valori osservati vengono mantenuti nei rispettivi gruppi, quindi nulla viene confuso. Download CSS riscrive le variabili come foglio di stile, con ciascuna modalità sotto il suo selettore originale.
Proprietà personalizzate da ogni foglio di stile, inclusi i fogli multiorigine che la pagina non può leggere, oltre alle variabili impostate in fase di esecuzione negli stili in linea.
Le sostituzioni in.dark, [data-theme] o prefers-color-scheme diventano modalità separate, mostrate fianco a fianco con il valore di base.
Ogni catena var() viene risolta e ogni token viene digitato come colore, carattere, dimensione, spaziatura, raggio, ombra, durata, andamento o z-index.
Hex, rgb, hsl, oklch, colori con nome e valori solo canale utilizzati da Tailwind, shadcn e Bootstrap, tutti normalizzati in esadecimale.
Colori, pile di caratteri, dimensioni, pesi, raggi e ombre campionati da elementi renderizzati, con la frequenza con cui ciascuno appare.
JSON design-token W3C per Tokens Studio e Style Dictionary o un file CSS con tutte le modalità nel relativo selettore originale.
Importa la tavolozza, il tipo e la spaziatura reali in Tokens Studio invece di scegliere i colori dagli screenshot.
Scopri quanti colori e dimensioni dei caratteri utilizza effettivamente un sito e quali valori ignorano i tokens che definisce.
Confronta ogni variabile che la modalità oscura sovrascrive con il suo valore di luce, fianco a fianco, e individua quelle che non sono mai state sovrascritte.
Esporta i tokens una volta e inseriscili nel Style Dictionary o in una configurazione Tailwind invece di copiare i valori manualmente.
Inserisci il sistema di colori, la scala del tipo e i raggi di un sito che ammiri in un file su cui puoi lavorare.
Fai clic sull'icona Design Tokens nel dock DevSuite Pro. L'estrazione viene eseguita immediatamente e il riepilogo conta variabili, modalità, colori e stack di caratteri.
La scheda Colori mostra ogni token di colore come un campione, diviso per mostrare ciascuna modalità del tema, seguito dai colori renderizzati dalla pagina, con i conteggi di utilizzo.
La tipografia visualizza in anteprima ogni stack di caratteri ed elenca dimensioni, pesi, altezze di linea e regole @font-face; l'ultima scheda copre spaziatura, raggi, ombre e movimento.
La scheda Variabili elenca ogni proprietà personalizzata con il relativo valore creato e risolto. Passa dalla base alla modalità di ciascun tema e alle variabili con ambito componente.
Download tokens JSON per Figma tramite Tokens Studio o Download CSS per un foglio di stile. Seleziona la casella di controllo per includere anche le variabili con ambito componente.
Installa DevSuite Pro gratuitamente e sblocca più di 74 strumenti per sviluppatori per il tuo browser.
