Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Variantes | Prototipado
UI/UX con Figma
course content

Contenido del Curso

UI/UX con Figma

UI/UX con Figma

1. Herramientas Básicas de Figma
2. Creación y Organización de Objetos
3. Creando Visuales
4. Prototipado
5. Enviando Trabajo

book
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!

Verdadero o Falso: Crear múltiples componentes es más eficiente que usar variantes cuando se trata de variaciones de un solo componente.

Verdadero o Falso: Crear múltiples componentes es más eficiente que usar variantes cuando se trata de variaciones de un solo componente.

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6
We're sorry to hear that something went wrong. What happened?
some-alt