Design Tokens coleta todas as variáveis CSS, cores, pilhas de fontes, raios e sombras que uma página usa, classifica-os em tokens básicos, modos de tema e escopos de componentes e baixa-os como design-token W3C JSON para Figma ou como um arquivo CSS.
Um sistema de design raramente é escrito tão completamente quanto é implementado. A paleta real, a escala de espaçamento e a rampa de tipo vivem em folhas de estilo – espalhadas por propriedades personalizadas, substituições de tema e valores codificados – e reconstruí-los manualmente a partir do DevTools significa clicar em centenas de regras e copiar valores um de cada vez.
Esta ferramenta lê todos eles de uma vez. Ele percorre todas as folhas de estilo da página, incluindo aquelas de origem cruzada que a própria página não tem permissão para inspecionar, e coleta todas as propriedades personalizadas, além de variáveis definidas em tempo de execução em estilos embutidos. Variáveis em:root tornam-se tokens base; os mesmos nomes redefinidos em um seletor de tema como.dark, [data-theme="dark"] ou prefers-color-scheme tornam-se modos separados; variáveis definidas em componentes individuais são listadas como escopo. Cada valor é resolvido através de sua cadeia var(), então você vê a cor que realmente é renderizada, não apenas uma referência a outra variável.
Cada token é classificado a partir de seu valor e nome - cor, família de fonte, tamanho da fonte, peso, altura da linha, espaçamento, raio, sombra, gradiente, duração, atenuação ou índice z - e as cores são normalizadas para hexadecimal, incluindo os formatos somente de canal Tailwind e shadcn usam ( 222 47% 11%) e os trigêmeos -rgb do Bootstrap. Juntamente com as variáveis declaradas, a ferramenta faz amostras de elementos renderizados para relatar as cores, pilhas de fontes, tamanhos, raios e sombras que são realmente usados, com contagens de uso — exatamente o que você precisa em um site que nunca adotou variáveis.
A exportação leva um clique. Download tokens JSON salva o formato W3C Design Tokens ( $value e $type), que o plugin Tokens Studio importa para Figma e Style Dictionary transforma em código para qualquer plataforma; os modos temáticos e os valores observados são mantidos em seus próprios grupos, para que nada se confunda. Download CSS grava as variáveis como uma folha de estilo, com cada modo sob seu seletor original.
Propriedades personalizadas de cada folha de estilo, incluindo folhas de origem cruzada que a página não pode ler, além de variáveis definidas em tempo de execução em estilos embutidos.
Substituições em.dark, [data-theme] ou prefers-color-scheme tornam-se modos separados, mostrados lado a lado com o valor base.
Cada cadeia var() é resolvida e cada token é digitado como cor, fonte, tamanho, espaçamento, raio, sombra, duração, atenuação ou índice z.
Hex, rgb, hsl, oklch, cores nomeadas e os valores somente de canal que Tailwind, shadcn e Bootstrap usam, todos normalizados para hexadecimal.
Cores, pilhas de fontes, tamanhos, pesos, raios e sombras amostrados de elementos renderizados, com a frequência com que cada um aparece.
JSON design-token W3C para Tokens Studio e Style Dictionary ou um arquivo CSS com todos os modos em seu seletor original.
Importe a paleta, tipo e espaçamento reais para o Tokens Studio em vez de escolher cores nas capturas de tela.
Veja quantas cores e tamanhos de fonte um site realmente usa e quais valores ignoram os tokens que ele define.
Compare cada variável que o modo escuro substitui com seu valor claro, lado a lado, e identifique aquelas que nunca foram substituídas.
Exporte os tokens uma vez e alimente-os no Style Dictionary ou em uma configuração Tailwind em vez de copiar os valores manualmente.
Coloque o sistema de cores, a escala de tipo e os raios de um site que você admira em um arquivo no qual você possa trabalhar.
Clique no ícone Design Tokens no dock do DevSuite Pro. A extração é executada imediatamente e o resumo conta variáveis, modos, cores e pilhas de fontes.
A guia Cores mostra cada token de cor como uma amostra, dividida para mostrar cada modo de tema, seguido pelas cores que a página renderiza, com contagens de uso.
A tipografia visualiza cada pilha de fontes e lista tamanhos, pesos, alturas de linha e regras @font-face; a última guia cobre espaçamento, raios, sombras e movimento.
A guia Variáveis lista cada propriedade customizada com seu valor criado e resolvido. Alterne entre base, cada modo de tema e variáveis com escopo de componente.
Download tokens JSON para Figma via Tokens Studio ou Download CSS para uma folha de estilo. Marque a caixa de seleção para incluir também variáveis com escopo de componente.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 74 ferramentas de desenvolvedor para seu navegador.
