Most prototype login screens are a shortcut. You tap a button, the screen changes, and everyone agrees to pretend the credentials mattered. The problem isn't aesthetics — i

t's that a faked login produces faked feedback.

 When test participants know the interaction isn't real, their behavior shifts and the data you collect shifts with it.

Conditional logic that validates actual credentials

The result is a login flow indistinguishable from a shipped product, built entirely in ProtoPie, no code required.

Prefer to learn by watching? The full tutorial video walks you through every step in real time.

More of a read-and-execute type? Use both, the video for context, this guide for the steps you'll want to revisit.

Your login UI imported from Figma or preferred UI tool

A Lottie file for the Face ID animation (

Prefer to explore a finished build first? 

 is available to download at the end of this tutorial.

New to ProtoPie? Start with a free account and follow along as you build.

Step 1: Import Your Login UI from Figma and Keep Your Layer Structure Intact

In Figma, open the plugin panel, search for ProtoPie, and launch it. With your full login frame selected, choose 

 rather than Flattened. Scene preserves your layer hierarchy; Flattened collapses everything into a single image, which makes it impossible to interact with individual elements later.

Click Export. Your layers will appear in ProtoPie exactly as structured in Figma.

💡 Before moving on, rename every layer clearly. Vague names like “Rectangle 14” will cost you time the moment you start wiring interactions.

Step 2: Replace Static Input Fields with Ones That Actually Accept Text

This is the step that separates a realistic prototype from a clickable mockup. ProtoPie’s native Input layer accepts real keyboard input – meaning testers type actual text, not simulated content.

 and drag an Input layer onto your canvas. Place it inside your username field group in the layer hierarchy, than match it visually to your design:

Match the background fill to your field background

 if there’s unwanted spacing at the field edge

Copy the hex code from your original text layer and paste it into the Input layer’s placeholder color, than match the font and size

Preview. Click the field and type. Your username input is now live.

Step 3: Mask the Password Field So It Behaves Like a Real App

 and place the copy inside your password field group. Two changes make it a password field:

Text Password masks typed characters as dots automatically, no customer logic needed.

Preview both fields. Username shows typed text, password shows dots. Exactly what users expect – and exactly what makes this prototype credible in a 

Step 4: Create the Dashboard Scene Before Wiring Navigation

Add a new scene in ProtoPie. This will become your dashboard, it can be empty at this stage. The important thing is that it exists as a 

💡Trying to set up a Jump response without a destination scene is the most common sequencing mistake in early ProtoPie builds.

Step 5: Make the Login Button Navigate to the Dashboard

, targeting your dashboard scene, Set the transition to 

Preview and tap. The scene changes. The button works, but it works regardless of what’s in the inputs. The next steps fix that.

Step 6: Use Variables to Capture What the User Types

 are what give this prototype memory. Without them, the inputs are just visual fields with no connection to the app's logic.

At the bottom left of the ProtoPie interface, add two variables to your login scene. Set both to 

 type, which handles letters, numbers, and special characters.

Bind each variable to its input layer using a formula. Select the username variable, click 

Do the same for password: input("Input Password").text

Toggle on the debug icons next to each variable. Green variable overlays will appear on screen showing live variable values as you type. This confirms the binding is working before you build any logic on top of it.

On the free plan? You can build everything in this tutorial. When you're ready for more – unlimited prototypes, team collaboration, more scenes – here's what's available.

Step 7: Add Conditional Logic So Only Valid Credentials Log In

. Create two conditions that must both be true simultaneously:

 response inside this condition block. The scene transition now only fires when both values match exactly. Wrong credentials, wrong email format, or empty fields — none of them get through.

Step 8: Build the Error State for Failed Login Attempts

A login flow without an error state isn't a login flow — it's a one-way door. Find your error message layer, rename it 

Add a second condition to the login button trigger, the inverse of the first:

Preview the full flow. Wrong credentials surface the error message. Correct credentials jump to the dashboard. The login now has two distinct outcomes, which is what makes it testable and stakeholder-ready.

Step 9: Add the Face ID Animation – the Detail That Makes This Feel Real

Biometric login is the interaction that makes testers stop and ask if this is a real app. Here's how to build it.

 layer onto your canvas. Load your Face ID Lottie file and position the group above the iPhone frame, off-screen. Note the Y coordinate of where you want it to land — Y: 60 works well as a landing position.

 to distinguish it from the main login trigger.

 — target the Lottie container, set Y to 

 — target the Lottie file, set time to 

. This resets the animation so it always plays from the beginning.

 — to your dashboard scene, slide in from right to left.

Step 10: Sequence the Timing So the Animation Plays Before the Scene Changes

Without delay settings, all four responses fire simultaneously, the scene jumps before the animation has a chance to play. Use the timeline delay controls to stagger them.

: 0.5s (gives the Move animation time to complete before the Lottie starts)

: 1s (gives the full Lottie animation time to play out before transitioning)

 on the Jump response. This ensures the Face ID animation returns to its starting position if a user navigates back to the login screen.

Preview the complete flow: tap Login with Face ID, the animation drops in and plays, the screen transitions. That's a biometric login that holds up in front of any stakeholder or test participant.

A login that validates real credentials, surfaces a live error state, and simulates biometric authentication doesn't just look impressive. 

It changes what you can do with the prototype

 engage with it the way they would a live product. The feedback you collect reflects real behavior, not accommodations for "it's just a demo." Stakeholders experience the authentication flow rather than having it explained to them. And when the logic is this precise, the prototype stops being a visual reference and starts being the specification your engineering team works from.

That's the foundation Pie Bank is built on. In Tutorial 2, we set up the dashboard, how variables carry financial state across every screen, and how to build the scroll behavior that gives premium apps their tactile feel.

Download the Chapter 1 prototype file – the login scene fully built, every interaction wired. Open it alongside this tutorial to explore how each step fits together, or use it as a reference to check your own build.

Not on ProtoPie yet? Start building for free. Everything in this tutorial works on the free plan.

Want to bring this level of prototyping to your team?

Tutorial 1 of 4 — FinTech Prototyping with ProtoPie

How to Build a Realistic FinTech Login Flow in ProtoPie Without Writing a Single Line of Code

We Built a Fully Functional Banking App. Without Writing a Single Line of Code.

Pie Bank looks like a real app. It behaves like a real app. The login validates actual credentials. The password field masks with dots. The balance updates when you transfer money. The camera opens when you deposit a check.

It’s a prototype. Built entirely in ProtoPie.

AI tools can generate a button, approximate a layout, even suggest interaction patterns. What they can’t do is validate the specific logic your product depends on. Pie Bank isn’t a best-guess interface. Every conditional flow, every balance calculation, every biometric trigger behaves exactly as specified. That’s the difference between a prototype that looks right and one that proves the product works.

This series breaks down exactly how it was made. Not the surface-level interactions, but the mechanics that make it feel real: the variables, the conditional flows, the hardware integrations, the math that keeps numbers accurate across every screen.

The Business Case for Prototyping at This Fidelity

validated before a single engineering ticket is created. 

that produce data you can act on, not feedback qualified with "well, it was just a prototype." 

 that happens when a decision-maker slides to send a transfer on a physical device instead of reading a spec doc that tries to explain it.

In most FinTech design workflows, the prototype is a visual reference and the logic lives in documentation. When a prototype carries real variables, live math, and conditional flows, that gap closes. The prototype becomes the specification. Fewer engineering assumptions. Fewer revision cycles.

This series was built for teams who need all three.

Meet Pie Bank: The Prototype That Behaves Like a Real App

Pie Bank is a high-fidelity mobile banking prototype with four core interaction areas. Each becomes its own deep-dive tutorial, guided by our Creative Technologists at ProtoPie.

Watch the full demo first. Then come back here to learn how each piece was built.

Chapter 1 - Log In Like It's Already Live

Tutorial: How to Build a Realistic Login Flow in ProtoPie

Where most prototypes fake the login, this one doesn't. You'll build functional text inputs, a masked password field, variable-based credential validation, a live error state, and a Lottie-powered Face ID animation — fully sequenced and timed. The result is a login flow that holds up in any user testing session or stakeholder demo.

Tutorial: Building a Smart Dashboard with Variables and Tactile Scroll

A UI that remembers. Every balance, every account state, every data point on the dashboard is stored in variables — the app carries your financial state as you navigate through it. We'll also build the paging container that gives the scroll its premium, tactile feel. The kind of detail that turns a demo into a decision.

Tutorial: Transfer Logic, Dynamic Lists, and Slide-to-Send in ProtoPie

Transfer logic that actually does the math. We build the full send money flow: dynamic account and recipient lists, the slide-to-send component that prevents accidental transfers, and the variable math that keeps balances accurate across the entire session. Stop writing specs that explain how the balance should update. Show them.

Tutorial: Camera Layer Integration and Physical Device Interactions

Hardware that feels indistinguishable from the real thing. We use ProtoPie's camera layer to build a live check deposit flow — real camera feed, capture simulation, and an instant balance update on confirmation. When stakeholders can hold the device and complete the interaction themselves, the conversation changes.

The full series rolls out every few weeks. But if you have a project running now and need to move faster, you don't have to wait for each tutorial to drop.

Our Creative Technologists offer private sessions where you work through your specific prototype directly with them. Your interactions, your logic, your questions.

At the end of this series, we'll release the complete 

, all four chapters, 14 connected ProtoPie scenes, every interaction, open to explore in ProtoPie.

Check back when the series is complete, or follow along so you don't miss the release.

4 deep-dive tutorials. One fully functional banking app. No code. 

The Zero-Code Banking App: Validate Complex FinTech Logic Before Engineering Starts

In this tutorial, we will guide you through the process of creating a high-fidelity prototype that replicates the familiar and playful MacBook setup experience. This project is designed to showcase some of ProtoPie’s most powerful features in a cohesive and interactive way.

We will cover everything, from creating an interactive profile editor with real-time input validation to building advanced accessibility features, such as text-to-speech and voice commands.

This first section focuses on building the "Create Computer Account" screen, where users can input their information and personalize a profile image.

First, we'll build a system to validate user inputs, covering both real-time checks and validation upon form submission.

Create a "Validation" trigger that sends a message containing a 

 variable. This variable will be set to "Continue" for form submission or "Real-Time" for live validation.

This message should be sent when the "continue" button is tapped or when an input field loses focus.

When triggering validation, first initialize a variable called 

Send a "Continue Validation" message if the 

 is "Continue," or a "Real-Time Validation" message if it's "Real-Time."

When the prototype receives "Continue Validation":

Verify that the mandatory input fields (account name, username, password, and password confirmation) are not empty.

If the length of an input field's text is 0 (length(input field layer name.text) = 0), display the corresponding error message for that field.

When the prototype receives "Real-Time Validation":

Check if the password and password confirmation fields match.

If they do not match (password input.text = password confirmation input.text), show an error message.

Based on the validation results, display the relevant error messages.

When the "continue" button is pressed, trigger all input fields to lose focus, which runs the validation checks.

This step covers the logic for the profile editing pop-up window.

 The visibility of the pop-up and the edit button should be toggled when the user clicks the Edit, Cancel, or Save buttons.

When the edit button is clicked, check the 

 variable. If it is "None," disable the save button.

If the user clicks cancel, send a "Reset Profile" message to the Previews component, which reverts the profile to the original 

Also, send a "Reset Selection" message to the Profile component to clear the current selection.

 When the "Emoji" or "Monogram" buttons are clicked, toggle the visibility of their respective lists and selected effects.

Here, we'll handle the selection, display, and scaling of profile images.

 When a profile image is tapped, send a "Select Profile" message with the 

. Also, send a "Reset Selection" message to clear all previous selections before making the new one visible.

 variable to manage which image is displayed on top.

 When the main scene receives the "Select Profile" message, enable the save button.

 If the selected profile is a "Monogram," make the initial text visible.

 Make the scaling "Knob" draggable horizontally. Use a 

 trigger to link the Knob's x-position to the size of the Indicator, the Preview image, and the initial text.

Step 4: Creating Monograms with Name Input

This final step for Part 1 outlines how to dynamically generate monogram initials from the user's input name.

 that tracks the text from the Full name input field in real-time.

 (only a first name): Assign the input to 

 and assign its first letter to the Initial variable.

 and the text after to Last_Name. Then, assign the first letter of 

 plus the first letter of Last_Name to the Initial variable.

 Send the Initial value in a message to the Profile component to update the monogram text. Ensure the initials also scale proportionally with the image scaling logic.

This section covers the implementation of four distinct accessibility features, modeled after those found in macOS.

This feature implements text-to-speech for selected text, complete with an on-screen controller.

 Predefine overridable variables in a component for things like text size, line count, highlight dimensions, and speaking durations (

 When a user double-taps a sentence, send the selected text and duration values to the main scene. Make the on-screen controller visible and reset any previous highlights.

 Allow the controller to be draggable. Add mouseover effects to its buttons. The play/stop button toggles an IsSpeaking variable.

 When play is clicked, check the selected rate (normal, fast, slow) and use the 

 response to speak the Selected_Text at the corresponding duration.

 Create a "Reset all" message that stops speaking, clears highlights, and hides the controller.

Step 2: Voice Assistance - "Hey Pie" Setup (Motor)

This feature implements a voice assistant that responds to different commands.

 trigger to write out the assistant’s answer one character at a time, creating a typing effect.

 for different phrases (e.g., "Hello," "Play some chill music").

 values. For example, if the user says "hello," set 

 to 1 and have the assistant reply, "Hello, how can I help you?". This can also trigger other responses, like playing music or changing the volume.

 Use an invisible timer box to detect when the user hasn't spoken for a certain period (e.g., 10 seconds). If a timeout occurs, have the assistant say, "Sorry, I couldn't understand," and prompt the user again.

This feature displays a real-time transcription of spoken audio.

 Upon scene start, immediately begin listening continuously.

 variable and assign its value to a text field every time it updates.

 Track the height of the text container using a 

 has exceeded the height of the scrollable container. If it has, automatically scroll the container down to show the newest text.

 action before the user leaves the scene.

This feature enables users to type text into a field and have the system speak it aloud.

 Use a start trigger to auto-focus on the text input field when the scene loads.

 When the user presses play or hits Enter, trigger a 

 response containing the text from the input field.

 Calculate the duration of the speech (e.g., 

). Use an invisible timer box to move over this duration.

 When the timer completes, send an "End Timer" message. This should reset the UI, toggle the play/stop buttons back, and handle any text replacement if the user typed while the audio was playing.

And just like that, you've mastered the art of creating awesome, interactive prototypes! Now go forth and build something amazing.

Interested in more tips & tricks on how to get started using ProtoPie?

You can find plenty of learning material, including example Pies ready-to-use, in our 

A detailed tutorial on creating an interactive MacBook setup experience, from input validation and profile editing to advanced accessibility features like voice commands.

How to Build an Interactive MacBook Setup Experience in ProtoPie: A Step-by-Step Guide

, we built a reusable radio button component. While useful, it still required a lot of code, was prone to errors with small changes, and was limited to a maximum of six buttons.

This time, we'll level up our approach. We will create a highly efficient component from a single radio button that can be used to build a set of any size. This method dramatically reduces the amount of code and makes your components more powerful and flexible.

Before we jump into the tutorial, it’s important to understand a few essential concepts to follow along:

ProtoPie messages can only send one value at a time. We'll use JSON to bundle multiple values into a single message, allowing us to send more complex information.

Think of these as custom properties for a component instance. They allow us to give each radio button a unique identity and function, making our single component truly reusable.

To maintain sync between Figma and ProtoPie, you must be careful about what you override. An override in ProtoPie will always overrule a change from Figma. As a general rule, 

 (shape, color, borders, fonts, positioning) in ProtoPie. It's better to manage these in Figma or change them in ProtoPie using responses to a 

. While text values and opacity can be changed in ProtoPie, it's still often better to do so via a trigger.

ProtoPie doesn't have a response to "hide" a layer, but you can change its 

. Critically, there's no way to check if a layer is hidden, only a way to access its opacity. Remember that a layer can be hidden in the layer panel (and thus invisible) even if its opacity is 100. You can delete or hide layers from a Figma import without breaking the sync, but this must be done in ProtoPie Studio, not through interactions.

Ready to build a smarter, more scalable component? Let's dive in.

Building a single, general-purpose radio button

To follow the tutorial, you can download the starting pie & Figma file here: 

The ending pie is also available for download here: 

” file. In case you don’t have access to Figma, skip right to Step 3.

Step 1: The Starting Pie when you first open it

Step 2: Import & Prepare Figma Assets (Only possible with access to Figma)

Delete the local component that’s present in the “Starting Pie.pie” file and import the “

” file into Figma. You should see two radio button designs: one called '

'. Select both and open the ProtoPie Figma Plugin. Export both objects to ProtoPie (make sure the plugin shows it’s exporting 2 objects).

Back in ProtoPie, set the position of Tick and Dot to 0,0 and rename the component to “

”. Open up the layers in Tick and Dot and make sure that they are all editable (click “Make Editable” if they are not). At this point, it’s also a good idea to set the opacity of the ON layers to 0, so that only the unselected buttons are visible.

Step 2a: Preparing to Export from Figma to ProtoPie

Step 2b: Make sure the imported layers are editable

Open the component editor for the Radio Buttons component. We’re now going to create the necessary variables:

Tutorials

How to Build a Realistic FinTech Login Flow in ProtoPie Without Writing a Single Line of Code

The Zero-Code Banking App: Validate Complex FinTech Logic Before Engineering Starts

How to Build an Interactive MacBook Setup Experience in ProtoPie: A Step-by-Step Guide

A Guide to Creating Reusable Components in ProtoPie - Part 2

Effortless Integration: Connecting Google Sheets to Your ProtoPie Prototypes

A Guide to Creating Reusable Components in ProtoPie - Part 1

Automotive UI Prototyping with Real Car Data

ProtoPie Connect and Unreal Engine 5 Integration

Why Move from Figma to ProtoPie for Advanced Prototyping

Create a Stopwatch Timer using Formulas and Variables

How to Prototype a Dropdown Menu with Components

How to Create a Looping Scroll Carousel for Web

How to Design a Circular Slider with Conditionals

How to Prototype a Functional Video Player

How to Create a Draggable Slider with a Dynamic Number Indicator