Cómo utilizar las variantes de Figma

() translation by (you can also view the original English article)

Las variantes de Figma le ahorran el dolor de cabeza de buscar entre miles de componentes, tratando de encontrar el adecuado para su diseño. Le permiten alterar ciertos aspectos predefinidos de componentes individuales, para hacer cualquier variante que desee.

En mi opinión, Figma es la mejor herramienta de diseño de interfaz de usuario disponible en este momento, y esta característica es una de mis favoritas personales. ¡Echemos un vistazo!

Componentes en los días anteriores a las variantes de Figma

Antes de que Figma introdujera variantes, es posible que haya administrado sus componentes de esta manera:

Comenzaría con marcos, en los que diseñaría su componente (un botón en este ejemplo) en su estado predeterminado. Luego, puede hacer un estado de desplazamiento, luego tal vez una versión pequeña y una versión de desplazamiento para ese botón pequeño también.

Finalmente, harías componentes de cada uno, de modo que siempre que lo necesites, puedas acceder a él en Activos y arrástrelo a su diseño.

Mejores componentes hoy en día con las variantes de Figma

Hoy en día, con las variantes de Figma, puede diseñar un solo componente. Aquí, utilicé el primer botón predeterminado y lo convertí en un componente usando el componente en la parte superior de la pantalla. Por favor, tengan paciencia conmigo mientras uso las palabras “componente” y “botón” en todo tipo de contextos diferentes.

Una vez hecho esto, dirígete al Variantes panel en el Inspector a la derecha y presione el + símbolo para agregar una nueva variante. Al hacerlo, se creará un grupo de variantes, así:

Organización de las propiedades de las variantes

Nuestras dos variantes ahora están organizadas bajo la misma propiedad (llamada “propiedad 1” hasta que la cambiemos) y vamos a hacer que esta propiedad se relacione con el tamaño. Entonces, nuestro primer paso será cambiarle el nombre.

También podemos cambiar el nombre de las variantes reales, por lo que en lugar de “Predeterminado” y “Variante2” (como puede ver arriba) las llamaremos “Predeterminado” y “Pequeño”. Y una vez que tienen nombre, podemos seleccionar cada uno y hacer cambios reales en él (como hacer que el pequeño sea pequeño …)

Propiedades de las variantes secundarias

Ahora agreguemos otra propiedad. En el Variantes panel ir a Agregar una nueva propiedad y darle un nombre (como “Estilo”).

Ahora agreguemos un nuevo botón a nuestro grupo haciendo clic en el + símbolo en la esquina inferior del propio grupo. Haremos que este tenga el mismo tamaño que el botón Predeterminado, pero con diferentes colores para un estado de desplazamiento. Este será nuestro estilo “Hover”.

Repita el proceso para una variante de desplazamiento pequeño y tendrá un grupo de variantes de 4 botones.

Aquí está la parte genial

Una vez configurado todo, supongamos que estamos trabajando en una nueva página. Cuando necesitamos uno de nuestros componentes de botón, vamos a Activos para ver los componentes disponibles que podemos arrastrar a la página:

En el Inspector podemos ver las opciones de variantes para este componente ahora, por lo que podemos seleccionar el tamaño que queremos y el estilo que queremos.

Conclusión

Las variantes de Figma te ahorrarán mucho tiempo, ¡especialmente si ya eres alguien a quien le gustan los trucos de organización! Vea el video de arriba para obtener más consejos sobre convenciones de nomenclatura, convertir componentes existentes en variantes y trabajar con componentes más complejos como barras de navegación.

Recursos útiles y más tutoriales de Figma

Variantes de Figma