Why Your Prototype Is Lying to Users
Ever watched a usability test participant pause, type something, then glance up at you? That look says: "This isn't real, right?" Once they know it's a demo, every action they take is filtered through that awareness. The data you collect becomes performance, not behavior.
This is especially critical in fintech. Banking users are trained to notice when something's off—a balance that doesn't add up, a login that accepts anything. When your prototype skips real authentication, participants disengage or stop mid-session to flag it. Your findings reflect how users behave in a demonstration, not in a real product.
The fix? Identify the moment where trust is established and make that interaction real. In a banking app, that moment is the login.
In this tutorial, we'll build a login flow that behaves like a shipped product—with real text inputs, password masking, credential validation, a live error state, and a Face ID animation that feels native. No code required.
Step-by-Step: Building the Login
Step 1: Import from Figma (Choose Scene, Not Flattened)
In Figma, select your login frame and use the ProtoPie plugin. Choose Scene when exporting—this preserves layer hierarchy so every element arrives as a separate, targetable layer. Flattened would collapse everything into a single image, killing interactivity.
Before moving on, rename every layer meaningfully. "Input Username" not "Rectangle 14". You'll reference these names in formulas later; vague names compound into real time lost.
Step 2: Swap Static Fields for Inputs That Accept Text
ProtoPie's native Input layer accepts real keyboard entry. Go to Text → Input, drag an Input layer onto your canvas, and nest it inside your username field group. Match the placeholder text, fill, and font to your design.
Preview and test: you can type! Rename this layer Input Username, duplicate it, and nest the copy inside your password field group.
Step 3: One Property Change Masks the Password
On the duplicated layer, change placeholder text to Password and set Type to Text Password. ProtoPie handles the masking—no custom logic needed. Preview: username shows text, password shows dots. Already feels real.
Step 4: Create the Destination Scene
Add a new scene (even a blank one) for your dashboard. The most common sequencing mistake is trying to wire navigation before a destination exists.
Step 5: Wire the Button (But It Still Lets Everyone Through)
Select the Log In button, add a Tap trigger, set response to Jump to your dashboard scene with a slide transition. Preview: it navigates—but for any input, including nothing. The prototype is still lying. The next steps fix that.
Step 6: Add Variables to Remember What Was Typed
At the bottom-left, add two Text variables: username and password. Bind each to its input layer with a formula:
input("Input Username").text
input("Input Password").text
Enable debug icons to see live variable values as you type—this confirms the binding.
Step 7: Add a Condition for Valid Credentials
Go back to the Tap trigger on the login button. Add a Condition with two rules (both must be true):
username equals alex.c@gmail.com
password equals ABC123
Move the Jump response inside this condition. Wrong credentials, empty fields, wrong format—none get through. Participants now have to actually log in.
Step 8: Build the Error State
Find your error message layer, rename it Error Text, set initial opacity to 0. Add a second condition (the inverse of the first) and inside it a Change Property response setting Error Text opacity to 100.
Now: wrong credentials → error appears; correct credentials → dashboard. Two outcomes make this testable, not just demonstrable.
Step 9: Add the Face ID Animation
Go to Media, drag a Lottie layer onto the canvas, load your Face ID file, and position it off-screen above the iPhone frame. On your "Login with Face ID" button, add a Tap trigger with four responses in sequence:
- Move Lottie container to Y: 60
- Seek Lottie to time 0s (resets so it always plays from the start)
- Play Lottie file
- Jump to dashboard
Step 10: Stagger the Timing
Without delays, all four responses fire at once and the scene jumps before the animation plays. Add offsets:
| Response | Delay |
|---|---|
| Move | 0s |
| Seek | 0s |
| Play | 0.5s |
| Jump | 1s |
Enable Reset selected scenes on Jump—otherwise, navigating back leaves the animation stuck at Y: 60.
Preview: tap Face ID, animation drops in, plays, screen transitions. A biometric login indistinguishable from the real thing.
Caveats & Limitations
- ProtoPie free plan limitations: The free plan supports this tutorial, but for complex multi-scene prototypes, you'll need a paid plan.
- Lottie file compatibility: Ensure your Lottie file is exported correctly; some animations may not play smoothly in ProtoPie.
- Performance: Heavy animations can slow down preview on low-end devices.
- Not a substitute for real backend: This is prototype-level validation, not production security. Use real auth systems in production.
Next Steps for Learning
- Explore ProtoPie's advanced features like Response conditions and Formula for more complex logic.
- Practice building other fintech interactions like money transfer logic or camera integration—check out the rest of the Pie Bank series for inspiration.
- Learn about context engineering for background coding agents to understand how AI can assist in prototyping workflows.
- For broader AI integration in your stack, see how to integrate Recraft's image models with Vercel AI Gateway.
Conclusion
When authentication actually works, the error state becomes a genuine research touchpoint: Do users understand the message? Do they retry? Do they reach for Face ID instead? These are questions a faked login can't answer.
In stakeholder reviews, the flow speaks for itself. In engineering handoff, the interaction panel documents the behavior (conditional logic, variable bindings, timing) so engineers see intent, not interpretation.
This is why fintech teams invest in login fidelity even when login isn't the feature being tested. It's where participant trust is established. Get it right, and everything downstream produces better signal.
Source: Original article on Smashing Magazine