Esta nueva funcionalidad de Figma está disponible gratis para todos los planes y si sueles usar componentes, te va a flipar.
¡Te van a encantar las variants, ya verás!
Cuando creamos componentes en Figma (sáltate el siguiente párrafo si ya sabes lo que es un componente) a menudo creamos componentes que se parecen entre ellos pero que tienen alguna diferencia. A esto le llamamos variants. Por ejemplo, creamos un botón con fondo verde claro y necesitamos otro que sea igual pero con fondo verde oscuro para el estado hover. En este caso, el botón con fondo verde oscuro sería la variante, el color sería la propiedad y verde oscuro sería el valor. Pero vamos a verlo más en detalle.
Un componente es un elemento que puedes reutilizar y te facilita la tarea de crear y mantener la coherencia en tus diseños. Se pueden crear componentes, por ejemplo, de botones o iconos, y también de diseños más complejos como encabezados o pies de página: de cualquier cosa que diseñemos. Se compone siempre de componente principal y de, como mínimo, una instancia. El primero define las características y la segunda es la copia que reutilizamos.
Que sepas que esto que te voy a contar de las variants es nivel avanzado.
Con las variants, lo que hacemos es agrupar y organizar en un contenedor todos los componentes que tienen características similares.
Propiedades y valores
- Las propiedades son las características que van a cambiar en el componente. Por ejemplo, en un botón, puede ser el color, el tamaño, el estado o si tiene o no un icono.
- Los valores son las opciones que pueden tener las propiedades. Por ejemplo: por defecto, hover, activo, deshabilitado.
Y ahora viene lo bueno: Figma crea un panel donde podemos seleccionar estas propiedades y valores según necesitemos:
¿Y esa brujería cómo la hace?
Pues muy fácil, se lo tenemos que indicar nosotros, nombrando los componentes con una sintaxis específica. Vamos a verlo.
La sintaxis que hace la magia
Los nombres de las variants tienen que seguir esta estructura:
Propiedad1=valor, Propiedad2=valor, Propiedad3=valor
Crear variants
Entonces, al grano: para crear las variants en Figma, sigue estos pasos:
- Crea un componente.
- Ponle un nombre usando la nomenclatura de texto entre barras (/), así: nombre del set de componentes / valor. (Esto es opcional).
- Haz clic en el icono + del panel Variants para añadir la primera variación.
- Figma creará un componente idéntico, con las mismas propiedades, añadirá ambos componentes como variants en un set de componentes y si has usado la nomenclatura de texto entre barras, el texto antes de / se convertirá en el nombre del set de componentes y lo que hayas puesto después serán los valores.
- Haz los cambios que necesites que tenga la variación.
- Y ya estaría.
Usar variants
Lo suyo es que cuando creas variants después las uses en tus diseños.
Para usar las variants en Figma:
- Selecciona el set de componentes que quieras usar en el panel Assets.
- Elige cualquier instancia del set y te la llevas, arrastrando, al canvas.
- Una vez que la instancia esté en el canvas, puedes cambiarla por la variación que quieras, de ese set de componentes, en el panel de propiedades de la derecha.
- Especifica las combinaciones de valores que quieras para esa instancia. Mola mucho poder usar los botones para activar o desactivar las propiedades de on/off.
Si quieres trastear un poco, aquí tienes un archivo para probar las variants. Espero que disfrutes jugando con las variants, como si fuera un videojuego, como yo lo hago.
En 3ymedia School estamos creando un curso de microlearning y explico a fondo y paso a paso cómo crear y usar estas variants en Figma. Si quieres que te avise cuando lo terminemos de grabar, montar, poner la musiquita de fondo y todo eso, suscríbete a la newsletter.
Mientras tanto, puedes dejar un comentario aquí con tu experiencia usando variants en Figma.
