Figma para UX/UI: 15. Introducción a los Componentes y Estilos - jonmircha

Sobre esta lección

En este video del Curso de Figma para UX/UI, revisamos los conceptos de Componentes y Estilos en Figma. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción a la nueva sección del curso: Estilos y Componentes. 2. 0:00:30 - Definición teórica: ¿Qué es un componente y qué es un estilo? 3. 0:00:53 - Recursos adicionales: Relación con el *Diseño Atómico* y enlaces de referencia. 4. 0:01:40 - Recomendación de clases previas (35, 36 y 37) para profundizar en teoría de UX/UI. 5. 0:02:47 - Definición de Estilos en Figma: Atributos que visten a los componentes (color, tipografía, espaciado). 6. 0:03:36 - Exploración de la interfaz de Figma: Variables, Estilos de efectos (sombra/blur), trazos y rellenos. 7. 0:05:01 - Análisis de los estilos más utilizados: Texto y Colores. 8. 0:05:22 - Presentación del proyecto práctico: Recreación de una captura de pantalla real. 9. 0:06:05 - Estrategia de diseño: Cómo desmenuzar una interfaz antes de empezar a maquetar. 10. 0:07:20 - Tip creativo: Creación de un Moodboard y uso del inspector de elementos en navegadores. 11. 0:09:20 - Uso de Inteligencia Artificial (Gemini/ChatGPT) para extraer tipografías y paletas de colores de una imagen. 12. 0:10:45 - Preparación del archivo: Creación de la "Guía de Estilos" en el frame de Librería. 13. 0:12:40 - Identificación de componentes en la interfaz: Logotipo, menús, botones y Hero Image. 14. 0:13:20 - Aplicación del Diseño Atómico: Átomos, moléculas y organismos en la captura de pantalla. 15. 0:14:35 - Desglose de secciones: Pestañas (Tabs), Testimonios y Tarjetas de estadísticas. 16. 0:15:45 - Análisis del Footer y reutilización de elementos (iconos y enlaces). 17. 0:16:35 - Preparación de recursos: Iconos de redes sociales, teléfonos y logotipos vectorizados. 18. 0:18:20 - Organización final del área de trabajo para la implementación práctica. 19. 0:19:10 - Cierre y objetivos para la siguiente sesión. 🖤 Recursos de la clase: ⚫️ Duplica este Figma para seguir el curso 👉🏻 https://www.figma.com/design/8Q99q0RqzFXB2YIbbWNXBX/Dise%C3%B1o-UI-en-Figma ⚫️ Curso Diseño UX/UI - https://www.youtube.com/playlist?list=PLvq-jIkSeTUYzH3wNAN3wz_kM69CZWcuP 🦊 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