Diseña el Text field perfecto en Figma

En este tutorial te voy a explicar cómo diseñar un Text field en Figma. Detallaré las variantes y propiedades de este campo de texto editable para que puedas usarlo en tus proyectos. También te dejaré un link para que lo puedas descargar.

En uno de los últimos tutoriales que publiqué en YouTube, desglosé paso a paso cómo crear un campo de texto en Figma, quiero compartir algunos de esos insights aquí para que puedas aplicar el componente en tus proyectos.

Anatomía del Text input field

El diseño de un INPUT de texto no es simplemente colocar un rectángulo en tu pantalla.

Vamos a revisar cada una de sus variantes, todas ellas tienen un propósito específico que mejora la experiencia del usuario:

• Enabled: es el estado básico, listo para que el usuario interactúe.
• Hovered: se activa cuando el cursor pasa por encima, indicando que el campo es interactivo.
• Focused: se muestra cuando el campo está activo y listo para recibir texto, ayudando al usuario a saber dónde está escribiendo.
• Filled: es el estado que mostramos cuando el INPUT contiene texto, es decir, cuando el usuario ya completó el campo.
• Error: se utiliza para indicar errores de validación, con este estamos indicamos al usuario que para continuar debe corregir su entrada.
• Read only: visible cuando el campo no es editable, es útil para mostrar información que el usuario no puede cambiar.
• Disabled: indica al usuario que el campo no está disponible para interacción en ese momento.

Propiedades del campo de texto

El Text field cuenta con propiedades que añaden funcionalidad y claridad al componente.

Esta es la lista de propiedades:

• Size y State: definen el tamaño del campo y su estado visual actual.
• Label: esta etiqueta informa al usuario qué tipo de información contiene el campo, en este caso la mostramos arriba del INPUT.
• Show Required: es un icono indicador que muestra si el campo es obligatorio.
• Show Optional y Text Optional: podemos mostrar y ocultar esta cadena derecho en la esquina superior derecha del INPUT, la podemos usar para mostrar enlaces con más información, ayuda, etc.
• Show Left icon, Left icon, Show Right icon y Right icon: son propiedades para mostrar y seleccionar los iconos que podemos configurar a la izquierda y a la derecho del campo de texto.
• Placeholder: es el texto de ejemplo o un tip sobre la información que el usuario debe introducir.
• Show Del: para mostrar u ocultar un botón que permite al usuario borrar el texto introducido en el INPUT.
• Show Helper Message y Helper Message: se usa para mostrar y configurar mensajes de ayuda que pueden guiar al usuario durante la entrada de datos.

Descarga el componente Text field para Figma y úsalo en tus diseños UX, lo tienes disponible en el UX fomo Design system.

Cómo y dónde usar un Text field

Vamos a repasar algunos ejemplos que te ayudarán a entender mejor cómo aplicar un componente INPUT de texto.

Formulario de contacto

En cualquier producto digital donde necesites mostrar un formulario electrónico para entrar en contacto con tus clientes o crear una cuenta de usuario, el campo de texto o Text field es esencial para introducir información.

Recuerda que cada campo de texto debe estar claramente etiquetado y mostrar un placeholder que ejemplifique el tipo de información requerida.

Buscadores de tiendas online

Por ejemplo, el campo de búsqueda de Amazon o cualquier otro sitio web de comercio electrónico. El Text field es probablemente uno de los componentes más usados en este tipo de webs.

Necesita estar optimizado para que su uso y entendimiento sea lo más fácil posible.

Te dejo un tip: debe incluir un ícono de lupa para indicar la acción y ofrecer sugerencias automáticas mientras escribes, mejorando así la experiencia de búsqueda.

Filtros de búsqueda

En cualquier aplicación donde el usuario pueda filtrar información los campos de texto se usarán para que el usuario encuentre resultados por palabra clave, autor, fecha o cualquier otro parámetro relevante.

Importante, el uso de placeholders y etiquetas es crucial para que el usuario construya consultas de búsqueda efectivas.

Pasarelas de pago

Los campos de texto en los formularios de pago o pantallas de checkout para introducir información de tarjetas de crédito son críticos.

Deben ser extremadamente seguros y claros, tener sistemas de validación para que el usuario pueda introducir datos específicos como números de tarjeta, fechas, cantidad o códigos de seguridad.

Es importante introducir validación en tiempo real para minimizar errores antes de terminar una compra.

Estos son unos pocos ejemplos que demuestran la versatilidad y la importancia del componente de campo de texto en diferentes contextos dentro de productos digitales. Cada caso requiere consideraciones específicas de diseño para asegurar que el Text field no solo cumpla con las expectativas de funcionalidad sino que también mejore la UX.

Este tutorial está diseñado no solo para enseñarte a crear un campo de texto en Figma. También lo publiqué para profundizar tu comprensión de cómo cada elemento de tu diseño afecta la experiencia del usuario.

Si tienes alguna duda o sugerencia deja un comentario.