Por que seu protótipo está mentindo para os usuários
Já reparou quando um participante de teste pausa, digita algo e olha pra você? Aquele olhar diz: "Isso não é real, né?" Quando eles sabem que é uma demo, cada ação é filtrada por essa consciência. Os dados viram performance, não comportamento.
Isso é crítico em fintech. Usuários de banco são treinados pra notar quando algo está errado—um saldo que não bate, um login que aceita qualquer coisa. Quando seu protótipo pula a autenticação real, os participantes se desconectam ou param no meio da sessão pra alertar. Os resultados refletem como eles se comportam numa demonstração, não num produto real.
A solução? Identificar o momento onde a confiança é estabelecida e tornar essa interação real. Num app de banco, esse momento é o login.
Neste tutorial, vamos construir um login que se comporta como um produto lançado—com campos de texto reais, mascaramento de senha, validação de credenciais, estado de erro ao vivo e animação Face ID nativa. Sem código.
Passo a Passo: Construindo o Login
Passo 1: Importe do Figma (Escolha Scene, não Flattened)
No Figma, selecione o frame do login e use o plugin ProtoPie. Escolha Scene ao exportar—isso preserva a hierarquia de camadas, permitindo que cada elemento chegue como uma camada separada e interativa. Flattened juntaria tudo numa única imagem, matando a interatividade.
Antes de continuar, renomeie cada camada de forma significativa. "Input Username" não "Rectangle 14". Você vai usar esses nomes em fórmulas depois; nomes vagos custam tempo real.
Passo 2: Troque campos estáticos por inputs que aceitam texto
A camada Input nativa do ProtoPie aceita entrada real do teclado. Vá em Text → Input, arraste uma camada Input pro canvas e coloque dentro do grupo do campo de usuário. Combine o placeholder, preenchimento e fonte com seu design.
Teste no preview: você consegue digitar! Renomeie pra Input Username, duplique e coloque a cópia dentro do grupo do campo de senha.
Passo 3: Uma mudança de propriedade mascara a senha
Na camada duplicada, mude o placeholder pra Password e defina Type como Text Password. O ProtoPie cuida da máscara—sem lógica customizada. Preview: usuário mostra texto, senha mostra pontos. Já parece real.
Passo 4: Crie a cena de destino
Adicione uma nova cena (mesmo em branco) pro dashboard. O erro mais comum é tentar configurar navegação antes de existir um destino.
Passo 5: Configure o botão (mas ainda deixa todo mundo entrar)
Selecione o botão Log In, adicione um trigger Tap, defina a resposta Jump pra cena do dashboard com transição slide. Preview: navega—mas pra qualquer entrada, inclusive nenhuma. O protótipo ainda está mentindo. Os próximos passos resolvem isso.
Passo 6: Adicione variáveis pra lembrar o que foi digitado
No canto inferior esquerdo, adicione duas variáveis de texto: username e password. Vincule cada uma à sua camada de input com uma fórmula:
input("Input Username").text
input("Input Password").text
Ative os ícones de debug pra ver os valores das variáveis em tempo real—isso confirma a vinculação.
Passo 7: Adicione uma condição pra credenciais válidas
Volte ao trigger Tap do botão de login. Adicione uma Condition com duas regras (ambas devem ser verdadeiras):
username equals alex.c@gmail.com
password equals ABC123
Mova a resposta Jump pra dentro dessa condição. Credenciais erradas, campos vazios, formato errado—nenhum passa. Os participantes agora precisam realmente logar.
Passo 8: Crie o estado de erro
Encontre a camada da mensagem de erro, renomeie pra Error Text, defina opacidade inicial como 0. Adicione uma segunda condição (a inversa da primeira) e dentro dela uma resposta Change Property definindo a opacidade de Error Text pra 100.
Agora: credenciais erradas → erro aparece; corretas → dashboard. Dois resultados tornam isso testável, não só demonstrável.
Passo 9: Adicione a animação Face ID
Vá em Media, arraste uma camada Lottie pro canvas, carregue seu arquivo Face ID e posicione fora da tela acima do frame do iPhone. No botão "Login with Face ID", adicione um trigger Tap com quatro respostas em sequência:
- Move contêiner Lottie pra Y: 60
- Seek Lottie pro tempo 0s (reseta pra sempre começar do início)
- Play arquivo Lottie
- Jump pro dashboard
Passo 10: Distribua o timing
Sem atrasos, as quatro respostas disparam ao mesmo tempo e a cena pula antes da animação tocar. Adicione offsets:
| Resposta | Atraso |
|---|---|
| Move | 0s |
| Seek | 0s |
| Play | 0.5s |
| Jump | 1s |
Ative Reset selected scenes on Jump—senão, ao voltar, a animação fica presa em Y: 60.
Preview: toque Face ID, animação desce, toca, tela transiciona. Um login biométrico indistinguível do real.
Limitações e Atenção
- Limitações do plano gratuito do ProtoPie: O plano gratuito suporta este tutorial, mas pra protótipos complexos com múltiplas cenas, você vai precisar de um plano pago.
- Compatibilidade do arquivo Lottie: Garanta que seu arquivo Lottie foi exportado corretamente; algumas animações podem não rodar suavemente no ProtoPie.
- Performance: Animações pesadas podem deixar o preview lento em dispositivos menos potentes.
- Não substitui um backend real: Isso é validação em nível de protótipo, não segurança de produção. Use sistemas de autenticação reais em produção.
Próximos Passos de Aprendizado
- Explore recursos avançados do ProtoPie como Condition e Formula pra lógica mais complexa.
- Pratique criar outras interações fintech como transferência de dinheiro ou integração de câmera—veja o resto da série Pie Bank pra se inspirar.
- Aprenda sobre context engineering para agentes de codificação em background pra entender como IA pode ajudar em fluxos de prototipagem.
- Pra integração mais ampla de IA no seu stack, veja como integrar modelos de imagem da Recraft com o Vercel AI Gateway.
Conclusão
Quando a autenticação realmente funciona, o estado de erro vira um ponto de pesquisa genuíno: os usuários entendem a mensagem? Eles tentam de novo? Eles preferem Face ID? Essas são perguntas que um login falso não responde.
Em revisões com stakeholders, o fluxo fala por si. No handoff de engenharia, o painel de interação documenta o comportamento (lógica condicional, variáveis, timing) pra que engenheiros vejam intenção, não interpretação.
É por isso que times fintech investem em fidelidade de login mesmo quando o login não é a feature testada. É onde a confiança do participante é estabelecida. Acertou isso, e tudo depois gera sinal melhor.
Fonte: Artigo original no Smashing Magazine