Cómo diseñar un MENÚ RESPONSIVE en Figma

Описание: En este tutorial en directo, te mostraré cómo diseñar un menú responsive en Figma para nuestro proyecto WP4ux.

Aquí te dejo un resumen detallado de todos los pasos que seguimos:

1) Creación del Ítem del Menú:

Iniciamos creando una cadena de texto con la fuente Inter, tamaño 16 píxeles y altura de 24 píxeles, en color negro.
Generamos un Auto Layout simple y lo nombramos "link menu".
Añadimos padding de 12 píxeles arriba y abajo, logrando una altura total de 48 píxeles.
Convertimos esto en un componente con una propiedad de texto llamada "label".

2) Construcción del Menú Principal:

Con varias instancias del "link menu", creamos un menú principal con secciones como Proyectos, Servicios, Acerca de, Contacto y Blog.
Agrupamos todo en un Auto Layout llamado "Main menu", ajustando el gap horizontal a 16 píxeles.
Añadimos un componente de buscador reutilizando el texto y creando un Auto Layout llamado "input search", con padding de 12 píxeles y un borde gris claro.

3) Diseño del Botón:

Creamos un botón reutilizando una cadena de texto y generando un Auto Layout.
Ajustamos el tamaño del botón, los paddings y los bordes, y lo convertimos en un componente con una propiedad de texto llamada "label".

4) Integración en el Header:

Juntamos todos los elementos (Main menu, Input search y el botón) en un Auto Layout llamado "header".
Centramos todo vertical y horizontalmente, creando variantes para el botón con diferentes tamaños (LG y MD).
Ajustamos los paddings y bordes según fuera necesario.

5) Adición del Logo y Ajustes Finales:

Añadimos un logo de WordPress provisional para completar el header.
Diseñamos la versión responsive del header con un icono de menú hamburguesa, ajustando los paddings y asegurándonos de que todo funcione correctamente en distintos tamaños de pantalla.

Con estos componentes, estamos listos para crear el theme de WordPress que montaremos en nuestro canal WP4ux.

No te pierdas este tutorial y suscríbete para más contenido de diseño UX/UI en Figma.

📌 Más tutoriales para diseñar tu con Figma y WordPress

Parte 1: https://youtube.com/live/TNNIeNs957s?...
Parte 2: https://youtube.com/live/cIeXxMopJyA?...
Parte 3: https://youtube.com/live/y4ILePkfkOE?...
Parte 4: https://youtube.com/live/ey2Q0S0YXL8?...
Parte 5: https://youtube.com/live/EpzJ7TktAGI?...
Parte 6: https://youtube.com/live/-4REenfrQcw?...
Parte 7: https://youtube.com/live/sdhq-83vjNo?...
Parte 8: https://youtube.com/live/ZATLYzvfDgY?...
Parte 9: https://youtube.com/live/z7kEYDa57yM?...
Parte 10: https://youtube.com/live/80Uy1sbc320?...
Parte 11: https://youtube.com/live/VffL9iVrjfg?...
Parte 12: https://youtube.com/live/vJewSQAkwpc?...
Parte 13: https://youtube.com/live/hJv87ILeFSA?...
Parte 14: https://youtube.com/live/ACtciYRk51M?...
Parte 15: https://youtube.com/live/X-dD_g3Xkyk?...
Parte 16: https://youtube.com/live/ZuePrdIwGvo?...
Parte 17: https://youtube.com/live/hz3e6LFeiLg?...
Parte 18: https://youtube.com/live/d7Vd0lR5HUo?...