Cuando diseñas una aplicación financiera como Finwise, es inevitable que un mismo componente necesite verse diferente según el contexto. Una fila de transacción no luce igual cuando representa un gasto de tacos que cuando muestra un depósito de salario. La solución más eficiente para este problema son las variantes, una funcionalidad que permite agrupar múltiples versiones de un componente bajo un mismo nombre, evitando duplicaciones innecesarias y manteniendo la consistencia del diseño.
¿Por qué las variantes son mejores que duplicar componentes?
El camino más tentador es crear un componente prácticamente idéntico al original y modificar solo los detalles que cambian. Pero esta estrategia tiene un riesgo claro: si realizas un cambio en el componente de gastos, posiblemente olvides replicarlo en el nuevo componente. Las variantes resuelven esto al mantener todas las versiones dentro de un mismo component set, lo que significa que cualquier ajuste estructural se propaga de forma coherente.
Una variante es simplemente una versión dentro de un componente existente. Al crearla, Figma agrupa ambas versiones bajo un borde punteado, indicando visualmente que pertenecen al mismo set. Del lado derecho aparece un nuevo campo de propiedad donde defines el nombre y tipo de cada variante.
¿Cómo crear una variante para el transaction row? [03:12]
Partiendo del componente de transaction row creado previamente, el proceso es directo:
- Selecciona el nombre del componente en la parte superior.
- Haz clic en el ícono para generar una nueva variante.
- Figma crea automáticamente una copia dentro del mismo set con una propiedad llamada property one.
- Renombra la propiedad como type y asigna los valores: default o gasto para la primera, e income o ingreso para la segunda.
Con la estructura definida, llega el momento de aplicar los cambios visuales. Para la variante de ingreso se necesita:
- Cambiar el color del texto y del monto a brand positive (verde). [04:22]
- Modificar el prefijo del signo negativo al signo de más.
- Actualizar el ícono, reemplazando el de gimnasio por una bolsa de dinero.
- Ajustar el fondo del ícono al mismo tono verde con una opacidad del 20%.
Una vez completados estos ajustes, al ir a cualquier instancia de transaction row en el proyecto, basta con cambiar el tipo de gasto a ingreso para que automáticamente adopte todos los estilos definidos en la variante. Solo resta editar el texto con información como salario, pago de freelance o cualquier otro concepto.
¿Cómo crear un component set desde cero con botones? [06:08]
Para los botones, existe un atajo muy útil. Si ya tienes dos elementos diseñados con las diferencias aplicadas, puedes seleccionar ambos y usar la opción create component set desde el menú desplegable del ícono de componentes. Figma genera automáticamente el set con las propiedades y variantes listas.
En el ejemplo de Finwise, las dos variantes del botón se definen como:
- Default: botón completo con texto e ícono.
- Icon only: versión reducida solo con el ícono.
Al insertar este componente en el diseño, puedes alternar entre ambas variantes directamente desde el panel de propiedades.
¿Cómo bloquear elementos dentro de una variante? [07:30]
Aunque las instancias permiten hacer overrides, hay casos donde no tiene sentido que ciertos elementos sean editables. Por ejemplo, el ícono de la variante de ingreso debería ser siempre el mismo. Para evitar modificaciones accidentales:
- Accede a la variante dentro del componente.
- Selecciona el elemento que quieres proteger en el panel de layers.
- Haz clic en el candado abierto que aparece en la esquina inferior izquierda.
- Al activarlo, el elemento queda bloqueado y deja de ser seleccionable tanto dentro del componente como en sus instancias.
Esta técnica es especialmente útil para mantener la integridad visual del diseño cuando múltiples personas trabajan en el mismo archivo.
¿Qué sigue después de dominar las variantes?
El reto propuesto es aplicar variantes a otros componentes del proyecto como el category row, el tab bar y el header. Cada uno tiene características que podrían beneficiarse de múltiples versiones sin necesidad de duplicar trabajo.
Sin embargo, las variantes no resuelven todos los escenarios. Cuando necesitas mostrar, ocultar o hacer editable un elemento específico sin crear variantes adicionales, entran en juego las propiedades editables, un concepto que complementa perfectamente el sistema de componentes. Comparte en los comentarios cómo aplicaste las variantes en tus componentes y qué criterio seguiste para definir cada versión.
