• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página

Juanpol

Diseño UX y UI / Creación de productos digitales

  • Tutoriales de Figma
  • Blog
  • Newsletter
  • 🔴 YouTube

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.

ocultar mostrar contraseña prototipo
Captura del archivo utilizado para explicar cómo ocultar y mostrar una contraseña en un prototipo de Figma

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.

Índice del artículo

  • Pasos para crear el prototipo
  • Actualizar un prototipo de Figma
    • Componentes y pantallas
    • Más temas en este tutorial

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…

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

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.

ocultar mostrar contraseña prototipo
Partes del componente interactivo que utilicé para ocultar y mostrar la contraseña en un prototipo de Figma

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.

Aprende a usar Figma, Sketch y Webflow

Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Información de privacidad

En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

juanpol

Acerca de Juanpol

Product Designer, Diseñador UX/UI y creador de contenido con 29 años de experiencia. Trabaja en Freepik Company.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


En este sitio web te solicito algunos datos para poder moderar y responder comentarios de usuarios. Responsable de los datos: Juan Pablo Olmo / Finalidad de los datos: Gestionar los comentarios y evitar el spam. / Legitimación: Aceptación expresa de la política de privacidad. / Almacenamiento de los datos: Base de datos alojada en Siteground España. / Duración: Hasta que lo solicites. / Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Te puede interesar

  • Componentes interactivos de Figma
  • Los mejores plugins de Figma en 2023
  • Cómo crear un scroll en Figma
  • ¿Qué es Figma y para qué sirve?

Información

  • Juanpol
  • Contacto

Juanpol

Juanpol

Diseño UX y UI / Creación de productos digitales

  • info@juanpol.com
  • LinkedIn
  • YouTube
  • Telegram
  • Twitter

  • Privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los ajustes

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies.