Mapa y menú de navegación en Figma

Contenido del curso

No sé dónde empezar

Introducción a Figma y Diseño Básico

Organización de Proyectos

Componentes y Estilos

Herramientas Avanzadas

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:52

Mapa y menú de navegación en Figma

Curso de Figma

Clase 8 de 22

Clase 8 / 22

Recursos

Diseñar un mapa interactivo y un menú de navegación coherente en Figma es más rápido cuando combinas la pen tool con plugins como Google Maps y Material Symbols. Aquí aprenderás a trazar una ruta sobre un mapa real y a integrar íconos personalizables para una app de senderismo, sin partir desde cero.

¿Cómo insertar un mapa real dentro de un frame en Figma?

Para ubicar geográficamente una caminata, conviene apoyarse en un plugin que traiga el mapa listo y te ahorre dibujarlo manualmente.

Abre la barra de acciones con Command+K, entra a Plugins y Widgets, y busca Map Maker Free. El plugin detecta tu ubicación, renderiza un mapa de Google y lo inserta directamente en tu frame con un pin de localización incluido [3:00].

¿Qué plugin sirve para insertar mapas en Figma? Map Maker Free y Google Maps. Ambos generan un mapa renderizado en segundos a partir de una dirección, listo para insertarlo como imagen editable en tu frame.

Una vez insertado, ajusta el tamaño y céntralo dentro del frame para que sirva como base del recorrido que vas a trazar encima.

¿Cómo dibujar un sendero sobre un mapa con la pen tool?

Con el mapa ya colocado, presiona la tecla P para activar la pen tool y comienza a trazar el recorrido punto por punto siguiendo las calles del mapa [4:10].

Para que la ruta se vea bien sobre el mapa:

Cambia el stroke a un color claro como F7F4ED.
Sube el grosor a 8 para que el trazo destaque sobre las calles.
Mueve el vector dentro del frame si quedó por fuera al dibujarlo.
En la configuración del stroke, cambia el join a ángulo suave para evitar puntas duras en las curvas.

El resultado es una línea blanca continua que sigue el recorrido sobre el mapa de Google.

¿Cómo aplicar outline stroke para crear un borde doble?

Aquí viene la parte interesante. Con el trazo seleccionado, usa Command+Option+O para ejecutar outline stroke [5:30]. Este comando convierte la línea en un vector cerrado, dejando de ser un stroke y volviéndose un relleno.

Una vez convertido, agrégale un nuevo stroke interno con tu color verde secundario y un grosor de 2. Así consigues una ruta con relleno claro y borde verde, mucho más legible visualmente.

Para cerrar la ruta, presiona O y crea dos círculos de 16x16 que marquen inicio y fin:

El punto de inicio con fill blanco y stroke de 3 en color de referencia.
El punto de finalización con relleno verde oscuro.

¿Cómo usar Material Symbols para crear íconos consistentes?

Dibujar íconos uno por uno consume tiempo y rompe la consistencia visual. Google ofrece un plugin gratuito llamado Material Symbols que resuelve ambos problemas [7:20].

Llámalo con Command+K, escribe Material y aparecerá en los primeros resultados. El plugin te permite personalizar cada ícono antes de insertarlo:

Estilo outline, redondo o relleno.
Diferentes pesos de trazo.
Tema oscuro o claro según tu interfaz.
Tamaño en DP (density points), que para este ejercicio funcionan como píxeles.

Configura los íconos a 40 DP en dark theme para que coincidan con tu paleta de trabajo.

¿Qué son los DP en diseño de íconos? Son density points, una unidad de medida que adapta el tamaño del ícono según la densidad de píxeles de la pantalla. Para diseño en Figma se comportan como píxeles regulares.

¿Qué íconos necesitas para un menú de navegación?

Un menú de app de senderismo suele tener cuatro o cinco secciones. Cada una se representa con un ícono que el usuario reconoce de inmediato. Para esta app puedes buscar:

Search: la lupa para la sección de exploración.
Group: representa la comunidad de usuarios.
Location: el pin para la sección de navegación.
Saved: el marcador para senderos guardados.

Si un ícono se inserta a un tamaño distinto al que necesitas, selecciónalo y ajusta la propiedad optical size para que Google adapte el diseño automáticamente al nuevo tamaño.

Con esto tienes cuatro íconos coherentes entre sí, alineados en estilo y peso, listos para tu menú inferior.

¿Por qué combinar pen tool y plugins acelera el diseño en Figma?

La pen tool te da control total para trazos personalizados como rutas o caminos únicos, mientras que plugins como Material Symbols garantizan consistencia en elementos repetibles como íconos del sistema.

Esta combinación cubre dos necesidades opuestas del diseño UI: personalización donde importa (la ruta del sendero) y estandarización donde aporta velocidad (los íconos de navegación).

Ahora te toca a ti: crea en Figma el camino que más disfrutes cerca de donde vives o la ruta que haces hacia tu trabajo, y arma su menú con Material Symbols. Comparte tu versión en los comentarios para verla dentro de tu proyecto.