Cómo crear una barra de búsqueda en Figma

En este artículo te voy a explicar cómo crear una barra de búsqueda en Figma. Es una pregunta que me están haciendo las personas que leen en blog, especialmente después de publicar el componente “navbar” en mi perfil de Figma Community.

Este tutorial es el complemento perfecto para diseñar el buscador de tu aplicación o sitio web. Todas sus partes se adaptarán a cualquier tamaño de pantalla.

El diseño está basado en la guías de estilo de Material Design pero lo podrás personalizar tanto como lo pidan las necesidades de tu proyecto o producto digital.

Pasos para crear una barra de búsqueda

Para diseñar la barra de búsqueda vamos a crear 2 componentes básicos, el icono y el botón, combinándolos vamos a obtener 2 componentes más: el INPUT o campo de búsqueda con 2 Variants (los estados Default y Active) y la Barra de búsqueda con 4 variantes.

Iconos

El primer componente que vamos a crear es el icono, para diseñarlo vamos a utilizar iconos de la librería de Material Design.

Como dije otras veces no quiero repetir información, te dejo todos los detalles de los pasos para crear un componente icono en el tutorial Cómo crear una barra de navegación en Figma.

Y un vídeo donde puedes ver como crear paso a paso el componente icono:

Lo que debes tener en cuenta para diseñar el componente icono de la barra de búsqueda es lo siguiente:

• Crear 4 variantes con los iconos de Material Design:
  • “magnify” para el icono “ornamental” que mostraremos dentro del campo INPUT del buscador.
  • “close-circle” para el botón cancelar la búsqueda.
  • “filter-variant” para el botón de filtros y opciones.
  • “arrow-left” para el botón de volver a la pantalla anterior.
• El nombre de los Variants serán:
  • “search” para el botón del buscador.
  • “cancel” para el botón que permite borrar el término introducido en el campo de búsqueda.
  • “filters” para el botón de filtros.
  • “back” para el botón de volver.
• Procura que las 4 variantes tengan un tamaño de 24 x 24 px.
• El código HEX del color de base de todas ellas será el #2B2B2B, a esta tonalidad le llamo “casi negro”.
• Desde el módulo Properties cambia el nombre de la propiedad por defecto, llámala Type.
• Renombra el componente como Icon.

En los primeros párrafos te dije que el componente buscador de tu proyecto puede ser distinto, si quieres hacer una pregunta específica por favor déjala en un comentario y la responderé sin falta.

Botones del buscador

Ahora sigamos con el componente botón, en el diseño de esta barra de búsqueda usaremos 4 botones.

• Desde la pestaña Assets arrastra al canvas de Figma una instancia del componente icono.
• Sin deshacer la selección crea un Auto Layout. Figma aplicará paddings de 10 px a todos los lados del frame contenedor, con ello obtendremos un botón de 44 x 44 px, el tamaño recomendado para en el diseño de aplicaciones móviles para facilitar el tap del usuario.
• Cambio el nombre del frame, llámalo Button.
• Selecciónalo y crea un componente, con el mismo nombre.

Hemos creado los componentes de Icon y Button, en el paso siguiente vamos a diseñar el campo de búsqueda.

En este vídeo que complementa la explicación del bloque anterior y los tres siguientes te explico cómo crear el componente interactivo INPUT y el componente Button.

Campo de búsqueda

En este paso vamos a diseñar el campo del buscado donde el usuario introducirá el término que aquello que desea encontrar. Dividiré la explicación en 3 pasos, crear el INPUT básico, añadir un botón para cancelar una búsqueda y crear un componente interactivo para usar en prototipos.

INPUT de búsqueda

• Arrastra una instancia del componente Icon al canvas, procura que la variante seleccionada sea search.
• Crea una cadena de texto y escribe “Search”, utiliza la fuente Source Sans Pro con los parámetros SemiBold, 16 px y Auto, como font-weight, tamaño de texto y alto de línea.
• Selecciona el icono y la cadena de texto y crea con ambos elementos un Auto Layout con los parámetros, Left alignment, Space between items de 8 px, 12 px de Left padding, 52 px de Right padding y Vertical padding de 8 px.
• Aplica los códigos de color #FBFBFB al fondo y #EBEBEB al borde o Stroke del Auto Layout y define su Corner radius con 100 px. para que el diseño del campo de búsqueda tenga bordes completamente redondeados.
• Selecciona el campo de texto y pon en Fill container el valor del campo Horizontal resizing.
• Aplica el color #999999 al icono y a la cadena de texto.
• Selecciona el Auto Layout y renómbralo como Input.

Hemos completado la primera fase del diseño, podríamos seguir con el siguiente componente, pero vamos a darle un poco más de vida al INPUT de búsqueda montando un componente interactivo que nos ayudará a obtener una experiencia de usuario mucho más real, especialmente si decidimos crear un prototipo.

Botón para cancelar una búsqueda

• Activa la pestaña Assets de la columna derecha de Figma y arrastra una instancia del componente Button dentro del Auto Layout.
• Selecciona la instancia y activa la posición absoluta pulsando el botón Absolute position dentro del módulo Frame ubicado en la pestaña Design de la columna izquierda de Figma.
• Ajusta la posición pulsando los botones Align vertical centers y Align right para ubicar el botón en el margen derecho y el centro vertical del Auto Layout.
• Selecciona el frame Icon dentro de la instancia y activa la variante cancel, aplícale el color #999999.
• Crea un componente llamado Input seleccionando el frame del mismo nombre.
• Con la opción Add variant crea una variante de Input.
• Selecciona el componente Input y cambia el nombre de la propiedad por defecto, llámala State.
• Cambia el nombre de la primera variante por Default, a la segunda llámale Active.
• Oculta el frame Button de la variante Default.
• Edita la cadena de texto de la variante Active, introduce Verm para simular que el usuario introduce las primeras letras de la palabra Vermont.
• Selecciona la variante Active y cambia el color del borde por el código #D6D6D6.

Por último vamos a crear un par de conexiones entre las dos variantes del componente Input.

Prototipo

• Activa la pestaña Prototype ubicada en el sidebar derecho de la aplicación.
• Selecciona la variante Default del componente Input y crea una conexión con la variante Active, con los parámetros On click, Change to e Instant. Con ello le permitiremos al usuario que active el campo de búsqueda cuando haga tap en el INPUT.
• La segunda conexión la haremos partirá desde el frame Button de la variante Active hasta la variante Default. Utiliza los mismos parámetros que usamos en la conexión del paso anterior.

Terminamos el diseño del campo de búsqueda, incluso lo hemos preparado para usarlo en prototipos.

¿Necesitas que te explique cómo crear un prototipo con el componente? Si necesitas más información por favor deja un comentario con tu petición.

En el siguiente y último paso vamos a diseñar el componente buscador para nuestra app.

Barra de búsqueda

Con todos los elementos que hemos creado en los pasos anteriores podemos diseñar la barra de búsqueda. ¡Vamos a ello!

• Arrastra 3 instancias al canvas, dos del componente Button y una del componente Input.
• Selecciona las instancias y crea con ellas un Auto Layout con nombre Search bar, aplica los siguientes parámetros: Horizontal direction, Center alignment, Space between items de 4 px, Horizontal padding de 16 px (left) y 8 px (right) y Vertical padding de 12 px.
• Selecciona el frame Input y selecciona el comportamiento Fill container en el campo Horizontal resizing para que la barra de búsqueda se adapte a cualquier ancho de pantalla.
• Edita el botón de la derecha, procura que la variante del frame Icon sea filters.
• Si seguiste correctamente todos los pasos de este tutorial, la variante del frame Icon del botón de la izquierda será back.
• Selecciona el Auto Layout y crea un componente con 3 variantes. Después de hacer este paso obtendrás un componente llamado Search bar con 4 Variants.
• Cambia el nombre de la propiedad Property 1 del componente por Type.
• Para terminar, renombra todas las variantes del componente:
  • “simple”, para mostrar una barra de búsqueda sin nada más.
  • “right icon”, para añadir un botón de filtros a la derecha.
  • “left icon”, para mostrar a la izquierda un botón para volver a la pantalla anterior.
  • “two icons”, para mostrar los dos iconos, uno a cada lado del buscador.

Terminamos el tutorial, ya puedes usar el buscador en tus proyectos, antes de terminar me gustaría comentar que añadiré información complementaria en breve:

• Con esta clase aprendiste a diseñar un buscador para una aplicación móvil, si quieres crear una barra de búsqueda para un sitio web, prepararé un tutorial para ello.
• En futuras actualizaciones de ambos tutoriales añadir a los diseños un botón para realizar una búsqueda por voz.
• Si quieres crear un prototipo de un buscador con mucho más detalle te sugiero ver el tutorial para diseñar INPUTs interactivos.

Tutorial en vídeo

Aquí te dejo el tercer vídeo del tutorial donde podrás ver en imagen real todos los pasos explicado en el bloque anterior: crear el componente principal y todas sus variantes.

Descarga el componente

Si deseas utilizar el componente en tus proyectos te dejo un enlace a mi perfil de Figma Community para que lo puedas duplicar.

Más temas en este tutorial

Durante este tutorial vimos otros temas del curso de Figma en español que te pueden interesar:

• Crear un componente botón con distintas variantes de iconos.
• Cómo crear un componente interactivo para usar en un prototipo de Figma.
• Editar la configuración de un Auto Layout.
• Cómo utilizar la posición absoluta en Figma.