Easy prototyping: make your own interactive pin code login screen in less than 15 mins!

Combine the power of Adobe XD with the amazing expressiveness of ProtoPie to make a fantastic login prototype, empowered by real text inputs.

What I mean by login verification?

Login verification is an important start of any UI Project. either its an app or a website. When it comes to prototype this is a big hassle cause you can not really replicate the real experience cause you need ongoing project with real database so that a person can enter username and password so that they are saved and called back when needed from the database.

Prototyping tool that will make you go crazy

Are there any prototyping tools that can replicate this? Maybe, but I will teach you how you can achieve this with protopie in an easy way. So let’s jump in

Prototyping the 4 digits login

At the start of any prototyping project you need to make sure its ready to be prototyped but don’t worry Protopie has some cool features that help you to make changes and update your file while working.

The Design

At first I started designing in Adobe XD. I recently moved totally to this amazing design tool and I can assure you that it’s the best decision I took in my life.

Protopie; Everything you need to create your App idea replicate

Protopie Features

• Input fields
• Focus Interaction
• Forced character number
• Show/Hide CTA
• Save pin code
• Login with pin code

Step by step tutorial

First Step: Import design from Adobe XD
This prototype can be done with only one screen designed neatly in Adobe XD & Please group your elements and name them correctly in order to have clean setup in protopie.

Second step: Input field and focus trigger
We need to replace our Pin code text field with an input field, a useful element found in protopie, this is a cool detailed keyboard for every device that you choose either its ios or android.Second step is to group all the elements that we need to move and scale in a container, so that On focus in we can move them above the keyboard so that the text field is visible.

Protopie’s details are superb! Since we’re dealing with pin code. We can decide to focus in Number pad. It helps for User Experience.

Focus in & out triggers to move elements up and down to make the text field above the keyboard

Now the Awesome part. Formulas!! We can limit the numpad to type only 4 characters. Just detect the input field and add text as action and type in this formula & Tarraa!!

Now the technical part. Please Focus! It’s super easy but you need to understand the concept and become a mini engineer!

Creating variable & calling it password

Let’s understand the concept. We need a variable that saves our input data and this variable can be used on all scenes, we have this option on protopie. so any data written in the input field will be saved in this variable, so this piece of null object will become holder of the pin code.

Create Variables for all scenes & don’t forget to click on that little bug icon, that icon will let your variable visible on your screen, you can turn it off once your prototype is done.

on the same detect input field trigger. Just add [x] Assign action. This will allow your input field to save anything written on it to save on the variable we created.

Sign up / Login button

So this acts as a normal app. On the sign up the pin code that you decide will be the same pin code needed to login, if not error message will appear. Isn’t this awesome.

I tried to create a space saving UI that relfects the same User Experience. Once the 4 digits are written the input field will turn into a sign up button. Later this button will act as the login button, if the written 4 digit are the same as the same as the one’s created, the green login button will show. If the login password is wrong error message will appear.

The green sign up / login button

Login Page

Now we need to create the login page, once the user creates the pin code, he will be addressed to the login page.

Verifying the variable

We remember the variable right! The empty number field that saved our pin code and we remember that the variable works on all screens. So guess what, now we can check if the new input field is equal to the variable that was saved in the sign up screen. How awesome is that?!

Now we need to create a new input field to type in the pin code. So what’s the deal? We will add a detect trigger on the input field and verify if it’s equal to the variable that we created earlier called “password”, we can have double verification if we want to make it more complex but this is optional, we can even check if the pin code written is 4 character or less.

So the trick is. If the written pin code is equal to the variable data. the green button will show, if not error message will appear saying, the pin code was incorrect, to do that, we need condition action on the detect that we added saying.

Case Correct if Text of input 1 = password “The variable”. opacity of the button “100”

Case InCorrect if Text of input 1 ≠ password “The variable”. opacity of the button “0”, Error message opacity 100.