O que são tokens de design

Tokens de design são variáveis nomeadas que armazenam decisões de design — cores, espaçamento, tipografia e sombras — em um formato independente de tecnologia. Eles fazem a ponte entre ferramentas de design e código, garantindo consistência entre plataformas.

Sem tokens, os valores são duplicados nas bases de código de CSS, iOS e Android. Uma única fonte de verdade para os tokens significa que alterar a cor da marca atualiza todas as plataformas simultaneamente.

Categorias comuns: cor (marca, semântica, neutra), tipografia (família da fonte, tamanho, peso, altura da linha), espaçamento (grade de 4px), raio, sombra e animação (duração, suavização).

Os tokens são armazenados como JSON, YAML ou no Formato de Tokens de Design do W3C. Cada token tem um nome, valor, tipo e descrição opcional. As transformações convertem-nos em saídas específicas para cada plataforma.

Tokens globais são valores brutos: color-blue-500: #3b82f6. Tokens de alias fazem referência aos tokens globais de forma semântica: color-action-primary: {color-blue-500}. Os componentes fazem referência a tokens de alias, não a valores brutos.

As propriedades personalizadas de CSS são a saída natural para tokens da web. Um token chamado spacing-4 torna-se --spacing-4: 1rem e é usado em toda a folha de estilos como margin: var(--spacing-4).

O plugin Figma Tokens e o Tokens Studio sincronizam tokens de design entre o Figma e os repositórios de código. Designers e desenvolvedores compartilham o mesmo vocabulário de tokens, eliminando erros de tradução na transferência.

Os tokens evoluem: descontinue valores antigos sem interromper os consumidores, fornecendo mapeamentos de migração. O versionamento semântico dos pacotes de tokens sinaliza alterações incompatíveis para as equipes consumidoras.

O mesmo JSON de tokens gera variáveis CSS para a web, constantes Swift para iOS e recursos XML para Android. Um único arquivo de definição elimina a divergência entre plataformas nas decisões de design.

Comece com tokens de cor e espaçamento. Substitua os valores codificados diretamente, um arquivo por vez. Faça uma pesquisa na base de código por valores hexadecimais brutos e literais de pixels para encontrar as decisões de design ainda codificadas diretamente.

Os tokens de alias permitem criar temas: altere o token global para o qual um alias aponta e o tema inteiro será alterado sem tocar no código dos componentes. Os temas claro, escuro e da marca derivam todos da mesma camada de alias.

Tokens de design são variáveis nomeadas que codificam decisões de design em um formato independente de plataforma. Tokens globais contêm valores brutos; tokens de alias fornecem significado semântico. Juntos, eles possibilitam sistemas de design consistentes, fáceis de manter e multiplataforma.