Micro-interações
Motion que explica a interface.
Motion de produto que explica a interface — de onde a tela veio, o que mudou e o que acabou de dar certo.
- Problema
- Motion feito tela a tela vira ruído — cada designer escolhe uma curva e o app parece montado por pessoas diferentes.
- O que eu fiz
- Defini duração e curva como tokens, registrei cada padrão num Motion Ledger e animei as interações-chave do App Braip e do design system a partir deles.
- Resultado
- Um vocabulário de motion reaproveitado entre telas, componentes e peças de lançamento, do keyframe no Figma ao vídeo final.
Saldo que conta
O valor sobe até o número real e o card acompanha.
Detalhe da venda
A tela sai da lista e abre o pedido no mesmo gesto.
Solicitar saque
Conta bancária sobe de baixo com a curva padrão dos overlays.
Biometria
O cadeado vira Face ID antes da home.
Token Light / Dark
Trocar a primitiva muda o tema inteiro.
Home explodida
As camadas da home se separam para mostrar o sistema.
Processo completoContexto, decisões e evidências, para quem quer o detalhe.
Método
Motion entra no sistema como token, não como ajuste por tela: duração, curva e distância têm nome, e cada padrão novo é registrado num Motion Ledger antes de ser reaproveitado. Quando uma folha sobe de baixo no App Braip, ela usa a mesma curva de todas as outras.
- Figma Motion e keyframes para a interação dentro do protótipo.
- HyperFrames para as peças de lançamento — vídeo determinístico, renderizado frame a frame.
- Código com os mesmos números do token, para o motion do protótipo chegar igual em produção.
Peças
As peças acima vêm do App Braip v2 e do design system da Braip. Cada uma responde uma pergunta da interface: de onde a tela veio, o que mudou, o que acabou de dar certo.
Resultados qualitativos: não tenho autorização para publicar as métricas destes projetos.
Próximo →SOS Beleza AbsolutaUm style guide posto à prova.