7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Figma

Cómo utilizar las variantes de Figma

Scroll to top
Read Time: 3 mins

Spanish (Español) translation by Tanya (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 diseño. Le permiten alterar ciertos aspectos predefinidos de componentes individuales, para hacer cualquier variante que desee.

En mi opinión, Figma es la mejor herramienta de diseño de interfaz de usuario disponible en este momento, y esta característica es una de mis favoritas personales. ¡Echemos un vistazo!

Componentes en los días anteriores a las variantes de Figma

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

before figma variantsbefore figma variantsbefore figma variants

Comenzaría con marcos, en los que diseñaría su componente (un botón en este ejemplo) en su estado predeterminado. Luego, puede hacer un estado de desplazamiento, luego tal vez una versión pequeña y una versión de desplazamiento para ese botón pequeño también.

Finalmente, harías componentes de cada uno, de modo que siempre que lo necesites, puedas acceder a él en Activos y arrástrelo a su diseño.

Mejores componentes hoy en día con las variantes de Figma

Hoy en día, con las variantes de Figma, puede diseñar un solo componente. Aquí, utilicé el primer botón predeterminado y lo convertí en un componente usando el componente en la parte superior de la pantalla.  Por favor, tengan paciencia conmigo mientras uso las palabras “componente” y “botón” en todo tipo de contextos diferentes.

button componentbutton componentbutton component

Una vez hecho esto, dirígete al Variantes panel en el Inspector a la derecha y presione el + símbolo para agregar una nueva variante. Al hacerlo, se creará un grupo de variantes, así:

group of variantsgroup of variantsgroup of variants

Organización de las propiedades de las variantes

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

rename variant propertiesrename variant propertiesrename variant properties

Tambié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 “Pequeño”. Y una vez que tienen nombre, podemos seleccionar cada uno y hacer cambios reales en él (como hacer que el pequeño sea pequeño …)

small and defaultsmall and defaultsmall and default

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 botón a nuestro grupo haciendo clic en el + símbolo en la esquina inferior del propio grupo. Haremos que este tenga el mismo tamaño que el botón Predeterminado, pero con diferentes colores para un estado de desplazamiento. Este será nuestro estilo “Hover”.

Repita el proceso para una variante de desplazamiento pequeño y tendrá un grupo de variantes de 4 botones.

4 variants4 variants4 variants

Aquí está la parte genial

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

assetsassetsassets

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

choosechoosechoose

Conclusión

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

Recursos útiles y más tutoriales de Figma

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.