Variantes y propiedades de componentes

Cuando trabajas en proyectos de diseño de interfaces, especialmente cuando colaboras con equipos de desarrollo, la organización y la escalabilidad son cruciales. Figma revolucionó la forma en que manejamos componentes al introducir el sistema de variantes y propiedades, que nos permite consolidar múltiples estados y versiones de un componente en un solo lugar. Esto no solo reduce el desorden en tu panel de componentes, sino que también facilita el mantenimiento y la consistencia en todo tu proyecto.

Antes de las variantes, los diseñadores solían crear múltiples componentes separados para cada estado o variación de un elemento: botón_primario, botón_secundario, botón_hover, botón_disabled, y así sucesivamente. Este enfoque generaba cientos de componentes difíciles de gestionar y que creaban confusión en los equipos. Con el sistema de variantes actual, puedes tener todo eso organizado bajo un único componente maestro con diferentes configuraciones.

Las propiedades de componentes van un paso más allá. Permiten que quienes usen tus componentes puedan personalizar aspectos específicos sin necesidad de detach (separar) el componente. Por ejemplo, puedes definir que un componente de tarjeta tenga una propiedad de "imagen" que muestre u oculte la imagen, otra propiedad para el "número de íconos", y otra para el "contenido del texto". Todo esto manteniendo la conexión con el componente principal.

¿Por qué necesitas dominar variantes y propiedades?

Dominar las variantes y propiedades de componentes te distingue como un diseñador profesional que entiende arquitectura de diseño. Las empresas que trabajan con sistemas de diseño requieren que sus diseñadores puedan crear y mantener componentes reutilizables de manera eficiente. Además, cuando trabajas con design systems (sistemas de diseño), las variantes y propiedades son el pan de cada día.

Imagina que estás diseñando un sistema de diseño para una aplicación bancaria. Tendrás botones de diferentes colores (primario, secundario, éxito, error), diferentes tamaños (pequeño, mediano, grande), diferentes estados (normal, hover, pressed, disabled, loading) y diferentes variantes de texto (con ícono izquierdo, con ícono derecho, sin ícono). Sin variantes, necesitarías crear docenas de componentes separados. Con variantes, todo esto se organiza de manera lógica y manejable.

Anatomía de un componente con variantes

Para entender mejor cómo funcionan las variantes, vamos a desglosar la estructura de un componente de botón con variantes en Figma:

• Component Set (Conjunto de componentes): Es el contenedor principal que agrupa todas las variantes. En el panel de capas, aparece como un carpeta con el ícono de componente.
• Variants (Variantes): Cada versión del componente. Se configuran usando la propiedad "Variant" en el inspector de propiedades.
• Properties (Propiedades): Los diferentes atributos que puedes definir para cada variante, como el color, el tamaño, o el estado.
• Component Properties (Propiedades de componente): Las características personalizables que permites que los usuarios modifiquen.

En la práctica, cuando ves un componente de botón en Figma, su nombre aparecería algo como: Button / Primary / Medium / Default. Esto significa que el componente "Button" tiene una variante "Primary" en la propiedad de "Type", "Medium" en la propiedad de "Size", y "Default" en la propiedad de "State".

Creando tu primer componente con variantes

Vamos a crear un ejemplo práctico paso a paso. Aprenderás a crear un componente de alert o notificación con múltiples variantes y propiedades.

1. Diseña las versiones base: Crea las diferentes versiones de tu componente que将成为 tus variantes. Para una notificación, diseña versiones de: información (azul), éxito (verde), advertencia (amarillo), y error (rojo).
2. Seleciona todos los componentes: Mantén presionado Shift y selecciona todos los componentes que quieres convertir en variantes del mismo conjunto.
3. Crea el component set: Presiona Cmd/Ctrl + Alt + K o haz clic derecho y selecciona "Create component variants". Figma automáticamente los organizará en un component set.
4. Configura las propiedades: En el panel derecho, verás la sección "Variant properties". Aquí puedes agregar o modificar las propiedades para organizar mejor tus variantes.
5. Nombra correctamente: Usa el formato "Nombre / Propiedad1 / Valor1 / Valor2" para una navegación clara. Por ejemplo: "Alert / Type / Success / With Icon".
6. Publica en biblioteca: Si trabajas en equipo, publica el componente en la biblioteca de equipo para que otros puedan acceder a él.

Propiedades de componente: texto, booleanos e instancias

Las component properties son herramientas poderosas que te permiten crear componentes verdaderamente flexibles. Hay tres tipos principales:

1. Text Properties (Propiedades de texto): Permiten que los usuarios cambien el contenido de texto del componente. Por ejemplo, el texto de un botón puede ser "Aceptar", "Enviar", "Cancelar", etc. Sin estas propiedades, tendrías que crear un componente por cada texto posible.

2. Boolean Properties (Propiedades booleanas): Son interruptores de encendido/apagado que muestran u ocultan elementos. Un botón puede tener un ícono a la izquierda, a la derecha, o ningún ícono. Estas propiedades son perfectas para elementos opcionales.

3. Instance Swap Properties (Propiedades de intercambio de instancias): Permiten intercambiar una parte del componente por otra instancia. Por ejemplo, en una tarjeta de producto, podrías querer cambiar el tipo de imagen (horizontal, vertical, cuadrada) usando esta propiedad.

4. Component Properties (Propiedades de componente anidado): Permiten incrustar otros componentes completos dentro del componente principal. Por ejemplo, una barra de navegación podría tener una propiedad que permute entre diferentes componentes de menú.

Trabajando con variantes en el editor

Una vez que tienes tus variantes configuradas, el flujo de trabajo en el editor es intuitivo. Selecciona cualquier instancia del componente y en el panel derecho verás todas las propiedades disponibles organizadas en secciones. Puedes:

• Cambiar entre variantes usando los menús desplegables
• Activar o desactivar booleanos con interruptores
• Escribir texto directamente en las propiedades de texto
• Intercambiar instancias usando las propiedades de swap

Este enfoque mantiene todas las instancias vinculadas al componente maestro, lo que significa que cualquier cambio en el componente principal se propagará a todas las instancias (a menos que hayas hecho overrides específicos).

Auto Layout y variantes: una combinación poderosa

El verdadero poder surge cuando combinas auto layout con variantes y propiedades. Auto layout permite que los componentes se adapten dinámicamente a su contenido, mientras que las variantes proporcionan diferentes configuraciones predefinidas.

Por ejemplo, un componente de "input field" (campo de texto) con auto layout y variantes podría:

• Ajustar su altura automáticamente si el texto es de una o múltiples líneas
• Expandirse o contraerse según el contenido
• Mantener padding consistente sin importar el tamaño del texto
• Adaptarse cuando cambias entre variantes de diferentes tamaños

Para implementar esto correctamente, asegúrate de que tu auto layout esté configurado en el componente base y que las variantes hereden estas configuraciones. Si una variante específica necesita comportamiento diferente, puedes ajustar el auto layout para esa variante particular.

Nombrado y organización de variantes

La organización y el nombramiento de variantes es crucial para la mantenibilidad a largo plazo. Un esquema de nombres consistente facilita la navegación y reduce la confusión, especialmente en equipos grandes.

Además del nombramiento, considera crear una guía de estilo o documentación interna que explique tu sistema de variantes. Esto es especialmente útil cuando trabajas con desarrolladores que necesitarán implementar estas variantes en código.

Prototipado con variantes

Una ventaja menos conocida de las variantes es su integración con el sistema de prototipado de Figma. Puedes crear interacciones que cambien entre variantes de un mismo componente, lo que es extremadamente útil para demostrar diferentes estados de la interfaz.

Por ejemplo, si tienes un componente de "dropdown" con variantes para los estados "closed" y "open", puedes crear un prototipo donde:

1. El usuario hace clic en el dropdown
2. La interacción cambia la instancia de "dropdown closed" a "dropdown open"
3. El prototipo muestra la animación de transición entre variantes

Esto es mucho más limpio que mantener estados separados o duplicar componentes para prototipos.

Errores frecuentes y cómo evitarlos

A continuación, una tabla con los errores más comunes al trabajar con variantes y propiedades, junto con sus soluciones:

Ejercicio práctico: Sistema de botones completo

Vamos a aplicar todo lo aprendido creando un sistema de botones profesional. Este ejercicio te servirá como plantilla para crear tus propios sistemas de componentes.

Propiedades a definir:

• Type (Tipo): Primary, Secondary, Ghost, Destructive
• Size (Tamaño): Small (32px), Medium (40px), Large (48px)
• State (Estado): Default, Hover, Pressed, Disabled, Loading
• Icon Position (Posición de ícono): None, Left, Right

Esto结果 en 4 × 3 × 5 × 3 = 180 combinaciones posibles, pero con nuestro sistema de variantes y propiedades, solo necesitamos crear 60 variantes base (4 × 3 × 5) y dejar las 3 opciones de ícono como una propiedad booleana.

El número total de variantes que necesitas crear es menor porque muchas combinaciones se pueden lograr dinámicamente con las propiedades:

• 4 tipos × 3 tamaños × 5 estados = 60 variantes base
• Las posiciones de ícono se manejan con propiedades booleanas

Esto es significativamente más eficiente que crear 180 componentes separados.

Recursos adicionales para profundizar

El verdadero poder de Figma no está en crear interfaces bonita, sino en crear sistemas de diseño que escala elegantemente. Las variantes y propiedades son el fundamento de esa escalabilidad.

Conclusión y próximos pasos

Dominar las variantes y propiedades de componentes es una habilidad fundamental para cualquier diseñador de interfaces moderno. Te permite crear sistemas de diseño escalables, mantener consistencia en proyectos grandes, y colaborar eficientemente con equipos de desarrollo.

Recuerda los puntos clave:

• Planifica tu arquitectura de variantes antes de crear
• Usa un esquema de nombramiento consistente
• Combina variantes con propiedades para máxima flexibilidad
• Documenta tu sistema para facilitar la colaboración
• Practica con ejemplos reales para internalizar los conceptos

En la siguiente lección de este módulo, exploraremos cómo crear design systems completos que integren todos los conceptos de componentes, variantes, y propiedades que has aprendido.