O que é um token de design?

Um token de design é um valor nomeado que guarda uma única decisão de design, como uma cor, um passo de espaçamento ou um tamanho de fonte, para que essa decisão possa ser reutilizada nas ferramentas de design e no código em vez de ser escrita à mão em cada lugar.

Por que dar nome a um valor

Pense na cor usada pelos botões principais. Escrita diretamente, ela aparece como #2563EB numa folha de estilos, como um campo hexadecimal num preenchimento do Figma e como uma string no que alguém digitou semana passada. Três cópias, sem nenhuma relação entre si.

Como token, ela aparece uma única vez, sob um nome:

--color-action-primary: #2563EB;

Todo o resto se refere ao nome. Você muda o valor uma vez e todos os usos mudam junto. Essa indireção é a ideia inteira, e todo o resto sobre tokens decorre dela.

O que os tokens costumam cobrir

  • Cor: paletas, escalas e papéis semânticos como fundo, borda, texto e estados
  • Tipografia: famílias, tamanhos, pesos, entrelinha, espaçamento entre letras
  • Espaçamento: uma escala consistente, normalmente sobre uma base de 4px ou 8px
  • Raio e espessura de borda
  • Sombra e elevação
  • Movimento: durações e curvas de aceleração
  • Breakpoints e dimensões de layout

Tokens não são variáveis

A distinção importa. Uma variável CSS é um mecanismo. Um token de design é uma decisão que por acaso se expressa através de um.

A diferença prática é a portabilidade. Um token existe independentemente de qualquer tecnologia, e é por isso que o mesmo conjunto pode ser emitido como propriedades personalizadas de CSS, configuração do Tailwind, variáveis do Figma, Swift ou Kotlin. Se ele só existe como uma linha de CSS, é uma variável.

Formatos

O Design Tokens Community Group, dentro do W3C, publica um formato JSON pensado como troca comum entre ferramentas. Ele dá a cada token um $value e um $type:

{
  "color": {
    "action": {
      "primary": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

A adoção é desigual, mas cresce, e é o mais próximo de um formato neutro de intercâmbio entre ferramentas de design e pipelines de build.

Onde o Flash DSM entra

O Flash DSM gera um conjunto completo de tokens a partir de um prompt, da URL de um site, de um arquivo do Figma ou de uma captura de tela, e depois o exporta como propriedades personalizadas de CSS, configuração do Tailwind, Tokens Studio JSON ou variáveis do Figma.