Finance usability testing has a structural flaw: participants recognize fake prototypes during login, and every data point collected after that recognition is contaminated. This tutorial from Smashing Magazine, sponsored by ProtoPie, builds a banking login prototype called Pie Bank that eliminates that failure mode. The stack is specific: a Figma import using Scene mode to preserve layer hierarchy, native Input layers with real keyboard entry, a masked password field set via a single Type property change, and two text variables bound to input fields using ProtoPie formulas.
The critical mechanism is a conditional Jump response on the login button. Only credentials matching alex.c@gmail.com and ABC123 pass. Wrong input triggers an Error Text layer opacity change from 0 to 100. Two discrete outcomes, credential validation and a live error state, replace the single-path demonstration that most prototypes ship. A Face ID Lottie animation is positioned off-screen and triggered with four sequenced responses: Move, Seek to 0s, Play at 0.5s delay, and Jump to dashboard. The stagger is what makes the transition feel native rather than scripted.
The article is worth reading in full for the sequencing logic: destination scenes must exist before navigation is wired, layer naming directly affects formula reliability, and debug overlays in ProtoPie confirm variable binding in real time before conditions are written. These are not stylistic preferences. They are failure points that compound. The tutorial requires no code and runs entirely on ProtoPie's free plan.
[READ ORIGINAL →]