Diseñar rutas sobre mapas reales y aplicar íconos profesionales con consistencia visual es una habilidad fundamental para cualquier proyecto de interfaz. En Figma, esto se logra combinando plugins especializados con el dominio del Pen Tool, los strokes y las propiedades vectoriales que ya conoces.
¿Cómo insertar un mapa real dentro de Figma?
Para construir un pequeño mapa que muestre un sendero, lo primero es traer una referencia geográfica real al lienzo. Abriendo la barra de acciones con Command K [01:06] y buscando en la sección de plugins y widgets, encontramos herramientas como Google Maps o Mapmaker Free. Este último genera un mapa del sitio donde te encuentras, con pin de locación incluido.
Una vez insertado el mapa, se redimensiona y se coloca dentro del frame de trabajo. A partir de ahí, el Pen Tool (tecla P) permite trazar punto por punto la ruta deseada sobre las calles del mapa [01:46]. Cada clic define un nodo del vector, y las curvas se ajustan para seguir el recorrido real.
¿Cómo dar estilo visual a la ruta del sendero?
El trazo inicial no tiene relleno visible, así que se le aplica un stroke con un color claro (en este caso el valor hexadecimal #f7f4ed) y un grosor amplio, como ocho píxeles [02:18]. Esto hace que la línea sea evidente sobre el mapa.
Para suavizar las esquinas del trazo, se entra a la configuración del stroke y en la propiedad join se selecciona un ángulo suave [02:55], eliminando las puntas duras en cada curva.
¿Qué es el outline stroke y por qué usarlo?
El siguiente paso clave es convertir ese stroke en un vector independiente mediante el comando Outline Stroke (Command Option O) [03:08]. Al ejecutarlo, Figma transforma el contorno de la línea en un relleno sólido con trayectos vectoriales propios. Esto permite:
- Agregar un stroke interno adicional con otro color, como el verde secundario de la paleta.
- Manipular el vector como una forma cerrada, no como una simple línea.
- Lograr el aspecto visual de una ruta con borde y relleno diferenciados.
Para completar la representación, se añaden puntos de inicio y finalización usando círculos de dieciséis por dieciséis píxeles [03:37]. El punto de inicio lleva relleno blanco con stroke del color de referencia, y el punto de llegada cambia el relleno a verde oscuro.
¿Cómo usar Material Symbols para íconos consistentes?
Cuando se necesitan íconos para un menú de navegación, crear cada uno desde cero no siempre es eficiente. El plugin Material Symbols de Google [04:15] ofrece una biblioteca completa de íconos ya diseñados que se insertan directamente en el lienzo.
Desde Command K, se busca "Material" y el plugin despliega opciones de personalización:
- Estilo: outlined, redondos o rellenos.
- Peso visual: diferentes grosores de trazo.
- Tema: claro u oscuro (dark theme).
- Tamaño: ajustable en DP (density points), equivalentes a píxeles para el ejercicio de diseño.
¿Cómo buscar e insertar íconos específicos?
Cada sección del menú requiere un ícono representativo. Las búsquedas se realizan con términos descriptivos en inglés [05:00]:
- Explorar: se busca search para obtener una lupa.
- Comunidad: la palabra group devuelve el ícono de personas agrupadas.
- Navegación: location muestra el pin de ubicación.
- Guardados: saved entrega el ícono de marcador.
Si un ícono se inserta con un tamaño diferente al deseado, se selecciona y se ajusta la propiedad Optical Size directamente desde el plugin [05:30], y Google recalcula el diseño automáticamente.
El resultado son cuatro íconos visualmente consistentes entre sí, editables en cualquier momento desde las propiedades del plugin. Además, como son vectores, se pueden modificar con las mismas herramientas de edición de nodos si se requiere algún ajuste personalizado.
Si quieres practicar, intenta trazar sobre un mapa real la ruta que haces hacia tu trabajo o tu sendero favorito, y complementa con íconos de Material Symbols para las secciones de tu proyecto. Comparte tu resultado en los comentarios.
