Figma para UX/UI: 10. Grids - jonmircha

Sobre esta lección

En este video del Curso de Figma para UX/UI, revisamos la importancia del concepto de las Grids en Diseño UX/UI. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción al concepto de Grids (Cuadrículas) en diseño UX/UI. 2. 0:00:41 - Tipos de Grids en Figma: Cuadrícula (Grid), Columnas (Columns) y Filas (Rows). 3. 0:01:21 - Cuándo utilizar Filas y anidación de Grids (Módulo CSS Grid). 4. 0:01:48 - Historia del diseño web: El sistema "960 Grid System" y su relevancia actual. 5. 0:02:30 - Análisis técnico de resoluciones antiguas (1024x768) y márgenes de contenedor. 6. 0:03:20 - Ejemplo visual de maquetación en 12 y 16 columnas (Casos Sony Music y Drupal). 7. 0:04:40 - Evolución de herramientas: De Photoshop e Illustrator a Figma. 8. 0:05:48 - Función de las columnas como referencia para el layout y adaptabilidad. 9. 0:06:27 - Análisis de Wireframes: Cómo las columnas definen la jerarquía y el espaciado. 10. 0:07:27 - Anticipo: Creación de librería de componentes basada en Grids. 11. 0:07:54 - Ejemplo real 1: Diseño de un menú digital (Uso de cuadrículas y filas). 12. 0:08:30 - Ejemplo real 2: Portafolio profesional (Uso de cuadrículas de 16px). 13. 0:09:03 - Relación entre las Grids de Figma y las unidades de medida en código (EMs y REMs). 14. 0:10:02 - Alternancia de sistemas de 3, 4 y 6 columnas en un mismo proyecto. 15. 0:11:02 - Ejemplo real 3: Landing page de veterinaria (Alineación de servicios y formularios). 16. 0:11:58 - Teoría del "8-Point Grid System" (Sistema de cuadrícula de 8 puntos). 17. 0:12:35 - Por qué usar múltiplos de 8: Relación con el sistema binario y consistencia visual. 18. 0:13:00 - Comparativa de compatibilidad de resoluciones: Múltiplos de 8 vs. Múltiplos de 10. 19. 0:14:40 - Cálculo matemático: Divisibilidad de resoluciones Full HD (1920x1080) entre 8. 20. 0:16:30 - Diferencias de implementación práctica entre la capa gratuita y profesional/educativa. 21. 0:17:28 - Cierre y preparación para la implementación práctica. 🖤 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