Cómo hacer un efecto de desplazamiento en Figma

Figma permite a los usuarios diseñar y personalizar muchas funciones. Una de las funciones que puede utilizar para mejorar la experiencia del usuario es el efecto de desplazamiento. El efecto de desplazamiento sobre los botones significa que verá un diseño diferente cuando mueva el cursor hacia él. Este efecto en sí puede variar, desde uno estándar que cambia los colores hasta métodos más complicados como cambiar el borde o las luces.

Continúe leyendo para aprender cómo agregar un efecto de desplazamiento a sus componentes en Figma.

Crear efecto de desplazamiento en los botones

Puede configurar un efecto de desplazamiento si desea que su componente tenga una interacción y transición particular cuando pasa el cursor sobre él. El resultado más sencillo que puede crear es cambiar el color del botón para resaltarlo y hacer clic. Así es como puedes crear un efecto de desplazamiento en un componente de botón:

1. Haz el botón.

   

2. Duplícalo y muévelo fuera del marco.

   

3. Cambia el color del botón duplicado.

   

4. Cree componentes haciendo clic derecho y seleccionando «Crear componente» en el menú, o presionando «Ctrl + Alt + K» en su teclado.

   

5. Haga clic en la pestaña «Prototipo» en la barra lateral.

   

6. Conecte los dos componentes del botón.

   

7. En el menú desplegable «Detalles de la interacción», seleccione «Mientras se desplaza».

   

8. Haga clic en la opción «Abrir superposición» en el mismo menú y configure la superposición en «Manual».

   

Cuando el usuario pasa el cursor sobre el botón original, será reemplazado por uno con un color diferente. También puedes cambiar el texto que se muestra en el botón de manera similar.

Tendrás que repetir esto para cada botón.

Crear efecto de desplazamiento en los bordes de los botones

Otra forma de utilizar el efecto de desplazamiento en los componentes del botón es crear un borde que cambie cuando pasa el cursor sobre el botón. Aquí sabrás como podrás hacerlo:

1. Crea un botón con cualquier texto dentro.

   

2. Duplícalo.

   

3. Agrega el trazo al duplicado, elimina el relleno y cambia el color.

   

4. Haga clic en la pestaña «Prototipo» en la barra lateral.

   

5. Conecte los dos componentes del botón.

   

6. En el menú desplegable «Detalles de la interacción», seleccione «Mientras se desplaza».

   

Ahora, cuando obtenga una vista previa del efecto del botón y pase el cursor sobre él, aparecerán los bordes de colores.

Usando el complemento Anima en Figma

Otra forma de agregar un efecto de desplazamiento en Figma es mediante el uso de una herramienta de diseño a código Anima. Este complemento tiene características únicas que puede implementar al crear sitios web, íconos de aplicaciones u otros componentes web en Figma. Sólo necesita elegir qué componente desea animar y ajustar la configuración en consecuencia. Así es como se hace esto:

1. Elija el componente.
2. Abra el complemento Anima.

   

3. Toca la opción «Efecto de desplazamiento».

   

4. Elija el efecto (crecer, encoger, brillar en la sombra y más).

   

5. Personaliza efectos de animación como «Duración» o «Curva».

   

6. Toque el botón «Vista previa» para ver los efectos.

   

7. Haga clic en «Guardar».

   

Otra característica del complemento Anime es que puedes personalizar la transición CSS. Con él, puedes tomar el control de la velocidad de la animación y ajustar su configuración a tus preferencias o hacerla más natural.

Aproveche la función de efecto de desplazamiento de Figma

Ya sea un diseñador profesional o un principiante, tiene muchas funciones en Figma para crear diseños y animaciones únicos para sus componentes, íconos y objetos. El efecto de desplazamiento le permite cambiar el texto o agregar resaltados, diferentes colores, diferentes bordes y más. Saber cómo crear estos efectos es de suma importancia para hacer que su primer sitio web sea interactivo y darle un toque personal.

¿Qué efecto de desplazamiento implementas en tus componentes en Figma? Háganos saber en la sección de comentarios.