FERRAMENTA

Design system

O fim da fase. Conta os valores soltos do CSS que já existe, junta paleta, tipografia e escala com as decisões que faltam — raio, sombra, movimento e modo escuro — e entrega os tokens em três camadas, os componentes com todos os estados e o JSON que plugins de tokens do Figma importam.

1 · Inventário — o que já existe

Cole um CSS do site antigo do cliente, do seu rascunho ou do concorrente — fica só neste navegador

2 · O que vem das outras ferramentas

3 · As decisões que faltam

Raio dos cantos

Forma do botão

Sombra

Duração das transições resposta ao gesto: até 250ms

gerar o modo escuro

4 · Os componentes, com os tokens

Bar de drinks · Campo Grande MS

Coquetelaria autoral para o seu casamento

Texto de corpo na cor de texto, sobre o fundo, com um link no meio da frase. E uma linha de apoio no texto fraco.

Nome

Data do eventoEssa data não existe

Casamento

Pacote completo

Estrutura, equipe e drinks assinados.

5 · A saída

tokens.css · primitivo → semântico → componente

componentes.css · com todos os estados

tokens.json · formato DTCG, para o Figma

Para levar ao Figma: o JSON segue o formato do Design Tokens Community Group do W3C — cada token com $type e $value, alias entre chaves. Plugins de tokens, como o Tokens Studio, importam cada grupo como um conjunto: semantico-claro e semantico-escuro viram os dois temas. O raciocínio das camadas está em Tokens em três camadas, e o dos estados em Do átomo à página.