Design Tokens recopila cada variable CSS, color, pila de fuentes, radio y sombra que utiliza una página, los clasifica en tokens base, modos de tema y alcances de componentes, y los descarga como design-token JSON W3C para Figma o como un archivo CSS.
Un sistema de diseño rara vez se escribe tan completamente como se implementa. La paleta real, la escala de espaciado y la rampa de tipo se encuentran en hojas de estilo (distribuidas en propiedades personalizadas, anulaciones de temas y valores codificados) y reconstruirlas a mano desde DevTools significa hacer clic en cientos de reglas y copiar valores uno a la vez.
Esta herramienta los lee todos a la vez. Recorre todas las hojas de estilo de la página, incluidas las de origen cruzado que la propia página no puede inspeccionar, y recopila todas las propiedades personalizadas, además de las variables configuradas en tiempo de ejecución en estilos en línea. Las variables en:root se convierten en tokens base; los mismos nombres redefinidos bajo un selector de temas como.dark, [data-theme="dark"] o prefers-color-scheme se convierten en modos separados; las variables definidas en componentes individuales se enumeran como de alcance. Cada valor se resuelve a través de su cadena var(), por lo que ves el color que realmente se representa, no solo una referencia a otra variable.
Cada token se clasifica a partir de su valor y nombre (color, familia de fuentes, tamaño de fuente, peso, altura de línea, espaciado, radio, sombra, gradiente, duración, suavización o índice z) y los colores se normalizan a hexadecimal, incluidos los formatos de solo canal Tailwind y shadcn usan ( 222 47% 11%) y los tripletes -rgb de Bootstrap. Además de las variables declaradas, la herramienta muestra elementos renderizados para informar los colores, pilas de fuentes, tamaños, radios y sombras que realmente se usan, con recuentos de uso, exactamente lo que necesita en un sitio que nunca adoptó variables en absoluto.
Exportar requiere un clic. Download tokens JSON guarda el formato Design Tokens W3C ( $value y $type), que el complemento Tokens Studio importa en Figma y Style Dictionary lo convierte en código para cualquier plataforma; Los modos temáticos y los valores observados se mantienen en sus propios grupos, para que nada se mezcle. Download CSS vuelve a escribir las variables como una hoja de estilo, con cada modo bajo su selector original.
Propiedades personalizadas de cada hoja de estilo, incluidas hojas de orígenes cruzados que la página no puede leer, además de variables configuradas en tiempo de ejecución en estilos en línea.
Las anulaciones en.dark, [data-theme] o prefers-color-scheme se convierten en modos separados, que se muestran al lado del valor base.
Cada cadena var() se resuelve y cada token se escribe como color, fuente, tamaño, espaciado, radio, sombra, duración, suavización o índice z.
Hex, rgb, hsl, oklch, colores con nombre y los valores de solo canal que usan Tailwind, shadcn y Bootstrap, todos normalizados a hexadecimal.
Colores, pilas de fuentes, tamaños, pesos, radios y sombras muestreados de elementos renderizados, con la frecuencia con la que aparece cada uno.
JSON design-token W3C para Tokens Studio y Style Dictionary, o un archivo CSS con cada modo en su selector original.
Importe la paleta, el tipo y el espaciado reales a Tokens Studio en lugar de elegir colores de las capturas de pantalla.
Vea cuántos colores y tamaños de fuente utiliza realmente un sitio y qué valores omiten los tokens que define.
Compare cada variable que el modo oscuro anula con su valor claro, una al lado de la otra, y detecte las que nunca fueron anuladas.
Exporte los tokens una vez y envíelos al Style Dictionary o a una configuración Tailwind en lugar de copiar los valores a mano.
Incorpora el sistema de color, la escala de tipos y los radios de un sitio que admiras en un archivo con el que puedas trabajar.
Haga clic en el icono Design Tokens en el Dock DevSuite Pro. La extracción se ejecuta de inmediato y el resumen cuenta variables, modos, colores y pilas de fuentes.
La pestaña Colores muestra cada token de color como una muestra, dividida para mostrar cada modo de tema, seguida de los colores que muestra la página, con recuentos de uso.
Tipografía muestra una vista previa de cada pila de fuentes y enumera tamaños, pesos, alturas de línea y reglas @font-face; la última pestaña cubre espaciado, radios, sombras y movimiento.
La pestaña Variables enumera cada propiedad personalizada con su valor creado y resuelto. Cambie entre la base, cada modo de tema y las variables con alcance de componente.
Download tokens JSON para Figma a través de Tokens Studio o Download CSS para obtener una hoja de estilo. Marque la casilla de verificación para incluir también variables con ámbito de componente.
Instala DevSuite Pro gratis y desbloquea más de 74 herramientas de desarrollador para tu navegador.
