Figma para UX/UI: 13. Aplicando Auto Layout - jonmircha

Sobre esta lección

En este video del Curso de Figma para UX/UI, aplicamos la herramienta de Auto Layout en Figma en ejemplos prácticos de UI. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción: Aplicación de Auto Layout en escenarios reales de UI. 2. 0:00:40 - Recursos: Uso de la librería de iconos *Box Icons* y cómo instalarlos mediante plugins. 3. 0:02:10 - *EJEMPLO 1: Cabecera Móvil (Header).* * 0:02:30 - Alineación de menú hamburguesa, logotipo y opciones. * 0:03:15 - Configuración de ancho fijo (320px) y espaciado automático (Space Between). 4. 0:04:45 - *EJEMPLO 2: Botón Inteligente.* * 0:04:55 - El error común de usar rectángulos vs. la eficiencia del Auto Layout. * 0:06:23 - Creación de un botón dinámico a partir de una sola capa de texto. * 0:07:35 - Regla de oro: Proporción del espaciado (Padding X debe ser el doble de Padding Y). * 0:09:15 - Demostración de adaptabilidad: El botón crece automáticamente según el texto. 5. 0:10:30 - *EJEMPLO 3: Botón con Iconos.* * 0:11:05 - Configuración de alineación y separación entre icono y texto. * 0:12:05 - Inversión de orden de elementos y cambio de dirección (Horizontal a Vertical). 6. 0:13:25 - *EJEMPLO 4: Tarjeta Responsiva (Card).* * 0:13:50 - Estructura de Auto Layouts anidados: Avatar, información de usuario e iconos sociales. * 0:16:45 - Definición del cuerpo de la tarjeta (Card Body) y ajuste de anchos fijos. * 0:18:15 - Reemplazo de formas por imágenes reales. * 0:19:40 - El "truco" de la tarjeta responsiva: Cambio de flujo vertical a horizontal para Desktop/Tablet. 7. 0:21:54 - *EJEMPLO 5: Pie de Página (Footer).* * 0:22:05 - Distribución proporcional de 5 iconos en un ancho de 320px. 8. 0:23:00 - Conclusión sobre la potencia del Auto Layout para agilizar el flujo de diseño. 9. 0:23:45 - Anticipo: Próxima clase sobre "Constraints". 🖤 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