Jellyfish: um sistema de Design Tokens

Bastam alguns minutos de papo comigo para notar a paixão que eu tenho nos tão famigerados design tokens. Este relacionamento (que muita das vezes é bastante conturbado) começou há dois anos e, desde então tenho me dedicado a estudar, prototipar e esboçar diversas estratégias para um sistema de design tokens que tivesse escalabilidade suficiente para ser utilizado por uma ou mais marcas, com um ou mais temas.

Como se não bastasse o tamanho do desafio, eu ainda tinha outras metas:

Criar um sistema fácil de gerir;
Criar um sistema que, tanto designers quanto desenvolvedores pudessem utilizar mesmo com limitações de plataformas;
Criar uma convenção de nomes que carregasse o caso de uso do token e que não fosse extensa demais;
Criar um sistema que fosse inteligente o suficiente para não precisar de milhares de tokens atuando.

Apesar de estar inserido em um Design System, trabalhar com design tokens também exige uma abordagem sistemática para garantir a eficácia desta solução.

Após muitos e muitos (e muitos! 😩) erros, o JellyFish finalmente nasceu.

Automatizado e pronto para handoff

Para garantir uma comunicação eficaz entre os times, o JellyFish foi estruturado pensando no seguinte fluxo de trabalho:

Os tokens são criados no plugin Tokens Studio para garantir sincronia com a plataforma Figma (desde uso à documentação) e com o repositório
São criadas as possíveis varibles com seus devidos escopos de uso
Ainda no Tokens Studio os tokens são armazenados no repositório Github através de arquivos JSON
Esses arquivos, por sua vez são lidos e transformados para diversas linguagens e plataformas com o Style Dicionary
Com tudo pronto é só distribuir para os times de front, de preferência em um pacote NPM

Basicamente o plugin Tokens Studio se torna a principal ferramenta para gestão de implementação destes tokens.

Você pode dar uma “fuçada” nele

Sim!!!! O sistema JellyFish está disponível na Comunidade do Figma para todo mundo! É uma versão enxuta dele, mas que já dá uma boa visão de como os seus Design Tokens podem ser estruturados. Você vai ter acesso a:

JSON para o plugin Tokens Studio
Temas Dark e Light já parametrizados
Documentações em Português, Espanhol e Inglês (aqui eu deixo meus agradecimentos para o Figma Variables)
Variables prontinhas para uso