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.
Aprende a usar Figma, Sketch y Webflow
Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.
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.
Hola!
Muchas gracias por tu artículo.
Tengo una duda: querría usar FIGMA para presentar un contenido y recoger feedback de diferentes partes del mismo. Por eso, me gustaría integrar preguntas en el propio FIGMA y poder registrar las preguntas. Asimismo, me gustaría saber quién ha contestado qué.
¿Eso es posible? ¿Cómo?
Gracias :)
Hola María, puedes utilizar la propia herramienta de comentarios de Figma, de esa forma generas una charla dentro de tus diseños, tus compañeros de equipo te responderán, recibirás notificaciones, etc. Te viene bien? sino habría que buscar o pensar otro procedimiento. Si quieres puedo buscar alguna alternativa y la publico en un post.