Ocultar y mostrar una contraseña en un prototipo de Figma

En la clase anterior monté un prototipo de formulario con componentes interactivos y me encontré con un inconveniente y con la necesidad de ocultar y mostrar el contenido en el campo de contraseña.

Si no viste el tutorial te sugiero hacerlo, en cualquier caso te resumiré los dos temas. El problema lo tuve cuando quise cambiar el estado del botón Sign in justo después de introducir la contraseña. Y la necesidad, quería crear nuevas Variants para simular el uso del icono “ojo” para mostrar y ofuscar el INPUT de password.

Pasos para crear el prototipo

Como lo hice en otros tutoriales te voy a dejar un resumen de todos los pasos que debes hacer si quieres montar un prototipo con un botón con estado activo y un campo de formulario para ocultar y mostrar contraseña:

• Lo primero que hice al comenzar el directo en Twitch fue ejecutar el prototipo que monté en el vídeo para recordar el problema que encontré justo antes de finalizar la clase.
• Luego expliqué qué es lo que quería arreglar, modificar y añadir:
  • Quitar al componente interactivo que utilicé en el prototipo anterior las Variants del INPUT de contraseña.
  • Crear un nuevo componente interactivo llamado “pass + button” con password y botón Sign in y añadir las interacciones a las Variants de ambos elementos para que estos funcionen correctamente una vez lanzado el prototipo.
  • Añadir nuevas Variants para simular la acción de mostrar y ofuscar el contenido del campo contraseña. Para ello descargué el icono “ojo” del set de Material Design, lo hice utilizando el plugin oficial publicado en Figma Community.

Además, durante la clase he reflexionado un poco sobre cómo abordar los nuevos tutoriales…

Actualizar un prototipo de Figma

Me he propuesto actualizar el prototipo y añadir nuevas pantallas y funcionalidades a la app del centro de bienestar que estoy usando como ejemplo. Entono un mea culpa, para hacerlo voy a llegar a los directos de Twitch con una escaleta más trabajada, con un poco más de organización y planificación.

Voy a refactorizar algunos de los componentes creados para montar la app. Crearé nuevos componentes y organizaré de forma más óptima nombres y estructura de los mismos. Prepararé un borrador con el diseño de la pantalla Dashboard a la que llegará el usuario después de abrir una sesión. Y añadiré en la pantalla de Sign in la opción “Olvidé mi contraseña”, me acabo de dar cuenta que no la había puesto mientras redacto este post.

Si el tiempo me lo permite haré estos cambios en directos más cortos sin micro, por si alguien desea profundizar un poco más en el uso de las herramientas de Figma.

Componentes y pantallas

Con todo ello quiero llegar a la clase de la semana que viene para:

• Optimizar o corregir el flujo entre los dos INPUT del formulario de la pantalla Sign in.
• Añadir dos casos más en el flujo de Sign in, Error en el campo de correo electrónico o nombre de usuario y Error en el campo de contraseña.
• Montar el diseño provisional de la pantalla Dashboard.

En fin… hasta aquí llego con el resumen de la clase “Ocultar y mostrar una contraseña en un prototipo de Figma”. Como habrás visto ha sido un ejercicio “muy meta”, me convence hacerlo de esta manera y espero que te guste.

Como siempre, si deseas hacer alguna pregunta o compartir una sugerencia por favor deja un comentarios, gracias de antemano.

Más temas en este tutorial

Durante la clase vimos otros temas que te pueden interesar si quieres aprender Figma desde cero:

• Cómo renombrar Frames desde el sidebar y dentro del canvas, y la combinación de teclas que podemos usar para hacerlo en menos tiempo.
• Comportamientos de elementos dentro de un Auto Layout.
• Las distintas formas de crear Variants de un componente, cuándo usar un método y cuándo usar otro.
• Cómo organizar Frames en el canvas con el mismo valor de separación.