Hace pocas semanas Figma puso de forma pública una de las mayores novedades que presentaba para este año para su software de prototipado y diseño web. Ya hemos hablado anteriormente en Silo de Figma como una de las alternativas más potentes dentro el diseño web que tenemos a Sketch y Adobe XD. Y con este tipo de características, cada día se convierte más en un imprescindible. En esta ocasión hablaremos de las Variants en Figma.
En el artículo de hoy haremos una pequeña introducción al uso de las Variants dentro de Figma, por lo que daremos por sentado algunas cosas, como es la creación de diferentes elementos en Figma, la creación de componentes o el uso del panel de assests. Si no estás familiarizado con estos términos básicos en Figma, os aconsejamos echar un vistazo a alguno de los múltiples tutoriales que tienen tanto en YouTube como en su blog. Pero si ya habéis usado algún programa similar, seguro que os familiarizáis rápidamente con su uso y su interfaz.
Eso si, antes de empezar con este pequeño tutorial, vamos a ver que son las Variants, y que es lo que nos van a ofrecer en nuestro flujo de trabajo cuando diseñemos una web.
¿Qué son las Variants en Figma?
Las Variants son la forma que tiene Figma por la cual, teniendo en nuestro panel de assets un solo elemento, podemos tener tantas variaciones de dicho elemento como queramos. Todas estas variaciones las tendremos que crear de manual, y las vamos ligando hacia un mismo asset. Aunque el trabajo previo es mayor, nos va a ahorrar mucho tiempo en cualquier cambio posterior, ya que se van a modificar de forma automática en todos los elementos que hayamos usado en nuestro diseño web.
Una de las formas más sencillas de entender como funcionan las Variants, que es la que vamos a explicar en este artículo, es con los botones de un diseño web. Con un botón, tenemos diferentes estilos: en reposo, cuando esta activo, al hacer hover… Incluso, que un mismo diseño de botón, en algunos escenarios tenga un icono, y en otros no. Todo esto podemos hacerlo mediante Variants, pero que se muestre como un simple elemento con muchas opciones.
Sintaxis de las Variants en Figma
Cuando creamos Variants, es muy importante saber como funciona su sintaxis a la hora de nombrar cada estilo. Y es que esta sintaxis nos va a permitir que cada propiedad del elemento (en nuestro caso, un botón), se muestre de forma correcta, y podamos elegirla convenientemente.
Vamos a decidir que nuestro botón tenga dos estilos: uno con relleno de color (fill), y otro blanco con borde de color (outline). Y, además de esto, va a tener tres propiedades según su estado: por defecto (default), al estar presionado (pressed), o al tener el cursor sobre él (hover). Una vez sabemos esto, y haciendo todas las variables posibles, tendremos 6 estilos de botones:
- fill, default
- fill, pressed
- fill, hover
- outline, default
- outline, pressed
- outline, hover
Como vemos, cada una de estas propiedades tienen que ir separadas por una coma, para que Figma sea capaz de entender que nos referimos a variantes diferentes dentro de una misma propiedad. Además, siempre deben de estar en el mismo orden. En este caso, en primer lugar siempre nombramos el estilo de botón (fill o outline), y en segunda posición el estado (default, pressed o hover).
Esto es un ejemplo muy básico, pero que podemos hacer mucho más complejo según nuestras necesidades.
Creando un botón con Variants
Lo primero que queremos mostraros en este ejemplo son todas las variables de un mismo botón que queremos hacer. Se pueden resumir en esta imagen:
Son 24 variables dentro de un mismo botón, divididas en estas propiedades:
- Tamaño – small / big
- Estado – default / pressed / hover
- Tipo – fill /outline
- Icono – icon / no-icon
El método más sencillo es, en primer lugar, es crear nuestro botón base y convertirlo en un componente. Para convertir cualquier objeto en un componente, es tan sencillo como pulsar el botón en forma de rombo de la parte superior, o mediante la combinación Control + Alt + K.
Con nuestro botón convertido en componente, veremos que en el panel derecho aparece una opción llamada Variants, junto con el símbolo +. Si pulsamos en el símbolo +, veremos como se crea una copia de nuestro botón, y estos aparecen rodeados de un recuadro morado con línea discontinua. Esto significa que ya están funcionando como Variants. Así que ahora llega el trabajo duro, y empezamos a duplicar y modificar nuestros botones, y así conseguir todas las variables posibles.
Una vez hecho esto, si vamos al panel derecho veremos como en la sección de Variants, no nos aparece de forma correcta nuestras propiedades. Esto es porque no nos hemos parado a nombrar cada botón de forma correcta. Y hemos dicho que es muy importante hacerlo para que Figma entienda lo que estamos realizando. Por lo que, siguiendo las instrucciones de orden (separados por coma) de cada una de las propiedades, pasaremos a nombrar cada botón. Si nuestro botón es tamaño grande, en estado hover, con relleno de color y sin icono, lo nombraremos como big, hover, fill, no-icon. Y así con todos. Así quedaría en nuestro ejemplo:
Una vez hecho esto, si volvemos al panel, Figma nos muestra cada propiedad como Property 1, Property 2… Esto también lo podemos modificar a nuestro antojo, y que sea más amigable al usar nuestras Variants para saber a que nos estamos refiriendo.
Usando las Variants en nuestro proyecto
Una vez realizado este proceso en la creación del botón, es momento de usarlo en nuestro prototipo de diseño web dentro de Figma. En el panel izquierdo, dentro de assets, veremos como aparece solo un botón, pero no todas las variables que hemos creado. No nos asustemos. Si arrastramos este asset dentro del proyecto, en el panel izquierdo aparecen todas las propiedades que hemos ido nombrando, y que podremos ir eligiendo mediante un menú desplegable.
Así, vamos colocando el botón donde queramos, y eligiendo sus valores según sea conveniente en nuestro diseño. Lo bueno de usar componentes y Variants en Figma es que, si cambiamos algo en el diseño del botón dentro del asset, como por ejemplo, su color, se cambiará de forma automática en todos los botones del diseño. El ahorro que conseguiremos en revisiones y cambios posteriores va a ser notable. También os dejamos un enlace al archivo de Figma con el que hemos realizado este tutorial, para que podáis ver de primera mano como funciona esta Variant.
Enlace al archivo Figma de SIloCreativo
Pero esto es solo una pequeña introducción a lo que dan de si las Variants en Figma. También podemos hacer propiedades que funcionen como un true/false, para elementos que solo tengas dos valores. Pero en eso entraremos en más adelante, en otro artículo sobre el uso avanzado de Variants.
Y con esto damos por terminado este pequeño avance a las Variants en Figma. Esperemos que os haya resultado de utilidad y, como siempre, tenéis disponibles los comentarios para cualquier duda o sugerencia que nos queráis hacernos llegar.
