Design Tokens recull cada variable CSS, color, pila de tipus de lletra, radi i ombra que utilitza una pàgina, els ordena en tokens base, modes temàtics i àmbits de components, i els descarrega com a design-token W3C JSON per Figma o com a fitxer CSS.
Un sistema de disseny rarament s'escriu tan completament com s'implementa. La paleta real, l'escala d'espaiat i la rampa de tipus viuen en fulls d'estil, repartits entre propietats personalitzades, substitucions de temes i valors codificats, i reconstruir-los a mà des de DevTools significa fer clic a centenars de regles i copiar valors un a un.
Aquesta eina els llegeix tots alhora. Recorre tots els fulls d'estil de la pàgina, inclosos els d'origen creuat que la pàgina mateixa no pot inspeccionar, i recull totes les propietats personalitzades, a més de les variables establertes en temps d'execució en estils en línia. Les variables de:root es converteixen en tokens base; els mateixos noms redefinits sota un selector de temes com ara.dark, [data-theme="dark"] o prefers-color-scheme es converteixen en modes separats; les variables definides en components individuals s'enumeren com a abast. Cada valor es resol mitjançant la seva cadena var(), de manera que veieu el color que realment representa, no només una referència a una altra variable.
Cada token es classifica a partir del seu valor i nom: color, família de tipus de lletra, mida de lletra, pes, alçada de línia, espaiat, radi, ombra, degradat, durada, índex z i els colors es normalitzen a hexadecimal, inclosos els formats només per al canal Tailwind i shadcn use ( 222 47% 11%) i Bootstrap -rgb. A més de les variables declarades, l'eina mostra elements representats per informar dels colors, les piles de tipus de lletra, les mides, els radis i les ombres que s'utilitzen realment, amb recomptes d'ús, exactament el que necessiteu en un lloc que mai no ha adoptat variables.
L'exportació requereix un clic. Download tokens JSON desa el format W3C Design Tokens ( $value i $type), que el connector Tokens Studio importa a Figma i Style Dictionary es converteix en codi per a qualsevol plataforma; Els modes temàtics i els valors observats es mantenen en els seus propis grups, de manera que no es barregi res. Download CSS escriu les variables com un full d'estil, amb cada mode sota el seu selector original.
Propietats personalitzades de cada full d'estil, inclosos els fulls d'origen creuat que la pàgina no pot llegir, a més de variables establertes en temps d'execució en estils en línia.
Les substitucions sota.dark, [data-theme] o prefers-color-scheme es converteixen en modes separats, que es mostren al costat del valor base.
Cada cadena var() es resol, i cada token s'escriu com a color, tipus de lletra, mida, espai, radi, ombra, durada, índex de flexibilitat o z-index.
Hex, rgb, hsl, oklch, colors amb nom i els valors només del canal Tailwind, shadcn i Bootstrap use, tots normalitzats a hex.
Colors, piles de tipus de lletra, mides, pesos, radis i ombres mostrejats d'elements renderitzats, amb la freqüència amb què apareixen cadascun.
JSON design-token W3C per Tokens Studio and Style Dictionary, o un fitxer CSS amb tots els modes sota el seu selector original.
Importeu la paleta real, el tipus i l'espaiat a Tokens Studio en lloc de triar colors de les captures de pantalla.
Vegeu quants colors i mides de lletra fa servir realment un lloc i quins valors passen per alt els tokens que defineix.
Compareu totes les variables que anul·la el mode fosc amb el seu valor de llum, una al costat de l'altra, i localitzeu les que mai s'han anul·lat.
Exporteu les tokens una vegada i introduïu-les al Style Dictionary o a una configuració Tailwind en lloc de copiar els valors a mà.
Traieu el sistema de color, escriviu l'escala i els radis d'un lloc que admireu en un fitxer des del qual podeu treballar.
Feu clic a la icona Design Tokens al moll DevSuite Pro. L'extracció s'executa immediatament i el resum compta amb variables, modes, colors i piles de tipus de lletra.
La pestanya Colors mostra cada token de color com a mostra, dividit per mostrar cada mode de tema, seguit dels colors que representa la pàgina, amb el recompte d'ús.
La tipografia previsualitza cada pila de fonts i enumera les mides, els pesos, les alçades de línia i les regles @font-face; l'última pestanya cobreix l'espaiat, els radis, les ombres i el moviment.
La pestanya Variables enumera totes les propietats personalitzades amb el seu valor creat i resolt. Canvia entre la base, el mode de cada tema i les variables d'abast dels components.
Download tokens JSON per Figma mitjançant Tokens Studio o Download CSS per a un full d'estil. Marqueu la casella de selecció per incloure també variables d'abast dels components.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 74 eines de desenvolupador per al teu navegador.
