Os sistemas de design já utilizam tokens para cor, espaçamento e tipografia. Os tokens de movimento aplicam a mesma ideia à animação. Eles transformam decisões como "pequenos elementos se movem rapidamente e se acomodam suavemente" em valores nomeados que todo designer e desenvolvedor usa.
Um conjunto típico inclui durações (curta, média, longa), curvas de flexibilização (padrão, entrada, saída) e, cada vez mais, molas definidas por rigidez, amortecimento e massa. Springs são populares porque parecem naturais e lidam bem com interrupções no código.
Nomear é importante. Nomes baseados no propósito, como motion.enter ou motion.emphasis, são mais fáceis de aplicar corretamente do que números brutos. Mantenha o conjunto pequeno. Se cada componente obtiver sua própria curva, os tokens param de fazer seu trabalho.
A acessibilidade também pertence aos tokens. Defina o que acontece quando o usuário ativa o movimento reduzido, por exemplo, fades mais curtos em vez de movimentos grandes, para que cada componente lide com isso da mesma maneira.
Os tokens geralmente são armazenados em JSON e transformados em variáveis CSS, Swift, Kotlin ou JavaScript por uma ferramenta de construção de token. Nosso Motion Token Generator gratuito produz um conjunto inicial que você pode adaptar.