En este tema, exploraremos cómo utilizar variantes en Figma para crear prototipos más dinámicos y flexibles. Las variantes son una poderosa herramienta que permite a los diseñadores gestionar múltiples estados de un componente dentro de un solo marco, facilitando la creación de prototipos interactivos y realistas.

Las variantes en Figma son diferentes versiones de un componente que pueden representar distintos estados o estilos. Por ejemplo, un botón puede tener variantes para estados como "normal", "hover" y "activo". Esto permite a los diseñadores cambiar entre estos estados sin necesidad de duplicar componentes.

• Componente Principal: El componente original del cual se derivan las variantes.
• Propiedades de Variantes: Atributos que definen las diferencias entre las variantes, como el color, el tamaño o el estado.
• Conjunto de Variantes: Un grupo de variantes que comparten el mismo componente principal.

1. Crear un Componente Principal:

   • Diseña el elemento que deseas convertir en un componente.
   • Selecciona el elemento y conviértelo en un componente usando Ctrl + Alt + K (Windows) o Cmd + Option + K (Mac).

2. Agregar Variantes:

   • Selecciona el componente principal.
   • En el panel de propiedades, haz clic en "Agregar variante".
   • Ajusta las propiedades de la nueva variante según sea necesario (por ejemplo, cambia el color o el texto).

3. Definir Propiedades de Variantes:

   • En el panel de propiedades, define las propiedades que diferencian a las variantes (por ejemplo, estado: normal, hover, activo).

4. Organizar Variantes en un Conjunto:

   • Asegúrate de que todas las variantes estén agrupadas bajo el mismo conjunto de variantes para facilitar su gestión.

Supongamos que tienes un botón con tres estados: normal, hover y activo.

1. Configurar Interacciones:

   • Selecciona una variante.
   • En el panel de prototipado, añade una interacción (por ejemplo, al pasar el ratón, cambiar a la variante "hover").

2. Simular Estados Dinámicos:

   • Usa las interacciones para simular cómo cambia el componente entre sus diferentes estados en respuesta a las acciones del usuario.

Aquí tienes un ejemplo de cómo podrías configurar un botón con variantes en Figma:

Objetivo: Crear un componente de tarjeta con variantes para diferentes estados de selección.

1. Diseña una tarjeta básica con un título y una imagen.
2. Convierte la tarjeta en un componente.
3. Crea variantes para los estados "no seleccionado" y "seleccionado".
4. Define una propiedad de variante llamada selección.
5. Configura interacciones para cambiar entre los estados al hacer clic.

1. Crear Componente:

   • Diseña la tarjeta y conviértela en un componente.

2. Agregar Variantes:

   • Añade una variante para el estado "seleccionado" con un borde más grueso o un color de fondo diferente.

3. Definir Propiedades:

   • Propiedad: selección
     • Variante 1: Selección = No seleccionado
     • Variante 2: Selección = Seleccionado

4. Configurar Interacciones:

   • Al hacer clic en la tarjeta, cambia entre las variantes "no seleccionado" y "seleccionado".

Las variantes en Figma son una herramienta esencial para crear prototipos interactivos y eficientes. Al dominar el uso de variantes, puedes gestionar múltiples estados de un componente de manera organizada y efectiva, mejorando la calidad y la funcionalidad de tus prototipos. En el siguiente módulo, exploraremos técnicas avanzadas de animación para llevar tus prototipos al siguiente nivel.