Figma para UX/UI: 19. Maquetando UI en Figma - jonmircha

Sobre esta lección

En este video del Curso de Figma para UX/UI, comenzamos a maquetar Interfaces de Usuario en Figma. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción: Objetivos de la sesión y preparación del frame "Mockup" (tamaño XL). 2. 0:01:03 - Aplicación de la *Layout Guide* : Uso de la rejilla de columnas personalizada. 3. 0:01:18 - *CONSTRUCCIÓN DEL HEADER (CABECERA).* - 0:01:25 - Implementación del Menú Principal: Arrastrar instancias de enlaces y uso de *Auto Layout* (24px de espaciado). - 0:03:10 - Creación del Menú de Redes Sociales: Escalado de iconos y técnica de intercambio rápido de instancias ( *Instance Swapping* ). - 0:06:40 - Logotipo: Uso de la herramienta *Scale (K)* para redimensionar el componente sin deformarlo. - 0:08:15 - Estructura final: Alineación tipo *Space Between* mediante Auto Layout y creación del fondo (BG) traslúcido. 4. 0:12:30 - *CONSTRUCCIÓN DEL HERO SECTION.* - 0:13:30 - Inserción de imagen: Uso del plugin *Pexels* directamente en Figma y aplicación de una capa negra de opacidad (50%). - 0:15:30 - Títulos: Creación de contenedores dinámicos con Auto Layout para el efecto de "bloque de color" detrás del texto. - 0:19:30 - Agrupación y centrado del bloque Hero respecto al contenedor principal. 5. 0:21:00 - *CONSTRUCCIÓN DE LA SECCIÓN DE SERVICIOS.* - 0:22:10 - Tarjetas de servicio: Escalado proporcional de componentes "Card Icon". - 0:23:45 - Personalización: Edición de etiquetas (Strategy, Creative, etc.) y cambio de iconos vectoriales. - 0:24:45 - Alineación: Uso de espaciado cero entre tarjetas para un diseño compacto. - 0:26:35 - Botón de llamada a la acción (Learn More) y texto de párrafo. 6. 0:28:55 - *ORGANIZACIÓN DE CAPAS (TIPS PARA DESARROLLO).* - Recomendación sobre el nombramiento adecuado de contenedores (IDs/Clases) para facilitar el trabajo a los desarrolladores Frontend. 7. 0:29:30 - Conclusión y avance de la siguiente clase (Testimonios, Estadísticas y Footer). 🖤 Recursos de la clase: ⚫️ Duplica este Figma para seguir el curso 👉🏻 https://www.figma.com/design/8Q99q0RqzFXB2YIbbWNXBX/Dise%C3%B1o-UI-en-Figma 🦊 Visita mi sitio web https://jonmircha.com 🔔 Suscríbete al canal https://youtube.com/jonmircha 🌮 ¿Me invítas un taco? https://www.paypal.me/jonmircha 👉🏻 Mi Taller de IA Minimalista - https://jonmircha.com/ia-minimalista 👨🏻‍💻 Toma una Mentoría conmigo https://jonmircha.com/mentoria 📫 Suscríbete a mi lista de correo https://jonmircha.com/newsletter #jonmircha #uxui #figma