Contenido del Curso
UI/UX con Figma
UI/UX con Figma
Variantes
¿Qué son las variantes?
Las variantes te permiten agrupar múltiples variaciones de un componente, como diferentes estilos o estados de un botón, en un solo contenedor. Por ejemplo, las versiones oscura, clara y verde de un botón de búsqueda se pueden agrupar en un conjunto de variantes, simplificando la gestión y el uso de activos.
Creando un conjunto de variantes
- Selecciona un grupo de componentes.
- Ve al panel de Diseño y elige Crear Conjunto de Componentes para agrupar los componentes en una sola variante.
- Usa barras (por ejemplo, botón/oscuro/por defecto) para organizar propiedades como estilo (oscuro, claro, verde) y estado (por defecto, al pasar el ratón).
- Renombra las etiquetas de las propiedades para mayor claridad, como cambiar "Propiedad 1" a Estilo y "Propiedad 2" a Estado.
Gestionando variantes
Se pueden crear instancias de variantes copiando cualquiera de ellas. Las propiedades de cada instancia se pueden ajustar desde el panel de Diseño, permitiéndote cambiar entre diferentes estilos o estados. Para agregar más variantes, usa el icono de más debajo del conjunto de variantes para incluir variaciones adicionales.
Creando interacciones
Para prototipos interactivos, conecta un botón por defecto a su estado al pasar el ratón en la pestaña de Prototipo. Establece el Disparador en "Mientras se pasa el ratón" y la Animación en "Disolver" con una duración de 500ms. Usa el botón de Vista Previa cerca del punto de inicio del flujo para probar las interacciones directamente.
Esta estructura simplificada hace que el proceso sea más fácil de entender y seguir. ¡Déjame saber si necesitas más ajustes!
¡Gracias por tus comentarios!