Cómo crear una barra de navegación en Figma

En casi todos los productos digitales siempre vamos a encontrar un menú para acceder a las secciones principales de un sitio web o una aplicación. En este tutorial vamos a aprender cómo crear una barra de navegación en Figma.

En este artículo te voy a explicar todos los pasos que debes seguir para crear una barra de navegación de una aplicación para dispositivos móviles, el ejemplo que vamos a usar es el menú principal de la app de la empresa Airbnb y lo vamos a implementar en el proyecto de app de cicloturismo que usamos en otros tutoriales del blog. Si tienes alguna duda por favor déjala en un comentario, te responderé rápidamente. Gracias de antemano.

Pasos para crear una barra de navegación

Para montar el menú de navegación debemos crear 4 componentes básicos que una vez unidos darán forma a nuestro navigation bar.

Icono

El primer componente que vamos a crear es el icono, de nombre le pondremos “Icon” y en tendrá 6 Variants, cada una de estas variantes contendrá un icono que vamos a utilizar en los demás componentes.

• Ejecuta el plugin Material Design Icons (Community), si no lo tienes instalado te recomiendo hacerlo. Si quieres obtener más información sobre esta colección de iconos y aprender a utilizarla te sugiero leer el post Los mejores plugins de Figma.
• Utiliza el buscador del plugin para buscar 6 iconos, realiza una búsqueda a la vez:
  • “magnify”, lo usaremos para la sección Explorar.
  • “heart-outline”, para la sección Favoritos.
  • “bike”, para la sección Rutas.
  • “message-outline”, para la sección Mensajes.
  • “account-outline”, para la sección Perfil.
  • “map-outline”, para el botón de Abrir mapa.
• Después de introducir el término pincha sobre el icono y automáticamente aparecerá sobre el canvas de Figma dentro de un frame de 24 x 24 px.
• Selecciona los iconos y crea un componente con 6 variantes. Para ello abre el menú que se despliega desde el icono Components ubicado en el centro de toolbar de Figma y pincha en la opción Create component set. Los 6 iconos quedarán dentro de un frame que es en realidad un componente con sus Variants.
• Con el nuevo componente seleccionado cambia el nombre genérico de la propiedad “Property…” como “icon”, lo puedes hacer desde módulo Properties ubicado en la pestaña Design del sidebar derecho.
• Renombra los 6 Variants como: “search”, “favorite”, “bike”, “message”, “account” y “map”.
• Selecciona el componente, que seguramente se llamará “Component 1”, y renombrarlo como “Icon” utilizando la combinación de teclas Control + R en Windows o Command + R en macOS.

Ya tenemos creado el primer componente de nuestro navigation bar, pero antes de crear el siguiente componente te invito a organizar las 6 variantes de Icon.

• Selecciona todos los Variantes y pulsa la combinación de teclas Alt + V o pincha en el icono Align vertical centers ubicado en la pestaña Design del sidebar derecho, para alinear verticalmente los 6 iconos.
• Sin perder la selección de los iconos usa la combinación de teclas Alt + Shift + H o Alt + Maýusculas + H o pincha en los iconos More options y seguidamente en Distribute horizontal spacing para distribuir el espacio horizontal entre ellos. Si quieres puedes ajustar el espacio entre ellos con 32 px de separación.

Los dos pasos anteriores puedes ignorarlos, pero si los haces tus diseños de Figma se verán más profesionales, bonitos y estarán bien organizados.

Esto te ayudará a ti y a la gente de tu equipo o que colabore contigo en el proyecto.

Botón de sección

El siguiente elemento que vamos a crear es un botón básico que tendrá en su interior un icono y un texto, será un componente con 3 Variants.

• Pincha en la pestaña Assets ubicada en el sidebar izquierdo de Figma y busca el componente Icon que hemos creado en el paso anterior y arrástralo al canvas.
• No cambies el tamaño del icono, déjalo en 24 px de ancho y 24 px de alto.
• Pulsa la Tecla T para activar la herramienta de texto, cuando el cursor cambie de estado pincha sobre el canvas y escribe “Label”. Te sugiero utilizar la fuente Source Sans Pro, con los parámetros Regular, tamaño de 13 px y Auto como alto de línea.
• Crea un Auto Layout con el icono y la cadena de texto, selecciona los dos elementos y pulsa la combinación de teclas Shift + A o Mayúsculas + A.
• Renombra el Auto Layout como “default”, utiliza cualquiera de los métodos que ofrece Figma.
• Selecciona el frame “default” y desde el módulo Auto layout ubicado en la pestaña Design del sidebar derecho cambia el valor del Spacing between items, déjalo en 4 px. Ajusta la dirección y alineación de los elementos como Vertical direction y Center alignment.
• Sin salir del módulo Auto layout introduce el valor el valor de 12 en el campo Vertical padding, con ello nuestro Auto Layout tendrá 12 píxeles en el Top-padding y el Bottom-padding.
• Crea un componente a partir del frame “default”, selecciónalo y pulsa la combinación de Control + Alt + K. También puedes hacerlo pinchando en el icono Create component ubicado en el centro del toolbar o abriendo el menú contextual y pinchando la opción del mismo nombre.
• Selecciona el componente “default” y crea 2 variantes, puedes pinchar el icono Add variant ubicando en el toolbar o usar la misma opción abriendo el menú contextual y seguir el camino Main component > Add variant.
• Renombra los Variants 2 y 3 como “selected” y “disabled”.
• Cambia el nombre de la propiedad “Property…” por “state” para que tenga relación con los 3 estados de Section icon: por defecto, seleccionado y desactivado.
• Selecciona el icono y el texto de la variante default y desde el módulo Fill ubicado en la pestaña Design del sidebar derecho aplica el color #2B2B2B.
• Cambia el color de los elementos de los otros Variants, usa #1EABF8 para selected y #DDDDDD para disable.
• Renombra este componente para dejarlo listo y seguir con el siguiente, llámalo Section icon.

Con el botón de sección terminado podríamos seguir con la barra de navegación, pero antes vamos a crear un botón flotante que usaremos para simular el menú principal de la aplicación de Airbnb.

Botón flotante

El siguiente no es un componente habitual en las barras de navegación de apps y sitios web. Sólo se usa en casos concretos como el menú de la aplicación de Gmail (iOS y Android) o el ejemplo que hemos elegido para este tutorial, la app de Airbnb.

• Arrastra una nueva instancia del componente Icon al canvas. Recuerda que lo encontrarás en la pestaña Assets del sidebar derecho de la aplicación.
• Selecciona el icono y desde el módulo Icon ubicado en la pestaña Design del sidebar derecho selecciona la variante map abriendo el menú desplegable de la propiedad icon.
• Activa la herramienta de texto e introduce la cadena “Abrir mapa”. Utiliza Source Sans Pro, la misma fuente que usamos en el componente anterior, con los parámetros del texto SemiBold, tamaño de 13 px y Auto como alto de línea.
• Selecciona el texto y el icono y aplica el color #FFFFFF (blanco).
• Sin perder la selección crea un Auto Layout con los dos elementos (texto + icono).
• Selecciona el Auto Layout y desde el módulo Fill aplica el color de fondo #2B2B2B (casi negro).
• Desde el módulo Auto layout edita los siguientes parámetros:
  • Horizontal direction, para colocar horizontalmente sus dos elementos.
  • Center alignment, para centrar los elementos de su interior de forma horizontal y vertical.
  • Spacing between items con 4, para separar texto e icono con 4 píxeles.
  • Y 16, 12, 4, 4 (px) como Left padding, Right padding, Top padding y Bottom padding.
• Aplica bordes redondeados al Auto Layout desde el módulo Frame ubicado en la pestaña Design, introduce 100 px en el campo Corner radius.
• Crea un componente con el Auto Layout y cambia el nombre genérico por Map button.

Barra de navegación

Algunos de los pasos para diseñar la barra de navegación no los detallaré demasiado porque no quiero repetir tanta información, si te quedas con dudas puedes dejar tus preguntas en un comentario, justo debajo del post.

• Arrastra una instancia del componente Section icon al canvas.
• Duplica 4 veces dicha instancia para obtener 5 botones de sección, puedes hacerlo:
  • Utilizando la combinación de teclas Control + D.
  • Desde el icono Main menu ubicado en el toolbar siguiendo el camino Edit > Duplicate.
  • O con mi acción favorita, sobrevolar el elemento con el cursor, pulsar la tecla Alt en Windows y arrastrar el duplicado hacia un lado.
• Renombra los labels o etiquetas de las 5 instancias: Explorar, Favoritos, Rutas, Mensajes y Perfil.
• Cambia los iconos de las 5 instancias:
  • “search”, para Explorar.
  • “favorite”, para Favoritos.
  • “bike”, para Rutas.
  • “message”, para Mensajes.
  • “account”, para Perfil.
• Selecciona los 5 botones de sección para alinearlos de forma horizontal.
• Crea un Auto Layout con ellos y cambia el nombre del frame por Bottom navigation.
• Define con valor 0 el espacio entre los elementos del Auto Layout (Space between items).
• En el campo Horizontal padding introduce el valor 4 px.
• Selecciona los 5 elementos y aplica el comportamiento Fill desde el pulldown Horizontal resizing.
• Crea un componente seleccionando el Auto Layout Bottom navigation.
• Vamos a añadir el botón flotante a la barra de navegación, desde la pestaña Assets arrastra a su interior una instancia de Map button.
• Para mantener los elementos ordenados ubícalo en la primera posición, justo a la izquierda del botón “Explorar”.
• Selecciona el botón flotante y pulsa el icono Absolute position para hacerlo flotar sobre la barra de navegación.
• Ajusta su ubicación pulsando los botones Align horizontal centers y Align top.
• Por último introduce -48 px en el campo de la coordenada Y para ubicarlo por encima del menú de navegación con una separación de 16 px.

Muy bien, terminamos de diseñar la barra de navegación de nuestra app.

Ya podríamos montar el prototipo pero antes de hacerlo vamos a crear los últimos componentes, no forman parte del menú de navegación pero nos servirán para mostrar el funcionamiento del menú y para mejorar la experiencia de usuario.

Pantalla de sección

Con este componente vamos a simular el acceso a los cinco apartados principales de nuestra aplicación.

• Pulsa la tecla F para crear un frame en el canvas, el tamaño del mismo será de 360 x 720 px.
• Crea una cadena de texto de color #2B2B2B en su interior y escribe simplemente “Sección”. En mi caso utilicé la fuente Source Sans Pro, con los parámetros SemiBold, tamaño de 34 px y Auto como alto de línea.
• Cambia el color de fondo del frame, utiliza el #FFFFFF (blanco). renómbralo como Section.
• Con la misma fuente crea otra cadena de texto sobre el canvas, escribe “Más de 2904 rutas para descubrir” y aplícale los siguientes parámetros: Regular, tamaño de 14 px y Auto como alto de línea. Selecciona el número 2904 y aplica el weight SemiBold.
• Pulsa la tecla F para crear un rectángulo de 56 x 4 px, introduce el valor 100 en el campo Corner radius.
• Edita el color del fondo desde el módulo Fill introduciendo el código HEX #DCDCDC (gris).
• Cambia el nombre del rectángulo por line.
• Selecciona el rectángulo y la cadena de texto “Más de 29…” y crea un AutoLayout, renómbralo como Tirador.
• Ajusta la posición de sus elementos como Center alignment.
• Introduce el valor 16 en el campo Spacing between items para ajustar la separación entre el rectángulo y la cadena de texto.
• Edita el campo Vertical padding introduciendo un valor de 16 px.
• Selecciona el frame Tirador y ubícalo en el centro del margen superior del frame Section, para ello pulsa los iconos Align horizontal centers y Align top, recuerda que los tienes justo debajo de la pestaña Design en el sidebar derecho de Figma.
• Configura sus Constraints con Scale en el campo horizontal y Top en el campo vertical para que se adapte al ancho del frame Section siempre pegado al margen superior.
• Oculta el frame Tirador pulsando el icono ojo que tienen a su derecha todos los ítems de las páginas del archivo en la pestaña Layers de sidebar izquierdo.
• Selecciona el frame Section y crea un componente del mismo nombre.

Mapa

El último componente que vamos a crear es la Pantalla de mapa. En una aplicación real lo más habitual sería utilizar un mapa interactivo con tecnología de Google, pero para dar más de “estilo” al prototipo que vamos a montar en este tutorial nos vale con un frame contenedor, un título y una imagen de fondo.

El diseño de este componente es prácticamente igual al que hicimos en el paso anterior. Podríamos duplicarlo y hacer los cambios para obtenerlo, pero vamos a crearlo desde cero. Si deseas aprender a usar Figma estoy seguro que valorarás la siguiente explicación.

• Pulsa la tecla F para crear un nuevo frame de 360 x 720 píxeles.
• Selecciona el frame y cambia su nombre, llámalo de Map.
• Edita el color de fondo del frame, utiliza el #FFFFFF (blanco).
• Crea una cadena de texto en su interior y escribe “Mapa”, aplica el mismo formato que usamos en el componente Pantalla de sección.
• Selecciona el frame para incrustar una imagen de fondo. En mi caso utilicé unas líneas topográficas, las puedes descargar en Freepik, es un recurso gratuito y está disponible en formatos EPS y JPG. Ajusta la opacidad del bitmap en 20%.
• Selecciona el frame y crea un componente.

Quizás te parezca excesivo crear componentes para estos dos elementos. Prefiero hacerlo porque si en algún momento surge la necesidad de hacer algún cambio visual en el prototipo que vamos a crear en el paso siguiente, editando el componente principal podremos cambiar rápidamente todas sus instancias. Lo que busco siempre es optimizar el tiempo de trabajo.

Antes de seguir quiero preguntarte algo. ¿Te interesa leer artículos con consejos y estrategias para mejorar la experiencia de usuario de tus prototipos?

Cómo crear el prototipo de una barra de navegación

Con todos los componentes diseñados podemos dar el último paso del tutorial, crear el prototipo de la barra de navegación.

Recuerda que no existe una única forma de crear prototipos, en esta clase compartiré mis sugerencias para que puedas montar un prototipo rápido, optimizado y efectivo. Si tienes otra idea y quieres compartirla por favor déjala en un comentario. Siempre lo digo, todos aprendemos de todos.

Pantallas

Antes de crear las interacciones de un prototipo hay que montar sobre el canvas las distintas pantallas mismo.

• Crea un frame de nombre Screen en el canvas de la misma página de Figma donde hayas creado el componente Bottom navigation. El tamaño del frame debe ser de 360 x 720 px.
• Arrastra a su interior una instancia del componente Section, ajusta su ubicación para que quede alineada en el centro del frame de forma horizontal y vertical.
• Introduce también una instancia del componente Bottom navigation y ajusta su alineación en el centro horizontal y el margen inferior del frame Screen.
• Comprueba la organización de las capas o layers del frame Screen, procura que el componente Bottom navigation quede por encima del componente Section.
• Crea bordes redondeados en el frame Screen, introduce un valor de 16 px.
• Duplica 4 veces el frame Screen.
• Selecciona los 5 frames para cambiar su nombre en lote, llámalos Screen en orden descendente: Screen 01, Screen 02, etc.
• Edita la cadena de texto de las instancias del componente Section con “Explorar”, “Farotivos”, “Rutas”, “Mensajes” y “Perfil”.
• Arrastra al interior del frame Screen 01, en la capa más profunda, una instancia del componente Map, ajusta su ubicación en el centro del frame.
• Oculta el botón flotante de las instancias del componente Bottom navigation en los frames Screen 02, 03, 04 y 05.
• Activa el estado “selected” de los botones del componente Bottom navigation en los frames Screen 01, 02, 03, 04 y 05. Por ejemplo, el frame Screen 01 corresponde al apartado Explorar, por lo tanto el botón con el estado “selected” activado será el que pone Explorar.
• Duplica el frame Screen 01 y renombra la nueva copia como Screen 06.
• Dentro del frame Screen 06:
  • Edita la coordenada Y de la instancia del componente Bottom navigation en 768 px y cambia su opacidad dejándola en 0 %.
  • Haz visible el frame Tirador del componente Section.
  • Mueve hacia abajo el frame Section, ajusta su coordenada Y en los 652 px.

Conexiones entre pantallas

Ahora toca «conectar» las distintas partes del prototipo.

• Ahora vamos a crear las conexiones del prototipo de la barra de navegación, activa la pestaña Prototype ubicada en el sidebar derecho de Figma.
• Desde el componente principal Bottom navigation crea conexiones entre:
  • Los 5 botones hasta los frames Screen 01, 02, 03, 04 y 05.
  • En todas ellas aplica el parámetro Instant.
• Crea otra conexión desde el botón flotante del Bottom navigation del frame Screen 01 con el frame Screen 06. Ajusta los parámetros Smart animate, Ease out y 75 ms.
• Con los mismos parámetros crea la última conexión del prototipo desde la instancia del componente Section del frame Screen 06 y el frame Screen 01.
• Selecciona el frame Screen 01 y desde el menú contextual activa la opción Add starting point para indicar a Figma cuál será el inicio del prototipo. Por defecto se llamará “Flow 1” pero puedes cambiar su nombre haciendo doble clic sobre el mismo.

¡Enhorabuena, ya tienes el prototipo creado!

Tutorial en vídeo para crear una barra de navegación

Aquí te dejo el vídeo del tutorial que compartí en mi canal de YouTube, reprodúcelo y sigue mis indicaciones para crear tu barra de navegación.

El vídeo estará disponible en breve.
Mientras tanto puedes buscarlo en mi canal de YouTube.
Gracias por tu paciencia.

Barra de navegación en Figma Community

Si deseas utilizar el componente navigation bar 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:

• Dominar la herramienta AutoLayout ajustando todos sus parámetros.
• Utilizar componentes, las instancias y sus variantes.
• Usar galerías de iconos externas de los diseños.
• Optimizar los prototipos de Figma.
• Controlar la alineación de componentes y elementos en el canvas.
• Renombrar múltiples elementos.