() translation by (you can also view the original English article)
En este tutorial, aprenderás a usar variantes en Figma. Las variantes son una característica de Figma relativamente nueva; con ellas puedes agrupar y organizar fácilmente múltiples versiones del mismo componente.
Habilidades de Figma que aprenderás en este tutorial:
- Cómo guardar estilos de color en Figma
- Cómo utilizar los diseños automáticos de Figma
- Cómo crear y usar componentes de Figma
- Cómo convertir componentes en variantes en Figma
- Cómo agregar una propiedad para una variante en Figma
- Cómo crear una aplicación de póquer
Para obtener más inspiración sobre cómo ajustar o mejorar el diseño de la interfaz de usuario de tu juego, puedes encontrar muchos recursos en Envato Elements. Elements es el hogar de miles de kits de UI y UX, compatibles con tus herramientas de diseño favoritas (incluida Figma) por un único precio de suscripción.
Lo que vas a necesitar:
Necesitarás los siguientes recursos, disponibles con tu suscripción a Envato Elements, para completar este tutorial (pero no dudes en usar tus propias alternativas si así lo prefieres):
En este tutorial usaremos el diseño de la interfaz de usuario del juego para iPad que se muestra en la parte superior de la página para demostrar cómo trabajar con variantes en Figma.
¿Qué es una variante de Figma?
Si alguna vez has trabajado con componentes en Figma, sabrás que pueden acelerar el proceso de diseño de tu interfaz de usuario cuando necesites reutilizar objetos. Los botones son un ejemplo perfecto de dónde te gustaría usar componentes.
Las variantes de Figma te permiten crear un componente único donde de otra manera crearías varios, en lugar de eso te permiten cambiar entre variantes de ese componente. Por ejemplo, en un minuto crearemos un componente de ficha de póquer que tiene algunas variantes según el color que queramos usar:
¡Pongámonos manos a la obra!
1. Cómo crear variantes en Figma
Selecciona la Herramienta Elipse (O) y mantén presionada la tecla Mayús mientras haces clic y arrastras para crear fácilmente un círculo de 24 px.
Concéntrate en la barra lateral derecha y cambia el color de Relleno de esta forma a #FFB400, y luego haz clic en el icono de punto cuádruple para abrir el panel flotante Estilos de color. Haz clic en el botón Crear estilo (+), asígnale el nombre Amarillo y luego haz clic en el botón Crear estilo.
Tu color ahora debería aparecer en el panel Estilos de color y puedes usarlo fácilmente cuando lo desees.
Paso 2
Asegúrate de que tu círculo permanezca seleccionado y haz clic en la sección Trazo de la barra lateral derecha para agregar un Trazo.
Cambia el color a blanco (#FFFFFF) y aumenta el tamaño a 3. Asegúrate de que la alineación esté configurada en Interior, y luego haz clic en el icono de tres puntos para abrir el panel flotante de Trazo avanzado. Ingresa 5,5 en el cuadro Discontinuo para hacer el trazo discontinuo, como se muestra a continuación.
Una vez que hayas terminado, abre el panel flotante Estilo de color y guarda el uso de color para este trazo como un estilo de color. Nómbralo Blanco.
Paso 3
Usando la Herramienta Elipse (O), crea un círculo de 18 px y colócalo como se muestra en la primera imagen.
No te molestes en rellenar esta nueva forma, pero agrega un Trazo. Cambia su color a #EBA000 y mantén la alineación establecida en Interior y el tamaño en 1.
Selecciona ambos círculos hechos en este paso y Agrúpalos (Control-G). Ve a la barra lateral izquierda, dentro del panel Capas, y cambia el nombre de este nuevo grupo a Ficha 5.
Paso 4
Mantén presionada la tecla Alt y simplemente haz clic y arrastra una copia de tu grupo. Selecciona el círculo principal de este nuevo grupo y reemplaza el color de Relleno con #F5444C. Guarda este color como estilo de color y asígnale el nombre Rojo.
Selecciona el círculo más pequeño dentro de este nuevo grupo y cambia el color del Trazo con #E13038.
Ve al panel Capas y cambia el nombre de este nuevo grupo a "Ficha 10".
Paso 5
Agrega cuatro copias más de tu grupo y sustituye los colores existentes por los que se muestran a continuación.
No olvides guardar los cinco colores indicados en la siguiente imagen.
Una vez que hayas terminado, ve al panel Capas para cambiar el nombre de estos nuevos grupos: Azul - "Ficha 25", Verde - "Ficha 50", Púrpura - "Ficha 100", Azul claro - "Ficha 500".
Paso 6
Usando la Herramienta Elipse (O), crea un círculo más de 24 px. Rellena esta nueva forma con #CED4DD y agrega un trazo Blanco. Aumenta el tamaño del trazo a 3 y asegúrate de que la alineación esté establecida en Interior.
Cambia a la Herramienta Texto (T) y escribe una simple "D". Utiliza la fuente Montserrat, establece el estilo en Negrita y el tamaño en 14, y luego cambia el color a Azul oscuro. Coloca este pequeño texto como se muestra en la segunda imagen.
Paso 7
Selecciona ese pequeño fragmento de texto junto con el círculo que se encuentra en la parte posterior y haz un Grupo (Control-G). Muevete al panel Capas para cambiar el nombre de este nuevo grupo a "Distribuidor de Fichas".
Ahora, selecciona todos tus grupos de fichas y haz clic en el botón Crear componentes múltiples de la barra de herramientas para convertir todos sus grupos en componentes de Figma independientes.
Paso 8
Asegúrate de que todos tus componentes estén seleccionados y haz clic en el botón Combinar como variantes de la barra lateral derecha. Esto fusionará todos tus componentes en un componente con siete variantes.
Puedes cambiar fácilmente el nombre de este nuevo componente en el panel Capas. Para cambiar el nombre de una variante o propiedad, todo lo que tienes que hacer es hacer doble clic en la barra lateral derecha.
Paso 9
Ahora puedes hacer clic y arrastrar tu componente Figma desde el panel de Recursos y agregarlo a tu diseño.
Puedes seleccionar fácilmente la variante de Figma deseada del menú desplegable en la barra lateral derecha.
2. Cómo utilizar variantes de Figma para un botón
Paso 1
Usando la Herramienta Texto (T) agrega el fragmento de texto "ESCRITORIO: 50 $". Utiliza la fuente Montserrat, establece el estilo en Negrita y el tamaño en 10, y cambia el color a Blanco.
Asegúrate de que este texto esté seleccionado y presiona Mayús-A para agregar Diseño automático. Muévete a la barra lateral derecha para aumentar el Relleno Horizontal para el diseño automático a 15, y mantén el Relleno Vertical y también establece en 10 el Espaciado entre elementos.
Paso 2
Sigue enfocándote en la barra lateral derecha y agrega un Relleno y un Trazo para tu diseño automático.
Establece el color de Relleno en Azul Oscuro y el color del Trazo en Blanco. Aumenta el tamaño del trazo a 2 y asegúrate de que la alineación esté configurada en el Interior.
Ve a la parte superior de la barra lateral derecha y establece el Radio de la esquina en 20, y luego muévete al panel Capas para cambiar el nombre de tu diseño automático por "Comando".
Paso 3
Asegúrate de que tu diseño automático aún esté seleccionado y conviértelo en un componente Figma usando el botón Crear componente (Control-Alt-K) de la barra de herramientas.
Paso 4
Con este nuevo componente aún seleccionado, enfócate en la barra lateral derecha y usa el botón + del panel Variantes para agregar una nueva variante para tu componente. Nómbralo "Todo incluido".
Paso 5
Selecciona el elemento que compone esta segunda variante, cambia el color del Trazo a Púrpura y reemplaza el texto con "TODO EN:50 $".
También puedes volver al panel Variantes y elegir un nombre diferente para esa variante Predeterminada.
Paso 6
También puedes agregar una nueva variante para un componente usando el botón + de la esquina inferior derecha del marco. Hagamos clic en él y seleccionemos el botón recién agregado.
Cambia el color del Trazo por Amarillo y reemplaza el texto con "COMPROBAR:50$". No olvides cambiar el nombre de esta nueva variante "Verificar".
Paso 7
También agreguemos un icono para esta variante "Verificar". Con la Herramienta Pluma (P), crea una pequeña flecha, como se muestra en la siguiente imagen. Puedes ir a Ver > Cuadrícula de píxeles para habilitar la Cuadrícula de píxeles, lo que te facilitará mucho la creación de esta trazado.
Establece el color del Trazo en Blanco e incrementa el tamaño a 2.
Para que este botón de flecha forme parte de tu variante, todo lo que tienes que hacer es arrastrarlo dentro del botón.
Paso 8
Agranda el marco de tu componente para dejar espacio para las siguientes variantes.
Agrega una cuarta variante, cámbiale el nombre por "Llamar" y selecciónala. Cambia el color del Trazo a Azul y reemplaza el texto con "Llamar:50$", y luego selecciona ese icono de flecha y gíralo 90 grados, como se muestra a continuación.
Paso 9
Agrega una quinta variante, cámbiale el nombre a "Aumentar" y selecciónala. Cambia el color del Trazo a Verde y reemplaza el texto con "AUMENTAR:50$", y luego selecciona ese icono de flecha y gíralo 90 grados, como se muestra en la segunda imagen.
Agrega una última variante, cámbiale el nombre "Doblar" y selecciónala. Cambia el color del Trazo a Rojo y reemplaza el texto con "DOBLAR", y luego elimina ese icono de flecha.
Paso 10
Con la Herramienta Pluma (P) o la Herramienta Línea (L), crea un trazado oblicuo, como se muestra en la primera imagen. Duplica este trazado (Control-C > Control-V) y gira la copia 90 grados.
Selecciona ambas copias para hacer un Grupo (Control-G) y mueve este icono dentro del botón Doblar, como se muestra en la imagen final.
Paso 11
Al igual que con el otro componente, puedes arrastrar tu componente de botón desde el panel Recursos y agregarlo a tu diseño.
Puedes seleccionar fácilmente las variantes de Figma deseadas y ten en cuenta que puedes ajustar el texto como desees.
3. Cómo utilizar propiedades y variantes en Figma
Paso 1
Usando la Herramienta Rectángulo (R), crea una forma de 80 x 104 px, asegúrate de que permanezca seleccionada y enfócate en la barra lateral derecha.
Establece el Radio de la esquina en 5, cambia el color de Relleno a Rojo y el color del Trazo a Blanco, y luego aumenta el tamaño del trazo a 5.
Paso 2
Usando la Herramienta Rectángulo (R), crea dos formas de 35 x 47 px. Rellena ambos rectángulos con #E13038 y colócalos como se muestra a continuación.
Paso 3
Selecciona estos tres rectángulos y haz un Grupo (Control-G). Ve al panel Capas y cambia el nombre de este nuevo grupo a "Tarjeta / Dorso / Grande".
Usando la barra inclinada / para nombres hace que sea mucho más fácil convertir componentes en variantes. Aprenderás más sobre esta técnica y cómo funciona exactamente unos pocos pasos más adelante.
Paso 4
Elige la Herramienta Rectángulo (R) y crea una forma de 80 x 104 px. Establece el Radio de la esquina en 5 y cambia el color de Relleno a Blanco.
Paso 5
Usando la Herramienta Texto (T), agrega una simple "A". Utiliza la fuente Odudo Mono, establece el estilo en Negrita y el tamaño en 38. Recuerda marcar el botón Alinear texto a la derecha y cambiar el color del texto a Azul oscuro, y luego coloca el texto como se muestra en la primera imagen. Tener el texto alineado a la derecha será útil si decides reemplazar la "A" con un "10".
A continuación, necesitarás el icono de tréboles de este paquete de 15 iconos de juegos de azar y casinos. Cópialo dentro de tu documento y enfócate en la barra lateral derecha. Asegúrate de tener activa la opción Restringir proporciones, establece la Altura en 25 px y cambia el color de Relleno por Azul oscuro. Coloca tu icono como se muestra en la segunda imagen.
Selecciona el icono de los tréboles y la "A" junto con el rectángulo redondeado color blanco y Agrúpalos (Control-G). Ve al panel Capas y cambia el nombre de este nuevo grupo a "Tarjeta/Tréboles/Grande".
Paso 6
Agrega tres copias de tu último grupo y reemplaza el icono de tréboles con los otros tres iconos.
Una vez que hayas terminado, ve al panel Capas y cambia el nombre de los nuevos grupos en consecuencia.
Paso 7
Elige la Herramienta Rectángulo (R) y esta vez crea una forma de 40 x 52 px. Establece el Radio de la esquina en 5, cambia el color de Relleno por Rojo y el color del Trazo por Blanco, y luego aumenta el tamaño del trazo a 3.
Con la misma herramienta, crea dos formas de 17 x 23 px. Rellena ambos rectángulos con #E13038 y colócalos como se muestra en la segunda imagen.
Selecciona estos tres rectángulos, Agrúpalos (Control-G) y cambia el nombre de este nuevo grupo a "Tarjeta/Dorso/Pequeño".
Paso 8
Elige la Herramienta Rectángulo (R) y crea otra forma de 40 x 52 px. Establece el Radio de la esquina en 5 y cambia el color de Relleno a Blanco.
Cambia a la Herramienta Texto (T) para agregar una "A" y usa la misma fuente Odudo Mono, establece el estilo en Negrita y el tamaño en 19. Recuerda marcar el botón Alinear texto a la derecha y cambiar el color del texto a Azul oscuro, y luego coloca este texto como se muestra en la segunda imagen.
Agrega una copia del icono de tus tréboles, baja la Altura a 12,5 px y colócalo como se muestra en la segunda imagen.
Selecciona los tres elementos y Agrúpalos (Control-G). Ve al panel Capas y cambia el nombre de este nuevo grupo a "Tarjeta/ Tréboles/Pequeño".
Paso 9
Agrega tres copias de tu último grupo y reemplaza el icono de tréboles con los otros tres iconos, y luego muévete al panel Capas para cambiar el nombre de los nuevos grupos en consecuencia.
Paso 10
Antes de convertir todos estos grupos en variantes, comprendamos mejor el uso de este sistema de nombres con barras oblicuas (/). El texto antes de la primera barra siempre se usa para nombrar su componente. El texto después de la primera barra se usará para nombrar todas las variantes que estarán disponibles para la primera propiedad, mientras que el texto después de la segunda barra se usará para nombrar las variantes que estarán disponibles para la segunda propiedad. Convirtamos todos estos grupos en variantes y veamos qué tan fácil puede ser.
Asegúrate de tener todos los grupos seleccionados, ve a Crear múltiples componentes y luego haz clic en el botón Combinar como variantes.
Como puedes ver en la barra lateral derecha, esto creará el componente "Tarjeta" (texto antes de la primera barra), con dos Propiedades. La Propiedad 1 contiene las 5 variantes (Espadas, Tréboles, Picas, Corazones, Diamantes) que se establecieron después de la primera barra y la Propiedad 2 contiene las 2 variantes (Grande, Pequeña) que se establecieron después de la segunda barra. Siempre puedes hacer doble clic en una Propiedad para cambiarle el nombre por el que desees.
Paso 11
Al igual que con cualquier componente, puedes arrastrarlo fácilmente desde el panel Recursos y agregarlo a tu diseño, y puedes seleccionar las variantes de Figma deseadas en el menú desplegable en la barra lateral derecha.
No olvides que también puedes ajustar el texto para que sea mucho más fácil crear diferentes tarjetas.
¡Felicidades! ¡Ya has terminado!
Así es como debería verse. Espero que hayas disfrutado de este tutorial y puedas aplicar estas técnicas en tus proyectos futuros. No dudes en compartir tu resultado final en la sección de comentarios.
Siéntete libre de ajustar el diseño final y personalizarlo. Puedes encontrar grandes fuentes de inspiración en Envato Elements, con soluciones interesantes para mejorar tu diseño.
¿Quieres aprender más sobre las funciones de Figma?
Tenemos un montón de tutoriales en Tuts+, de nivel principiante a intermedio, ¡échale un vistazo!
FigmaCómo trabajar con diseños automáticos, componentes y contenido dinámico en Figma
FigmaComo crear pantallas de acceso y de inicio de sesión para una plantilla de aplicación de citas en Figma
FigmaCómo cambiar múltiples colores al mismo tiempo en Figma
FigmaCómo arreglar sombras recortadas o elementos desbordados en Figma
Figma4 formas de cambiar el tamaño de los elementos en Figma
FigmaUna guía rápida para la configuración de relleno de imagen de Figma
FigmaNuevo curso: Cuadrículas Figma en menos de 30 minutos
FigmaCómo crear un efecto de vidrio esmerilado en Figma
FigmaAtajos esenciales de Figma para trabajar de manera eficiente
FigmaMás de 21 de los mejores kits prémium de interfaz de usuario para Adobe XD y Figma
