Variaciones en Figma

Me imagino que ya habrás leído en Twitter que las variants de Figma lo están petando. Esta nueva funcionalidad está disponible gratis para todos los planes de Figma 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 ahora 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.
Button_variants_dark.png
Set de componentes con 24 variants de un botón

Y ahora viene lo bueno: Figma crea un panel donde podemos seleccionar estas propiedades y valores según necesitemos:

https://help.figma.com/hc/article_attachments/360092476153/Button_variant.png

¿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

Double-clicking_on_the_variant_name_in_the_layers_panel_allows_you_to_edit_the_name_and_see_the_layer_syntax.png
Así tenemos que nombrar las instancias para que furule

Crear variants

Entonces, al grano: para crear las variants en Figma, sigue estos pasos:

  1. Crea un componente.
  2. Ponle un nombre usando la nomenclatura de texto entre barras (/), así: nombre del set de componentes / valor. (Esto es opcional).
  3. Haz clic en el icono + del panel Variants para añadir la primera variación.
  4. 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.
  5. Haz los cambios que necesites que tenga la variación.
  6. Y ya estaría.
With_the_component_set_selected_click_the_property_or_double-click_on_the_value_in_the_right_sidebar_to_edit_it.png
Puedes renombrar las propiedades y sus valores en el panel Variants

Usar variants

Lo suyo es que cuando creas variants después las uses en tus diseños.

Para usar las variants en Figma:

  1. Selecciona el set de componentes que quieras usar en el panel Assets.
  2. Elige cualquier instancia del set y te la llevas, arrastrando, al canvas.
  3. 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.
  4. 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *