Sincronizando design e código com tokens de design

Às vezes, criar um sistema de design em uma startup acaba diminuindo a velocidade do trabalho. Isso acontece por causa do tedioso trabalho repetitivo de o desenvolvedor converter manualmente os valores alterados pelo designer em código. Automatizar esse processo é fundamental para que a equipe possa focar em questões essenciais do produto.

Unificando a linguagem de design com tokens

Não mapeie os valores da ferramenta de design para variáveis de código um por um. Ao introduzir tokens de design, esse elo de conexão se transforma em dados.

1. Tokens primitivos: definem valores brutos de cores, como blue-500.
2. Tokens semânticos: especificam o local de uso real, como action.primary.bg, e fazem referência aos tokens primitivos acima.
3. Mapeamento de variáveis CSS: salvam os tokens semânticos como variáveis CSS.

Ao configurar dessa forma, mesmo que o designer altere os valores de cor, o desenvolvedor não precisa tocar no código. O sistema atualiza automaticamente os arquivos CSS. Para a escala de fontes, defina-as matematicamente inserindo a Base e a Razão no painel de tokens do Penpot. Ao utilizar a fórmula $Size_{n} = Base \times Ratio^{n}$, a consistência do design é mantida de forma forçada.

Automação da integração entre Penpot e GitHub

É ineficiente que os desenvolvedores verifiquem manualmente as alterações de design. Como o Penpot segue o padrão de tokens de design da W3C, é possível construir um pipeline.

1. Gere uma chave de API do Penpot.
2. Crie um arquivo penpot-export.config.js na raiz do projeto. Aqui, configure os tokens a serem extraídos e o caminho de salvamento.
3. Após instalar o pacote @penpot-export/cli, execute o comando npx penpot-export.

Centenas de valores de tokens são importados para a base de código em um instante. O erro humano que ocorre na entrada manual desaparece. Serviços de grande escala como o Shopify também utilizam esse fluxo de trabalho baseado em tokens para atualizar o design instantaneamente sem modificações no código.

Compreendendo a intenção da mudança de design com revisões no Git

Não comunique as alterações de design por mensagens no Slack ou verbalmente. Gerencie-as através do Git, que é o ambiente mais familiar para desenvolvedores.

1. Escreva um arquivo .github/workflows/design-sync.yml para automatizar a extração de tokens de design.
2. Use a ação peter-evans/create-pull-request para gerar automaticamente um PR contendo as alterações.
3. Quando o PR for aberto, verifique a mensagem de commit style(tokens) e veja o diff durante o processo de revisão de código.

O desenvolvedor entende imediatamente no PR quais valores foram alterados e por quê. Isso economiza o tempo de precisar perguntar o motivo das mudanças.

Convivendo com código legado

Não tente alterar todo o código de uma só vez. A técnica de fallback, que mistura CSS existente com novos tokens, é realista.

1. Coloque os arquivos de tokens gerados automaticamente no diretório src/styles/tokens.
2. Use o formato var(--new-token, #legacy-value) no CSS existente.

Os componentes que ainda não tiveram os tokens definidos manterão os valores originais. Você pode modernizar o sistema gradualmente sem se preocupar em quebrar a interface. Comece conectando um pequeno token de cor ao pipeline. Essa é a maneira de evitar, desde agora, a enorme dívida técnica que surgirá no futuro.