O que são design tokens?
Design tokens são as decisões atômicas que definem um sistema visual, como cores, espaçamento, tipografia, raios de borda e muito mais. Armazenados como JSON estruturado, eles funcionam como uma única fonte de verdade entre ferramentas de design, como o Figma, e o código. Este conversor transforma o JSON dos tokens em variáveis CSS, variáveis SCSS, configuração do Tailwind CSS ou exports JavaScript prontos para uso.
Como converter design tokens
- 1Cole o JSON dos seus design tokens. Os tokens devem ter uma propriedade value, em uma estrutura aninhada cujos nós folha contenham uma chave chamada value com o valor do token.
- 2Selecione o formato de saída: CSS, SCSS, Tailwind ou JS.
- 3Para a saída CSS, personalize o prefixo das variáveis; o padrão é --.
- 4Use Copy para copiar a saída gerada para o seu projeto.
Casos de uso comuns
Handoff de design para código
Converta exports de tokens do Figma diretamente em variáveis CSS para usar nas suas folhas de estilo.
Configuração de tema do Tailwind
Gere a configuração de tema do Tailwind CSS a partir dos tokens do seu design system.
Tokens multiplataforma
Exporte tokens em diferentes formatos para a web, com CSS ou SCSS, e para soluções de estilização baseadas em JavaScript.
Perguntas frequentes
Qual formato JSON é esperado?
A ferramenta espera um objeto JSON aninhado cujos nós folha tenham uma propriedade value. Esse formato é compatível com Figma Tokens, Style Dictionary e a maioria dos formatos de design tokens.
Há suporte a referências ou aliases?
Atualmente, a ferramenta trabalha com valores já resolvidos. Referências de tokens entre chaves, como color.primary.500 envolvida por chaves, não são resolvidas automaticamente.
Posso usar a ferramenta com o Tokens Studio for Figma?
Sim. Exporte seus tokens como JSON no Tokens Studio e cole-os aqui. A estrutura aninhada com propriedades value é totalmente compatível.
Os design tokens são enviados para algum servidor?
Não. A conversão dos tokens acontece localmente no navegador.