Contenido del curso
Cómo crear variantes de botón en Figma
Crear un botón con variantes en Figma te permite construir un solo componente que se adapta a múltiples tamaños, estilos y estados sin duplicar trabajo. Si vienes diseñando un sistema con estilo new brutalism, este flujo te ayuda a mantener consistencia visual y acelerar tus diseños.
¿Cómo defino las medidas iniciales del botón?
Antes de tocar variantes, necesitas un botón base bien proporcionado. Empieza con un rectángulo, agrégale un texto que diga button y selecciona todo para aplicar Shift+A y crear un auto layout. Esto te permite controlar el espaciado interno y centrar el contenido [00:39].
La proporción importa más de lo que parece. Si el padding vertical es X, el horizontal debe ser 2X para que el botón se vea balanceado. En este caso, 16 arriba y abajo, 32 a los lados [01:35].
Después estiliza con un radius de 12 y un stroke de 2 para conservar el estilo new brutalism. El fondo va con el color primario 300 (púrpura), pensando en que este será tu call to action [02:13].
¿Qué es el auto layout en Figma? Es una propiedad que organiza los elementos de un frame con espaciado y alineación automática, ideal para botones que deben adaptarse a su contenido.
¿Cómo convierto el botón en un componente con variantes?
Una vez tienes el botón base, selecciónalo y conviértelo en componente. Renombra el frame como button y dirígete al panel de propiedades. Ahí encuentras la opción properties, donde empiezas a construir la arquitectura de variantes [03:34].
Para este sistema necesitas tres propiedades principales:
Con esas tres propiedades, tu botón ya tiene la estructura lista para crecer en variantes.
¿Cómo agrego las variantes de tamaño?
Al crear una nueva variante, Figma duplica el botón con las propiedades actuales. Cámbialas según lo que necesites. Para el tamaño medium, ajusta el auto layout a 12 vertical y 24 horizontal [05:53]. Para small, usa 8 y 16 [06:53].
Figma no aplica cambios visuales solos. Tú decides qué cambia cuando alguien selecciona medium o small; el sistema solo guarda esa relación entre la variante y los estilos que tú le asignes.
¿Cómo creo la variante outline?
Duplica las tres variantes de tamaño que ya tienes y cámbiales la propiedad style a outline. El cambio visual lo haces manualmente: el background pasa de primary 300 a white, manteniendo el stroke y el texto [07:40].
Repite el proceso para large, medium y small en versión outline, conservando los mismos paddings que ya definiste antes.
¿Cómo añado el estado hover con sombra?
El estado hover simula la interacción cuando el usuario pasa el cursor sobre el botón. Crea nuevas variantes cambiando la propiedad state de active a hover [08:46].
El efecto visual del hover en este sistema es una sombra. En el panel de efectos, da clic en los cuatro puntitos y selecciona el shadow que ya importaste desde tus fundamentos. Esto funciona gracias a los estilos compartidos que configuraste previamente.
Debes aplicar el hover a las seis combinaciones anteriores:
En total, tu componente termina con 12 variantes que cubren todas las combinaciones de tamaño, estilo y estado.
¿Para qué sirven las variantes en Figma? Permiten agrupar versiones de un mismo componente bajo propiedades configurables, así un solo button puede comportarse como 12 botones distintos sin duplicar archivos.
¿Cómo pruebo que el componente funcione bien?
Ve al panel de assets, donde Figma ya registró tu componente. Arrástralo al canvas y verás un menú con las propiedades size, style y state. Cambia los valores y observa cómo el botón se transforma en tiempo real [12:32].
Este es el momento donde compruebas que tu arquitectura funciona. Si seleccionas medium outline hover y el botón cambia tamaño, color de fondo y aplica la sombra, tu sistema está bien construido.
La lógica detrás es simple: defines la primera variante con todos sus estilos, luego duplicas y modificas solo lo que cambia entre versiones. Figma se encarga de que cada combinación responda al instante cuando la uses dentro de una card, un navbar o cualquier otro diseño.
Muéstrame en los comentarios cómo te quedó tu botón y qué colores escogiste para tus variantes.
