Crear efecto hover en Figma

DiseñoDiseño UI/UX

Crear efecto hover en Figma

¿Qué es efecto hover?

El efecto hover es la modificación de las características de interfaz en algún componente, generalmente se activa al pasar el puntero sobre el mismo, sin tener alguna selección.

Normalmente se utiliza este efecto en la realización de botones, pero se puede utilizar también en imágenes.

¿Cómo crear el efecto hover?

1.- Preparar el diseño

Antes de crear el efecto es necesario crear el diseño e identificar que elemento es el que tendrá el efecto. En este caso usaremos este diseño con un botón.

2.- Crear componente

Duplica el elemento al que le agregarás el efecto, cambia las características como el color, tamaño, etc. Después da clic derecho y selecciona Create component o con las teclas Ctrl + Alt + K.

3.- Interacción

Ya teniendo el elemento inicial y el componente, nos vamos a la barra de la derecha en el menú Prototype y arrastramos la línea de interacción del elemento con el componente. Inmediatamente aparecerá una ventana de interacción.

En la sección Interaction, seleccionamos While Hovering, esta opción indica que mientras el cursor flote hará una acción.

Opción While hovering

En el tipo de interacción, seleccionas Open Overlay.

Opción Open overlay

Después seleccionas la opción Manual y solo alineas el elemento para que concuerde al aparecer.

Opción Manual

Al final tiene que verse así las opciones de la interacción.

Para hacer que el hover tenga un efecto más sueve, vas a la opción Animation y seleccionas Dissolve.

Opción Dissolve

¡Y listo! Ya tienes un elemento con efecto hover.

0 Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Últimas noticias

Consulta nuestras últimas
Noticias & Blog

Crear y mostrar marcadores en apphive

Crear y mostrar marcadores en Apphive

Leer más
crea campos personalizados cmb2 devitm

Crea campos personalizados con CMB2 en WordPress

Leer más
Categoría personalizada Gutenberg - DevITM

Crea una categoría personalizada para bloques Gutenberg

Leer más
Desarrollo bloques gutenberg - DevITM

¿Cómo desarrollar bloques Gutenberg en WordPress?

Leer más

Crear efecto hover en Figma

Leer más