 --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 453 453' style='enable-background:new 0 0 453 453;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M226.5,0C101.6,0,0,101.6,0,226.5S101.6,453,226.5,453S453,351.4,453,226.5S351.4,0,226.5,0z M32.8,225.9 c0-106.5,86.6-193.1,193.1-193.1S419,119.4,419,225.9S332.4,419,225.9,419C119.4,419,32.8,332.4,32.8,225.9z'/%3E%3Cg%3E%3Cpolygon class='st0' points='289.8,375.6 247.8,272.5 229.6,312.6 255.2,375.6 '/%3E%3Cpolygon class='st0' points='165.4,154.8 211.2,267.6 229.5,227.4 165.2,69.5 26.2,376 65.1,375.9 '/%3E%3Cpolygon class='st0' points='308.4,69.5 290.7,110.6 379.2,342.4 392.2,376 426.8,376 '/%3E%3C/g%3E%3C/svg%3E%0A)
Las variantes son una herramienta poderosa en Figma que permite crear múltiples versiones de un componente con diferentes propiedades. Esto puede ser útil para crear diferentes estados, tamaños o colores de un elemento, o para crear versiones adaptadas a diferentes dispositivos o plataformas.
En este artículo, veremos qué son las variantes, cómo crearlas y utilizarlas. También responderemos a algunas preguntas frecuentes sobre este tema.
¿Qué son las variantes?
Las variantes son una colección de componentes que comparten las mismas propiedades, pero tienen diferentes combinaciones de valores para esas propiedades. Por ejemplo, podemos crear una variante de un botón que tenga un estado «normal», un estado «hover» y un estado «presionado». Cada variante tendrá sus propias propiedades, como el color, el tamaño y la fuente.
¿Cómo crear variantes?
Hay dos formas de crear variantes en Figma:
- Crear variantes desde cero: Para crear variantes desde cero, primero debemos crear un componente. Una vez que tengamos un componente creado, podemos agregar variantes haciendo clic en el botón «+» en la sección «Propiedades» del inspector y seleccionar una nueva propiedad de tipo «Variante».
- Combinar componentes como variantes: Si ya tenemos varios componentes que queremos convertir en variantes, podemos hacerlo haciendo clic en el botón «Combinar como variantes» en el inspector.
¿Cómo utilizar variantes?
Para utilizar variantes, simplemente debemos seleccionar la variante que queremos utilizar. Podemos hacerlo haciendo clic en el nombre de la variante en el inspector.
También podemos utilizar variantes en los diseños. Para ello, debemos arrastrar una instancia del componente principal al lienzo. A continuación, podemos seleccionar la variante que queremos utilizar en el inspector.
Preguntas Frecuentes (FAQs)
¿Qué son las propiedades de las variantes?
Las propiedades de las variantes son las propiedades que podemos usar para definir las diferencias entre las variantes. Las propiedades de las variantes pueden ser cualquier propiedad del componente principal.
¿Cómo puedo organizar las variantes?
Podemos organizar las variantes en grupos para facilitar su búsqueda y uso. Para ello, simplemente debemos arrastrar y soltar las variantes en los grupos que queramos.
¿Cuántas variantes puedo crear en un proyecto de Figma?
En un proyecto de Figma, no existe un límite estricto en la cantidad de variantes que puedes crear. Sin embargo, es importante tener en cuenta que una gran cantidad de variantes puede hacer que tu proyecto sea más complejo y difícil de gestionar. Se recomienda utilizar variantes de manera efectiva y solo cuando sea necesario para mantener la simplicidad en el flujo de trabajo.
¿Cómo puedo compartir variantes con otros miembros de mi equipo en Figma?
Compartir variantes en Figma es sencillo. Sigue estos pasos:
Abre tu proyecto en Figma.
En el panel de variantes, selecciona la variante que deseas compartir.
Haz clic derecho sobre la variante y selecciona «Copiar URL».
Comparte la URL con los miembros de tu equipo a través de correo electrónico, mensajes o cualquier otro medio de comunicación que prefieras.
Los miembros de tu equipo podrán acceder directamente a la variante y utilizarla en su propio trabajo.
¿Puedo aplicar variantes a elementos ya existentes en mi diseño?
Sí, puedes aplicar variantes a elementos que ya están en tu diseño en Figma. Para hacerlo, sigue estos pasos:
Selecciona el elemento que deseas convertir en una variante.
En el panel de capas, haz clic derecho en el elemento y selecciona «Convertir en Variante».
Aparecerá un cuadro de diálogo que te permitirá personalizar la nueva variante. Haz los ajustes necesarios y guarda la variante.
Ahora, podrás utilizar esa variante en cualquier parte de tu proyecto.