Figma para UX/UI: 17. Creando Componentes - jonmircha

Sobre esta lección

En este video del Curso de Figma para UX/UI, revisamos como crear Componentes en Figma. 🎓🤓 Certifícate en UX/UI 👉🏻 https://jonmircha.com/certificacion-ux-ui 📝 ÍNDICE: 1. 0:00:00 - Introducción: Concepto de componente como patrón visual repetitivo. 2. 0:00:48 - *FORMA 1: Crear un Componente Simple (Logotipo).* - 0:01:25 - Cómo identificar un *Componente Padre* (icono de florecita/rombo relleno) vs. una *Instancia* (rombo vacío). - 0:02:45 - El panel de *Assets*: Organización y reutilización de elementos mediante "Drag and drop". - 0:04:30 - Ventajas de la herencia: Cómo los cambios en el padre afectan automáticamente a todas las copias. - 0:06:55 - Restricciones de edición en las instancias y libertad de cambios estéticos locales. 3. 0:08:45 - *Nomenclatura y Arquitectura de Información.* - 0:09:00 - Análisis de librerías profesionales (Material Design y Apple). - 0:10:50 - El uso de la *Diagonal ( / ) * para crear subcarpetas automáticas en la biblioteca. 4. 0:11:10 - *FORMA 2: Crear Múltiples Componentes (Librería de Iconos).* - 0:11:45 - Renombrado masivo de iconos para organización interna (`Icons / nombre_icono`). - 0:13:50 - Uso de la opción *"Create Multiple Components"* para agilizar el trabajo. - 0:15:40 - Tip: Cómo activar la visualización de "Subfolders" en el panel de Assets. 5. 0:18:15 - *FORMA 3: Crear un Set de Componentes con Variantes (Enlace de Navegación).* - 0:19:15 - Creación desde cero de un enlace con estilos de texto y color vinculados. - 0:21:10 - Configuración de estados: *Normal, Hover y Active* . - 0:22:15 - Uso de la opción *"Create Component Set"* (borde punteado morado). - 0:23:55 - Definición de propiedades y valores (Ej: state = normal). - 0:26:30 - Cómo "switchear" o cambiar entre variantes desde el panel de propiedades en una instancia. - 0:27:00 - Añadir nuevas variantes a un set existente (ej. estado disabled). 6. 0:31:00 - Conclusión y próximos pasos: Creación de tarjetas y organismos más complejos. 🖤 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