Cuando empiezas a crear un sistema de diseño o un UI Kit todo son fuegos artificiales y confetti hasta que empiezas con las variaciones de botones, inputs y navegaciones, entre otros.
Que si activo, inactivo, hover, con icono, sin icono, con espaciado distinto según dispositivo, con mensaje de error, con foco… cuando quieres darte cuenta tienes un panel de componentes difícil de gestionar.
Pero llegaron los Variants —podríamos traducirlo directamente como variantes— y con ello, la solución a tus problemas.
Pasa, pasa, que te cuento cómo puedes dominarlos 👌
Variants: Qué son y cómo usarlos
En pocas palabras, esta nueva funcionalidad te permitirá combinar diferentes variaciones de un mismo componente.
Para que te lo imagines, tendrás un solo componente (un botón, por ejemplo) y mediante el panel de Inspector podrás modificar su estado, tamaño, si lleva o no iconos…
Antes de nada, lo primero que tienes que tener en cuenta es que los variants se aplican a Components y, en concreto, a los llamados Multiple Components, que son nuevos:
Los Multiple Components en Figma
Cómo crear variants desde cero
En este primer apartado te contaré como crear variants si no tienes creado ningún componente que quieras convertir a variante. Si este es tu caso, sigue hasta el siguiente apartado 😉
1. Lo primero que tienes que hacer es crear en un frame solo una variación y después conviértela a componente. Te recomiendo que el propio nombre indique sus características. En este caso, es Button/Primary/Default/Without Icon.
2. Con este nuevo componente seleccionado, haz clic en el + de Variants en el panel del Inspector (el de la derecha).
Cómo añadir variants en Figma
Verás que ha aparecido una copia del componente inicial y que donde antes solo ponía Variants ahora aparecen varias características con nombres genéricos:
Propiedades de las Variants
Para cambiarlo, en lugar de seleccionar un componente en concreto haz clic en el borde lila con líneas discontínuas. Allí podrás cambiar los nombres a opciones más adaptadas a tu proyecto. Por ejemplo:
3. Ahora, selecciona el componente que Figma ha duplicado y adáptalo. Si haces clic encima de él podrás cambiarle las características y también las propiedades. En este caso, sería With Icon.
Nueva variación en las propiedades
4. Podrás añadir otra variación si haces clic en el + que aparece cuando seleccionas cualquier componente dentro del Component Set que has creado antes.
Cuando tengas las variaciones, si seleccionas de nuevo el marco que las contiene verás cuantas hay (12 en este caso) y en el Inspector podrás ver las distintas variaciones que contienen.
Las 12 variaciones realizadas con todas las propiedades
5. Por último, una vez tengas creados todas las variaciones, añadir un botón y adaptarlo a cada contexto será tan fácil como:
Si quieres rizar el rizo, también pueden hacerse variantes booleanas (es decir, cuyas opciones sean «Sí» o «No»). Sería el caso de los iconos, que a priori no tiene mucho sentido tener una variación que contenga «Without icon» y «With icon». Tendría más sentido una opción que pudieras activar o desactivar, ¿no?
Para conseguirlo solo haz clic encima y cambia ambas opciones a «False» (sin icono) y «True» (con icono). Se vería así 😉
Cómo crear variants con componentes
Si lo que necesitas es adaptar esta nueva funcionalidad a un sistema de diseño o UI Kit que ya tengas creado, es fácil: simplemente selecciona todos los componentes que ya tengas y haz clic en el botón de Combine as Variants que te aparecerá en el Inspector. Et voilà!
¿Qué te parecen las variants?
Por último, un consejo: acuerda la misma nomenclatura con el equipo de desarrollo, así cuadrarán los nombres de los distintos componentes y variants con lo que se implementa.
Así a bote pronto quizás se te hace un poco bola, pero verás que a la que empieces a juguetear un poco con esta nueva funcionalidad la dominarás súper rápido.
Espero que este tutorial te haya sido útil 🙂 Te dejo también un vídeo que grabé por si te es más útil.
Gracias, me encanto como explicas todo, con videos incluidos, estaba confundida y lograste aclarecer mis dudas, sin duda leeré tus artículos y seguiré tu canal saludos
En mi equipo de diseño han decidido hacer variantes y propiedades por cada boton. Por ejemplo, antes tenía un component set de variantes, pero me di cuenta que teníamos muchísimos botones o inputs ya que el producto es muy amplio.. se decidio por ejemplo hacer un component set para el boton outline y aus variantes con icono, estado, etc.. para el primary lo mismo , danger, etc… esto porque las personas del equipo se confundian al hacer tantos clicks en las distintas propiedades. Quería saber tú opinion al respecto!! Pra mejores practicas en UI 🙂 gracias!!
Sin ver como está configurado el Figma no sabría contestarte. Aun así, lo que a mí me suele funcionar mejor es tener un botón que incluya todas las variantes: con y sin iconos, los diferentes estados, con y sin bordes redondeados, etc.
Así, insertando un solo botón puede configurarse todo desde el panel de Variants de la derecha en Figma, el inspector. También, si se cambia el botón primario esto repercute en el resto, hecho que hace más fácil modificar tokens del sistema de diseño.
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Cookies de terceros
Esta web utiliza Google Tag Manager para recopilar información anónima tal como el número de visitantes del sitio o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
Gracias, me encanto como explicas todo, con videos incluidos, estaba confundida y lograste aclarecer mis dudas, sin duda leeré tus artículos y seguiré tu canal saludos
Gracias por el comentario, Valentina ^^
¡Me alegra que la explicación te haya sido útil!
Buenísimo el tutorial, me quedó muy claro.
En mi equipo de diseño han decidido hacer variantes y propiedades por cada boton. Por ejemplo, antes tenía un component set de variantes, pero me di cuenta que teníamos muchísimos botones o inputs ya que el producto es muy amplio.. se decidio por ejemplo hacer un component set para el boton outline y aus variantes con icono, estado, etc.. para el primary lo mismo , danger, etc… esto porque las personas del equipo se confundian al hacer tantos clicks en las distintas propiedades. Quería saber tú opinion al respecto!! Pra mejores practicas en UI 🙂 gracias!!
¡Hola Valentina!
Sin ver como está configurado el Figma no sabría contestarte. Aun así, lo que a mí me suele funcionar mejor es tener un botón que incluya todas las variantes: con y sin iconos, los diferentes estados, con y sin bordes redondeados, etc.
Así, insertando un solo botón puede configurarse todo desde el panel de Variants de la derecha en Figma, el inspector. También, si se cambia el botón primario esto repercute en el resto, hecho que hace más fácil modificar tokens del sistema de diseño.