Figma para UX/UI: 20. Maquetando UI en Figma II - jonmircha
Sigue así. Cada lección te acerca más a tu certificado.
Sobre esta lección
En este video del Curso de Figma para UX/UI, seguimos maquetando Interfaces de Usuario en Figma. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción: Objetivos de la sesión para completar la segunda mitad del layout. 2. 0:00:35 - *SECCIÓN DE TESTIMONIOS.* - 0:01:30 - Diseño de cabeceras de sección y líneas decorativas con el color primario. - 0:04:30 - Personalización de tarjetas: Modificación de textos. - 0:05:45 - Ajuste dinámico de cajas de texto con la opción *Auto Width* . - 0:07:40 - Uso del plugin *Pexels* para insertar fotografías de perfil en las instancias. - 0:09:05 - Organización con *Auto Layout* . 3. 0:11:10 - *SECCIÓN DE DATOS ESTADÍSTICOS (Counters).* - 0:12:35 - Escalado de componentes de datos mediante la herramienta *Scale (K)* a 240px. - 0:14:00 - Actualización de iconos (User, Desktop, Cupón, Time) y valores numéricos. - 0:17:50 - Ajuste del fondo de sección y centrado absoluto del contenedor de datos. 4. 0:19:00 - *CONSTRUCCIÓN DEL FOOTER (PIE DE PÁGINA).* - 0:19:40 - Aplicación de la regla de *múltiplos de 8* para el dimensionamiento del pie de página. - 0:21:55 - Uso de la *Layout Grid (XL)* para alinear el contenido del footer con el resto del sitio. - 0:24:40 - Cómo volver a la librería para crear un componente de contacto (Ciudad + Teléfono). - 0:31:00 - Estructura de filas de contenido del footer. 5. 0:38:35 - *AJUSTES FINALES Y RESPONSIVIDAD.* - 0:39:05 - Configuración de *Constraints (Left & Top)* para evitar que los elementos se deformen al redimensionar el frame principal. - 0:40:45 - Limpieza de capas y revisión de la jerarquía visual final. 6. 0:41:20 - Conclusión y reto: Sugerencia de adaptar el mockup actual a una versión móvil. 7. 0:42:25 - Avance: Introducción a wireframes y prototipos en la próxima sección. 🖤 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
Sobre este curso
Aprende Figma la aplicación web que te permite crear diseños y prototipos de UI y UX.
Lo que aprenderás en este curso:
- Comprender los principios del diseño gráfico profesional
- Dominar las herramientas de diseño y edición de imágenes
- Crear composiciones visuales atractivas y efectivas
- Diseñar logotipos, cartelería y material publicitario