Conversor de Design Tokens
Converta design tokens entre JSON, variáveis CSS e formatos SCSS.
Sobre esta ferramenta
Design tokens são os blocos fundamentais de sistemas de design modernos—valores padronizados para cores, espaçamento, tipografia, sombras e outras propriedades visuais que as equipes reutilizam em produtos. Ao centralizar essas decisões em um único formato, as equipes mantêm a consistência visual, reduzem erros e aceleram os fluxos de trabalho de design e desenvolvimento. Quer você esteja trabalhando em um único produto ou gerenciando múltiplas plataformas, os design tokens eliminam a necessidade de rastrear manualmente cores ou medidas em diferentes partes de um código.
Este conversor facilita a alternância entre os formatos de design token mais comuns: JSON (que armazena tokens como uma estrutura simples de chave-valor), variáveis CSS (que são renderizadas nativamente em navegadores via seletores :root) e variáveis SCSS (que exigem um passo de compilação mas se integram perfeitamente com pré-processadores Sass). Basta colar seus tokens em qualquer formato e selecionar seu formato de destino—a ferramenta detecta automaticamente sua entrada e gera uma saída limpa pronta para copiar e colar em seu projeto.
Equipes usando design tokens geralmente começam com JSON como seu formato fonte, depois geram saídas específicas de plataforma: CSS para aplicativos web que precisam de suporte nativo do navegador, SCSS para projetos construídos com Sass, e JSON para ferramentas que consomem tokens de forma programática. Esta ferramenta suporta conversão bidirecional, então você pode extrair tokens de CSS ou SCSS existentes e convertê-los de volta para JSON sempre que precisar auditar ou refatorar seu design system.
Perguntas Frequentes
Implementação de Código
# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
lines = [f" --{k}: {v};" for k, v in tokens.items()]
return ":root {\n" + "\n".join(lines) + "\n}"
# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
return "\n".join(f"${k}: {v};" for k, v in tokens.items())
tokens = {
"color-primary": "#6366f1",
"spacing-4": "16px",
"border-radius": "8px"
}
print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.