Cómo crear INPUTs interactivos con Figma

En este post voy a responder la pregunta de Pia, una lectora del blog que ha dejado la siguiente inquietud: cómo crear INPUTs interactivos con Figma, las siguientes fueron algunas de sus palabras:

“Hola! Intento averiguar cómo conseguir que las personas puedan escribir en el campo de inscripción de un formulario… en el prototipo que estoy haciendo no me permite escribir, ya lo intenté de varias maneras y los tutoriales no son claros…”

Respondí su inquietud al día siguiente en un directo que hice en Twitch, unos párrafos más abajo encontrarás el vídeo editado y subido a mi canal de YouTube.

Cómo crear un INPUT en Figma

Para complementar el tutorial voy a resumir el contenido del streaming. Si tienes alguna duda deja un comentario y lo responderé con mucho gusto.

Crear un componente

Lo primero que hice fue crear un nuevo componente con un INPUT que utilicé en un directo anterior. Digo nuevo componente porque ya tenía hecho uno, lo que hice entonces fue deshacer la instancia del componente anterior y crear uno nuevo utilizando la combinación de teclas Ctrl + Alt + K, en Windows.

Crear Variants

Después he creado Variants del componente, tres en total: Default, Focus y Typing. Las necesitaba para crear el primer prototipo que iba a presentar.

Crear un componente interactivo

Con las Variants hechas pude crear las interacciones entre ellas, es decir, las “conexiones” que me permitieron obtener el componente interactivo.

Auto Layout

Con el componente interactivo ya podía crear un Auto Layout con un pequeño formulario de Sign in o Log in, con campos de Usuario o Correo electrónico, Contraseña y un botón de Sign in. También utilicé un Spacer para dejar más espacio entre los INPUTs y el botón.

Prototipos con INPUTs interactivos

Para dar un contexto más real que nos ayude a entender cómo funciona el INPUT interactivo dentro del prototipo de Figma utilicé como primer Frame el diseño de una landing que me llevaría al formulario de Sign in. Por cierto, para crearla utilicé una ilustración de Storyset.

Prototipo de bajo nivel

Luego ejecuté el prototipo de bajo nivel y el resultado fue el esperado. Después de hacer tap en la opción “I have an account”de la landing encontré el formulario donde pude probar el componente interactivo con los tres pasos (Variants): Default, Focus y Typing. La pregunta enviada por Pia está respondida.

Pero me gustan mucho los prototipos de alto nivel y decidí dar un paso más.

Siguiente clase: Cómo ocultar y mostrar una contraseña en un prototipo de Figma.

Prototipo de alto nivel

Lo que hice fue crear más Variants en el componente interactivo del INPUT, quería con ello simular la escritura dentro del formulario.

• En el INPUT de Usuario o Correo electrónico quería introducir “j” y “u”, las dos primeras letras de mi nickname “juanpol”. Para ello creé dos nuevas Variants.
• Para no extender demasiado el prototipo me propuse simular el comportamiento de auto completado. Después de introducir “ju” el INPUT iba a “recordar” mi nombre de usuario completando el campo. La siguiente Variant que creé mostraba el INPUT con “juanpol”.
• Para simular la introducción del password en el prototipo de alto nivel creé Variants para el INPUT de Contraseña. Lo monté con caracteres ocultos y el icono Ojo para mostrar durante un momento la contraseña que va introduciendo el usuario.
• Hice seis Variants del INPUT de Contraseña: Default, Focus, C1, C2, C3 y C4.
• Por último monté un paso más en el prototipo principal para simular el cambio o salto entre los dos INPUTs (Usuario o Correo electrónico y Contraseña).
• Las propiedades de las interacciones entre todas las Variants del componente interactivo las puedes ver en el vídeo del tutorial.

Ejecuté el prototipo y comprobé que la introducción del nombre de usuario y la contraseña de cuatro caracteres funcionaba correctamente.

Añadir más detalles al prototipo

¿Qué otro detalle podía añadir al prototipo de alto nivel?

Se me ocurrió añadir otro comportamiento, la activación del botón Sign in después de completar los dos campos del formulario. Para ello creé el Variant «disable» en el componente del botón por defecto.

Pero después de unos minutos me doy cuenta en mitad del directo que no lo puedo hacer por cómo he montado el formulario. Decido entonces buscar una solución y explicarla en una siguiente clase de Figma.

Temas de la clase de Figma

Para terminar el post quiero enumerar los temas que hemos repasado en este tutorial:

• Conceptos básicos del Atomic Design.
• Comportamientos que le podemos dar a los elementos dentro de un Auto Layout.
• Cómo se comportan las instancias de un componente cuando hacemos cambios en el componente principal o componente padre.
• Cómo cambiar el color de fondo principal de un prototipo.
• Cómo crear Variants de un componente con varias propiedades.
• Cómo crear varios flujos dentro de un componente interactivo.
• También hemos reflexionado sobre cuándo es necesario crear prototipos de bajo nivel (más simples) o de alto nivel (con muchos detalles). Distintas situaciones, como cuando presentamos un proyecto a clientes, al equipo de Front-end o de Back-end.