Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Animated Tabs
Card List
Card Paging
Menu Transition
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Show Password

Open in Framer to interactPreview this example

Let users peek at their passwords by syncing input values between screens to provide Show Password functionality.

Open in FramerPreview Example

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!

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement