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

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-u...
📝 Í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/8Q99q0Rq...


🦊 Visita mi sitio web https://jonmircha.com
🔔 Suscríbete al canal    / 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