# Design Tokens

Explore 5 ferramentas de Design Tokens para processar, converter, validar e gerenciar dados de design tokens no navegador.

> Página canônica: https://elysiatools.com/pt/tags/design-tokens

## Visão geral

Use 5 ferramentas de Design Tokens para trabalhar com dados de design tokens em diferentes operações, como processamento, conversão, validação e gerenciamento, sem instalar software.

## Perguntas frequentes

### O que posso fazer com as ferramentas de Design Tokens?

Você pode processar, converter, validar e gerenciar arquivos e dados de design tokens por meio de uma interface no navegador.

### Preciso instalar algum software?

Não. As ferramentas são acessadas pelo navegador, sem necessidade de instalar software.

### Como meus dados são tratados?

Você opera as ferramentas no navegador, mas o processamento ocorre nos servidores da Elysia Tools. Textos não são armazenados e arquivos enviados são excluídos automaticamente após 6 horas.

## Ferramentas

- [Extrator de tokens de tema ECharts](https://elysiatools.com/pt/tools/echarts-theme-token-extractor): Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão.
- [Exportador de Tokens Figma](https://elysiatools.com/pt/tools/figma-tokens-export): Cole um JSON de variáveis Figma / Tokens Studio e exporte para Tailwind, variáveis CSS shadcn, Style Dictionary ou SCSS. Preserva tokens de cor, espaçamento e fonte com inferência de tipo.
- [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons
- [Classes Tailwind para CSS](https://elysiatools.com/pt/tools/tailwind-class-to-css-converter): Converte classes Tailwind (ex. p-4 flex gap-2 hover:bg-blue-500/20 md:p-6) em CSS equivalente e copiável para projetos sem Tailwind. Cobre spacing, flex, grid, cores, tipografia, bordas, efeitos, transformações, transições e variantes responsivas/estado.
- [Sincronizador de paleta Tailwind](https://elysiatools.com/pt/tools/tailwind-color-palette-sync): Insira HEX, escolha o esquema de nomes (escala 50–950 / nome único / aninhamento) e gere o fragmento theme.extend.colors do tailwind.config.ts com níveis WCAG AA/AAA. Dark mode opcional.

## Conteúdo relacionado

- [CSS](https://elysiatools.com/pt/tags/css): Explore 48 ferramentas de CSS online para trabalhar com arquivos e código CSS no navegador, com processamento em servidores e exclusão de arquivos após 6 horas.
- [HTML/CSS](https://elysiatools.com/pt/tags/html): Explore 86 ferramentas de HTML/CSS e DOM para processar, converter e validar dados no navegador. Textos não são armazenados e arquivos enviados são apagados após 6 horas.
- [Cor](https://elysiatools.com/pt/tags/color): Explore 214 ferramentas de cor para trabalhar com valores HEX, RGB, HSL e paletas diretamente no navegador.
- [Variáveis CSS](https://elysiatools.com/pt/tags/css-variables): Explore 8 ferramentas de Variáveis CSS online para trabalhar com variáveis CSS no navegador, com processamento nos servidores e exclusão de arquivos após 6 horas.
- [Design System](https://elysiatools.com/pt/tags/design-system): Explore 7 ferramentas de Design System online para apoiar seus fluxos de trabalho diretamente no navegador, com processamento em servidores Elysia Tools.
- [Paleta de cores](https://elysiatools.com/pt/tags/color-palette): Explore 10 ferramentas de paleta de cores online para trabalhar com combinações e dados de cores no navegador.