Motion Tokens - Bradesco
Sistema atomizado de tokens para microinterações de componentes no Design System do Bradesco
Sistema atomizado de tokens para microinterações de componentes no Design System do Bradesco
A estrutura do sistema foi projetada para ser atomizada, ou seja, houve um esforço para reutilizar padrões previamente estabelecidos sempre que possível. Isso não apenas economiza tempo ao desenvolver novas microinterações, mas também garante sua consistência.
A divisão é a seguinte: tokens que compõem animações reutilizáveis, que, por sua vez, constroem microinterações.
Os tokens são a menor unidade do sistema. Eles são categorizados em Duration, Delay e Easing.
O Easing de um elemento pode ser entendido como a aceleração ou desaceleração durante a animação. Para este sistema de tokens, foi desenvolvida uma lógica simplificada em que a única variação será o momento em que cada token deve ser aplicado.
Esse easing criará aceleração no início da animação e é recomendado quando um elemento surge na tela.
Esse easing criará aceleração no final da animação e é recomendado quando um elemento desaparece da tela.
Esse easing criará aceleração no meio da animação e é recomendado quando um elemento permanece visível na tela do início ao fim da animação.
Esse easing não aplica nenhum tipo alteração na aceleração da animação e é recomendado quando se cria uma transição entre valores abstratos, como opacidade e cor.
As microinterações reúnem todos os elementos anteriores com o objetivo de criar a melhor experiência possível para usuário. Do ponto de vista da consistência, o cenário ideal é quando uma microinteração é totalmente criada a partir de Animações Reutilizáveis e, consequentemente, de tokens de Easing, Duration e Delay.
Este projeto foi uma imersão intensa no mundo das microinterações. Durante os meses em que trabalhei nele, pude aprender muito sobre as características que compõem uma boa microinteração.
Criar uma documentação que faça sentido não apenas para designers, mas também para desenvolvedores, será sempre uma tarefa complexa. No entanto, por meio do diálogo, conseguimos superar barreiras e construir uma fonte de verdade comum para ambas as equipes.