Diseño de estados de un botón en Figma

Una de las cosas que pienso que es importante trabajar bien desde el principio y dejar muy bien fijados son los estados de los botones. Hoy quiero hablaros de una parte “básica” dentro del mundo de las variantes en Figma, pero que marca una gran diferencia cuando estás construyendo un sistema de diseño escalable.

No te preocupes si al principio te cuesta o parece un poco lioso. Es totalmente normal. Pero una vez le pillas el truco, crear componentes y asignarles sus estados se vuelve algo natural… y sobre todo muy útil. Diseñar correctamente los estados permite que el botón comunique en todo momento lo que está pasando: si se puede clicar, si ha sido pulsado, si está deshabilitado, etc.

Aquí te muestro cómo lo hago paso a paso en Figma.

Creación del botón base: estado default

El estado default es el punto de partida. Es el estado visual que aparece por defecto, antes de que el usuario interactúe con el botón. Para este ejemplo, he elegido un tono azul brillante (#6CBCFF) que transmite claridad y energía.

El texto del botón es blanco puro (#FFFFFF) para garantizar un buen contraste visual. Además, lo he centrado con una tipografía legible y clara, pensada para pantallas y compatible con distintos pesos tipográficos.

En cuanto a la estructura del botón:

• Tamaño: 204 x 50 px
• Auto layout horizontal: activado con espaciado interno de 16 px a la izquierda y 12 px a la derecha, y 8 px entre elementos internos, pensado para poder añadir un icono en el futuro sin romper la armonía visual.
• Radio del borde: 48 px para un acabado completamente redondeado.
• Clip content activado, lo que asegura que cualquier contenido adicional no sobresalga del componente.

Te pongo aqui las características de mi botón default (base) definido:

Convertir el botón en componente

Antes de crear las variantes, lo primero que tenemos que hacer es convertir nuestro botón base en un componente. Esto es fundamental para que luego podamos generar sus distintos estados (Default, Hover, Pressed, etc.) de forma ordenada y reutilizable.

Para hacerlo, simplemente:

• Haz clic derecho sobre el botón y selecciona “Create component”.
• O usa el atajo de teclado ⌥⌘K (en Mac) o Ctrl + Alt + K (en Windows).

Cuando el botón se convierte en componente, verás que aparece con un icono de diamante morado. A partir de aquí, ya puedes duplicarlo y empezar a crear el resto de variantes.

Consejo: asegúrate de tener todas las propiedades bien configuradas (como el Auto layout, padding, color de fondo y texto), ya que cualquier cambio que hagas aquí se reflejará automáticamente en todas las variantes más adelante.

Estados interactivos

Antes de entrar a crear los estados de los botones, quiero entrar bien en detalle en que entendamos los estados de los botones. Los estados de un botón definen cómo se comporta visualmente según la interacción del usuario. No solo mejoran la experiencia de uso, sino que también guían al usuario en cada paso del proceso. Desde que un botón aparece en pantalla hasta que se desactiva, estos cambios visuales comunican disponibilidad, respuesta y contexto.

Diseñar correctamente estos estados permite:

• Transmitir que un elemento es interactivo.
• Confirmar que una acción ha sido tomada.
• Reflejar accesibilidad para navegación por teclado o pantalla táctil.
• Evitar acciones cuando el botón está deshabilitado.

Por eso, quiero recordarte y contarte mejor, que significado tienen los estados de los botones. Y es que, cuando hablamos de botones en diseño de interfaz, no basta con que “se vean bien”. Es importante que comuniquen visualmente en qué momento del flujo se encuentran. Por eso, definir los distintos estados de un botón es clave para ofrecer una experiencia clara y accesible.

Estos son los estados más comunes y recomendados en cualquier sistema de diseño:

Default (por defecto)

Es el estado base, el que aparece cuando la pantalla se carga y no hay interacción aún. El botón está visible, activo y disponible para clic. Suele tener un color principal (brand o acción primaria) y debe atraer la atención sin ser agresivo.

Hover

Este estado se activa cuando el usuario pasa el cursor por encima del botón. Es una forma de decir “esto es interactivo” y ayuda a anticipar la acción. Lo habitual es oscurecer ligeramente el color o añadir una sombra sutil.

Pressed (o Active)

Es el momento justo en que el usuario hace clic (o mantiene pulsado). Aquí el botón debe mostrar que ha recibido la acción. Se utiliza un color más oscuro, una animación sutil o un efecto de profundidad.

Disabled

Cuando el botón no está disponible, ya sea porque falta completar algún campo o no aplica en ese contexto. Debe lucir claramente inactivo, con un color neutro o desaturado, y sin efectos de hover. Lo importante es que se entienda que no se puede clicar.

Ejemplo práctico de Estados de un botón:

Ahora que ya sabes qué son los estados de un botón y por qué son tan importantes en cualquier interfaz, quiero mostrarte un ejemplo práctico de cómo los he aplicado en uno de mis diseños. En este caso, he creado un botón con sus variantes en Figma siguiendo una lógica clara y sencilla, que puede integrarse fácilmente en cualquier sistema de diseño.

Te dejo aquí cómo se ve cada uno de los estados y en qué momento se usa:

Estado	Color de fondo	Cuándo se usa
Default	#2299EF	Cuando el botón está visible pero aún no hay interacción.
Hover	#0075CE	Cuando el cursor pasa por encima, sin hacer clic.
Pressed	#0058A6	Cuando el botón ha sido pulsado activamente.
Disabled	#D3D3D3	Cuando la acción del botón no está disponible.

Cómo crear variantes del botón en Figma

Una vez que tenemos diseñados todos los estados como componentes independientes, el siguiente paso es unificarlos en un único componente con variantes, lo que nos permitirá gestionarlos fácilmente desde el panel de propiedades.

Paso a paso de crear variantes de «estado» de un botón:

Selecciona todos los componentes individuales (por ejemplo, Button Default y Button Hover).

1.En la barra lateral derecha, haz clic en “Combine as variants”. Esto agrupará los botones en un solo componente maestro. A continuación podrás ver del panel de Figma, como verás que al seleccionar ambos componentes, ya te da la opción de «Combine as variants».

En este paso, Figma generará automáticamente un grupo con la propiedad Variant. Cámbiale el nombre a algo más descriptivo, como State.

2. En cada variante, define el valor del estado: Default, Hover, Pressed, etc.

3. Puedes seguir añadiendo nuevos estados con el botón “+” Add variant, que mantiene la misma estructura base del botón.

Una vez tengas creadas todos los estados necesarios, contarás con un listado de componentes diseñados como este:

Importante: Cualquier cambio que realices en el diseño base del botón (como tipografía, padding, auto layout o iconografía) se aplicará automáticamente a todas las variantes. Esto asegura consistencia visual y evita rediseños innecesarios.