Figma para UX/UI: 12. Introducción a Auto Layout - jonmircha

Sobre esta lección

En este video del Curso de Figma para UX/UI, damos una introducción al concepto de Auto Layout en Figma. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción al concepto de Auto Layout y su importancia en Figma. 2. 0:01:05 - Recursos recomendados: Guía oficial de Figma y Playgrounds interactivos. 3. 0:01:53 - Analogía con el código: Auto Layout como implementación de Flexbox y CSS Grid. 4. 0:03:08 - Diferencia técnica entre sistemas unidimensionales (Flexbox) y bidimensionales (Grid). 5. 0:05:01 - Atajos de teclado esenciales: Shift + A para crear y Alt + Shift + A para eliminar Auto Layout. 6. 0:05:35 - Activación del panel de Auto Layout tras seleccionar múltiples elementos. 7. 0:06:50 - Modos de alineación: Vertical, Horizontal y Wrap (Envolvente). 8. 0:07:18 - Configuración de cuadrículas (Beta): Definición de filas, columnas y espaciados. 9. 0:07:49 - Ajuste de espaciado horizontal, vertical y márgenes internos (Padding). 10. 0:08:33 - Propiedades de dimensionamiento: Ancho/Alto fijo, Mínimos y Máximos. 11. 0:09:40 - Identificación visual: Iconos de Frames de Auto Layout en el panel de capas. 12. 0:10:48 - Función "Hug Contents": Adaptar el contenedor automáticamente al tamaño de los elementos hijos. 13. 0:12:48 - Control de espaciado entre elementos y alineación de ejes (Justify y Align). 14. 0:13:50 - Propiedad "Clip Content": Simulación de desbordamiento (Overflow: hidden). 15. 0:14:38 - Ejemplo práctico: Aplicación en interfaces de streaming tipo Netflix. 16. 0:15:43 - Resolución de problemas comunes: Por qué los elementos se deforman al cambiar de eje. 17. 0:16:30 - Ajuste de propiedades "Fill Container" vs "Fixed Width/Height". 18. 0:18:38 - Comparativa: Uso de la opción Wrap vs la opción Grid (Fase Beta). 19. 0:19:44 - Equivalencias para desarrolladores Frontend: Flex-direction y Flex-wrap. 20. 0:22:50 - Conclusión y avance: Próxima clase con ejemplos de UI reales. 🖤 Recursos de la clase: ⚫️ Duplica este Figma para seguir el curso 👉🏻 https://www.figma.com/design/8Q99q0RqzFXB2YIbbWNXBX/Dise%C3%B1o-UI-en-Figma ⚫️ Guía Auto Layout - https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout ⚫️ Playground Auto Layout - https://www.figma.com/community/file/784448220678228461 ⚫️ Curso Flexbox CSS - https://www.youtube.com/playlist?list=PLvq-jIkSeTUbQc3dGsssp8lxAi5npMrys ⚫️ Curso Grid CSS - https://www.youtube.com/playlist?list=PLvq-jIkSeTUY628cyd9LVbXSXi2xG9mUl 🦊 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 Desarrollo Web Minimalista - https://jonmircha.com/taller-minimalista 👨🏻‍💻 Toma una Mentoría conmigo https://jonmircha.com/mentoria 📫 Suscríbete a mi lista de correo https://jonmircha.com/newsletter #jonmircha #uxui #figma