• 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

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…”

como crear inputs interactivos con figma
Captura del archivo utilizado para explicar cómo crear INPUTs interactivos con Figma

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.

Índice del artículo

  • Cómo crear un INPUT en Figma
    • Crear un componente
    • Crear Variants
    • Crear un componente interactivo
    • Auto Layout
  • Prototipos con INPUTs interactivos
    • Prototipo de bajo nivel
    • Prototipo de alto nivel
    • Añadir más detalles al prototipo
    • Temas de la clase de Figma

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.

Tutorial: Cómo crear INPUTs interactivos con Figma

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.

como crear inputs interactivos con figma
Interacciones entre las Variants del componente interactivo utilizado en el prototipo de alto nivel

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.

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

Comentarios

  1. Foto del avatarMaria dice

    12 enero, 2022 a las 12:04

    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 :)

    Responder
    • juanpolJuanpol dice

      12 enero, 2022 a las 12:11

      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.

      Responder

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.