Show Password

Learn more about show password interactions

In this short guide we discuss the advantages of using the Show Password function when prototyping in Framer.

What is a show password interaction?

Sign-up screens and login forms are essential to many website and app flows. And while the sign-in window might not be the most exciting part of your app, it’s nonetheless very important, as it provides the entry point for all users.

Unfortunately though, some entry points can be a lot more welcoming than others. And this element of app design is frequently overlooked; not only at the prototyping stage but even in final iterations. Making login a less than optimal experience for many users.

Thankfully, there are many ways in which you can improve your login screen so that users find the process a lot smoother. One such optimization that we often recommend making is that, instead of dots, hidden characters, or passwords concealed behind asterisks, you can set up the login window so that users actually get to see their password as they enter it.

This way users are able to make certain that they have typed their password correctly before continuing, therefore reducing the risk of error. We call this optimization a Show Password interaction or the Show Password function.

Why include show password functionality at login?

For added protection, most apps require users to step through ever more complex security hurdles before logging in. And all it takes is to mess up a few times with a fat-fingered mistake, and a user may find themselves locked out of their own account. Never a fun experience.

Because of this, many people find typing a password into an input field without being able to see what they are doing quite frustrating - stressful even. For this reason it can be good to include an option to display passwords as text while typing.

Including added UX improvements of this kind at the prototyping stage will make the prototype experience feel more authentic. As a result it can help with both user testing and with the validation of ideas.

How to make a show password interaction in Framer

To create this interaction in Framer, you will need to use a bit of code to make sure the values of the input fields stay in sync with each other. We will do this through two Code Overrides and a Data object.

In the canvas, you will need to create two screens that have the same layout and inputs; the only difference is that one will have a show password icon, and one will have a hide password icon. You can then create a link between the two screens using the icons as the hotspot.

Now for the code.

As you see in the example, there are two Code Overrides that save the value entered into the input and allow you to see the same value when you change between show password and hide password. Make sure these overrides are applied to both of your inputs - show password and hide password - and you will be ready to go!