En el mundo del diseño de interfaces, la interactividad es clave para crear experiencias memorables. Uno de los elementos más simples pero efectivos para mejorar la interactividad son los efectos hover en los botones. En este blog, mostraré los pasos para prototipar botones utilizando Figma.
Antes de comenzar a crear efectos hover, es esencial tener una base sólida. Abre tu archivo en Figma y asegúrate de tener organizadas tus variantes. Si aún no lo has hecho, crea diferentes variantes para tus botones que representen los estados normales y hover.
Asegúrate de tener una variante para el estado normal y otra para el estado hover. Esto permitirá una transición suave entre los dos estados cuando el usuario pase el mouse sobre el botón, en el blog anterior se explica cómo.
Pasos
Selecciona el botón al que deseas agregar la acción hover en tu lienzo.
En el Layers Panel selecciona la variante Default.
Dirígete al Prototype Panel en el lado izquierdo de la ventana.
En Interactions da clic en el botón +.
En Interactions da clic en el botón +.
Se abrirá un menú y aquí podrá realizar la configuración de la transición entre la variante Default y Hover.
Antes de comenzar a configurar la transición, mostraré otra forma de crear un enlace entre dos variantes. Para ello diríjase al componente y seleccione la variante Default.
Notará que aparecerán unos botones pequeños en azul al pasar el cursor por los lados del botó de la variante default. Estos permitirán crear los enlaces entre ambas variantes.
De clic sobre uno de los botones para crear un enlace y arrastre la flecha hasta la variante hover.
Se abrirá una ventana para configurar la transición entre las dos variantes como en el caso anterior, de clic sobre el siguiente botón.
Seleccione la opción While hovering.
Seleccione la acción Change to.
Y seleccione la variente Hover para que sea el elemento al que debe cambiar cuando se realiza la acción hover
Una vez que hayas establecido el prototipo, realiza ajustes según sea necesario. Puedes ajustar la transición entre los estados hover y default. Puedes cambiar el tipo de transición y establecer su duración. Asegurarte de que la experiencia sea suave y atractiva. Recuerda que los pequeños detalles marcan la diferencia.
Para este ejemplo realizará una transición muy simple. Selecciona Smart animate y Gentle.
Haz clic en el botón Presentar en la esquina superior derecha para probar tu prototipo.
Se abrirá otra ventana, pasa el mouse sobre el botón y observa cómo se aplica la variante hover.
Puedes modificar las configuración de la transición como mejor te parezca, si algo no funciona como esperas, regresa al lienzo y ajusta tus variantes y la configuración de prototipado según sea necesario. Asegúrate de que la interacción sea intuitiva y mejore la experiencia del usuario.
Agregar efectos hover a tus botones no solo los hace visualmente atractivos, sino que también mejora la usabilidad. Con Figma, el proceso es intuitivo y accesible, permitiéndote crear diseños interactivos sin complicaciones. Experimenta con diferentes variaciones y descubre cómo estos pequeños detalles pueden llevar tus diseños al siguiente nivel.