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.
En el tipo de interacción, seleccionas Open Overlay.
Después seleccionas la opción Manual y solo alineas el elemento para que concuerde al aparecer.
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.
¡Y listo! Ya tienes un elemento con efecto hover.
Posts relacionados
marzo 22, 2023
¿Cómo crear un carrusel en Figma?
¿Qué es Figma? Figma es un editor de gráficos vectorial y herramienta online enfocado en realización de prototipos de páginas web y aplicaciones móviles. ¿Qué es un carrusel en Figma?…
marzo 17, 2023
Optimización de imágenes para web
¿Qué es la optimización de imágenes? Es el proceso de reducir el tamaño de tu archivo, en este caso imagen mediante el uso de un plugin, donde se crea un intercambio aumentando…
0 Comentarios