Componente de menú hamburguesa para Figma: 840 variantes

Visión General del Componente

Usa patrones de menú hamburguesa para organizar navegación móvil compacta y destinos secundarios. Deja claro el estado y la siguiente acción para que el componente se entienda de un vistazo. Alinea las etiquetas y la jerarquía visual con la pantalla que lo contiene.

Ahorrando espacio en pantalla

Diferencia los estados abierto y cerrado, agrupa los destinos y ofrece una ruta clara de vuelta a la pantalla actual. Mantén breves las etiquetas y usa el espaciado o los iconos para reforzar el mensaje sin depender solo del color.

Mejorando la experiencia del usuario

En Figma, compara las variantes del componente dentro de una pantalla real del producto. Revisa el espaciado, el contraste y las etiquetas en los estados relevantes y adapta el patrón al sistema de diseño del equipo. Documenta la variante y los estados elegidos para mantener la coherencia entre pantallas.

Ofreciendo navegación flexible

El icono de menú hamburguesa proporciona opciones de navegación flexibles. Puede albergar una variedad de elementos de menú y enlaces, lo que lo hace adaptable a diferentes tipos de contenido y estructuras de sitio. Esta flexibilidad permite a los diseñadores incluir más opciones de navegación sin abrumar al usuario, asegurando que la interfaz permanezca eficiente y fácil de usar. Nuestro UI KIT incluye iconos de menú hamburguesa personalizables que se integran perfectamente en cualquier diseño, proporcionando tanto funcionalidad como estilo.

Tipos y Variantes

Variantes clave para equipos de producto:
- Solo ícono (3 barras, extremos redondeados o rectos), con/sin contenedor.
- Con etiqueta (“Menú”) para mejorar descubribilidad.
- Contenido / Ghost (fondo lleno vs. transparente para controlar contraste).
- Variantes de movimiento: morph a “X”, rotaciones + desvanecidos, o progreso acoplado al cajón.
- Ubicaciones: esquina superior izquierda/derecha o centrado en la barra. Los tokens cubren tamaño, trazo, gap y estados hover/pressed/active en claro/oscuro.

Tamaños, Espaciado y Escala

Escalas recomendadas del botón-ícono: 24 / 32 / 40 px (SM/MD/LG). Mantén el área táctil ≥44×44 px con padding del contenedor, no engrosando el trazo. Usa 1.5–2 px de trazo para legibilidad en pantallas de baja densidad. Deja 8–12 px al borde de la barra de app y alinea con logo y acciones primarias. Si convive con título, conserva la línea base para evitar saltos al alternar estados.

Estados y Comportamiento

Estados: default, hover, focus-visible, pressed, activo (abierto) y deshabilitado. El estado “abierto” debe persistir visualmente (morph a “X” o fondo activo). Acopla el estado del disparador con el cajón: abrir → cajón visible; cerrar → oculto. Guía de motion: 150–220 ms para morph del ícono y 200–280 ms para entrada/salida del cajón, con curvas cúbicas. Respeta reducción de movimiento con swaps estáticos o transiciones mínimas.

Integración y Uso

Prioriza navegación visible (tabs, bottom nav) para tareas frecuentes; usa el burger para destinos secundarios. Evita múltiples disparadores. Si hay 2–3 destinos críticos, expónlos en la app bar o en pestañas y deja el cajón para el resto de enlaces, cuenta y ajustes. En desktop, promociona el cajón a sidebar manteniendo la misma arquitectura de información para no desorientar al usuario entre dispositivos.

Accesibilidad

Incluye una etiqueta textual clara en Figma (p. ej., “Abrir menú”) como nombre accesible. Ofrece foco visible persistente y área táctil grande. Al abrir, mueve el foco al primer elemento del cajón; al cerrar, devuélvelo al disparador. Asegura contraste 4.5:1 del ícono/etiqueta contra la barra. Anuncia el cambio de estado (expandido/colapsado) y evita el scroll del fondo mientras el cajón está activo.

Integración con Figma y Tailwind

Figma: componente con propiedades de tamaño (SM/MD/LG), trazo, extremos (redondo/cuadrado), etiqueta on/off y estado (default/hover/pressed/active). Incluye especificación de motion para morph a “X” y transiciones del cajón. Tokens: nav.burger.size, nav.burger.stroke, nav.burger.bg.active, nav.drawer.overlay. Tailwind: mapear tokens a utilidades sin fijar HTML en la documentación; entregar nombres de estados y tiempos para una implementación fiel.

Buenas Prácticas de Implementación

- Preferir ícono + etiqueta en primeras sesiones o contextos poco familiares.
- Hacer el cajón escaneable: agrupar navegación, utilidades (búsqueda, cuenta) y enlaces secundarios.
- Evitar cambios de layout: reserva espacio para el estado activo y fija la altura de la app bar.
- No usar íconos ambiguos que no remitan a “menú”.
- En entornos enterprise, soportar atajos de teclado y mostrar la pista en el encabezado del cajón.
- Documentar el comportamiento cross-breakpoint (burger → tabs/sidebar) para mantener la IA.