Figma para UX/UI: 11. Layout Guide - jonmircha

Sobre esta lección

En este video del Curso de Figma para UX/UI, aplicamos el concepto de las Grids en Figma mediante su herramienta de Layout Guide. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción a la aplicación práctica de Grids y Layout Guides. 2. 0:00:26 - Repaso: Uso de la herramienta Frame (tecla F) y categorías de dispositivos. 3. 0:01:21 - Referencias de anchos de pantalla y configuración recomendada para 5 tamaños (Smartwatch, Mobile, Tablet, Desktop, Wide Screen). 4. 0:03:26 - Ubicación del panel de Layout Grid en el inspector de propiedades. 5. 0:04:02 - Diferencia entre crear una Grid manual y aplicar estilos predefinidos (Librerías). 6. 0:05:08 - Personalización de Grids: Tamaño de cuadrícula, color y opacidad. 7. 0:05:46 - Superposición de múltiples guías (Grids, Columnas y Filas) en un mismo Frame. 8. 0:06:51 - El sistema de cuadrícula de 8 puntos (8-Point Grid) aplicado a los 5 tamaños. 9. 0:07:11 - Configuración práctica para Smartwatch (XS): 2 columnas, 8px margen, 16px gutter. 10. 0:07:48 - Configuración práctica para Mobile (SM): 4 columnas, 8px margen, 16px gutter. 11. 0:08:11 - Configuración práctica para Tablet (MD): 8 columnas, 8px margen, 16px gutter. 12. 0:09:03 - Configuración práctica para Desktop (LG): 12 columnas, 72px margen, 16px gutter. 13. 0:09:35 - Configuración práctica para Wide Screen (XL): 12 columnas, 104px margen, 16px gutter. 14. 0:11:15 - Cómo convertir guías manuales en Estilos Reutilizables (Create Style). 15. 0:12:47 - Nomenclatura de tallas (XS, SM, MD, LG, XL) inspirada en frameworks como Bootstrap. 16. 0:14:52 - Gestión de estilos globales desde el lienzo vacío (Panel lateral derecho). 17. 0:15:25 - Cómo editar y renombrar estilos existentes de forma masiva. 18. 0:17:15 - Ventajas de los estilos: Herencia automática de cambios en múltiples pantallas. 19. 0:18:55 - Conceptos de programación aplicados al diseño (Abstracción y reutilización). 20. 0:22:01 - Desvincular estilos (Detach Style) para crear variaciones nuevas (Ejemplo XXL). 21. 0:24:41 - Organización avanzada: Uso de carpetas, eliminación y duplicación de estilos. 22. 0:25:57 - Cierre y avance sobre estilos de color y tipografía. 🖤 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 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