Figma para UX/UI: 18. Creando Componentes II - jonmircha

Sobre esta lección

En este video del Curso de Figma para UX/UI, seguimos creando Componentes en Figma. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción y objetivos: Finalizar los componentes necesarios para el layout de la interfaz. 2. 0:01:25 - *COMPONENTE 1: Tarjeta con Icono (Card Icon).* - 0:01:45 - Construcción visual: Uso de círculos concéntricos, iconos y estilos de trazo (Stroke). - 0:04:15 - Aplicación de estilos de texto (Open Sans 16 Semibold) y línea decorativa. - 0:06:20 - Uso de *Auto Layout* para agrupar y dar espaciado interno a la tarjeta. - 0:07:35 - Creación de variantes para estados: *Normal y Hover* (cambio de color en la línea). - 0:08:45 - Tip: Cómo reestructurar nombres de variantes y propiedades (state = normal/hover). 3. 0:09:55 - *COMPONENTE 2: Botón con Icono (Button Icon).* - 0:10:20 - Técnica de "Botón Inteligente" con Auto Layout para adaptabilidad. - 0:12:15 - Aplicación de proporciones de espaciado realistas y bordes (Stroke). - 0:13:40 - Creación de una variante con inversión de colores para el estado Hover. - 0:15:45 - *Variantes avanzadas:* Cómo transformar un botón en un enlace con icono (Link Icon) dentro del mismo set. 4. 0:22:15 - *COMPONENTE 3: Tarjeta de Testimonio (Card Testimonies).* - 0:22:45 - Uso del plugin *"Lorem Ipsum"* para generar texto de relleno de forma rápida. - 0:24:40 - Diseño del área de imagen (Avatar) y jerarquía de textos (Nombre y Cargo). - 0:26:45 - Organización final mediante Auto Layout y creación del componente padre. 5. 0:28:20 - *COMPONENTE 4: Tarjeta de Datos Estadísticos (Card Data).* - 0:28:55 - Combinación de tipografías Poppins (para números) y Open Sans (para descripciones). - 0:31:05 - Anidación de Auto Layouts para alinear iconos y cifras. - 0:32:30 - *Truco Pro:* Uso de *valores negativos* en el espaciado de Auto Layout para juntar elementos visualmente. 6. 0:33:30 - Revisión final de la biblioteca en el panel de *Assets* . 7. 0:34:40 - Cierre y avance: Preparación para el maquetado final de la interfaz en las próximas clases. 🖤 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