Cuando comparto el prototipo diseño enlace con clientes, me piden crear un efecto de desplazamiento en el botón . De esta forma podrán saber qué tan directa es la interacción cuando el usuario apunta con el cursor a uno de los botones del sitio web.
Al principio me sentí confuso porque nunca había hecho tal efecto. Después de navegar, gracias a Dios obtuve una guía del medio escrito por Guus Baggermans .
En mi opinión, este efecto es muy útil para aplicarlo a diseños. Porque así podremos animar más la presentación de nuestro trabajo y podremos tener más cuidado con cómo será cuando los usuarios interactúen con el sitio web o aplicación móvil.
En este artículo, compartiré una guía para hacer que un botón se desplace en Figma. De esa manera, podrás aplicar este método en tu próximo diseño o proyecto.
Para crear un efecto de desplazamiento de botón en figura, asegúrese de haber preparado el diseño primero.
Esta vez daré un ejemplo con un diseño simple, es decir, el suscribir botón en el buzón del boletín.
El siguiente paso es crear un botón que tenga un color diferente al botón principal.
Duplica el botón principal, asegúrate de no ponerlo en el marco. Luego cambie el color, por ejemplo aquí lo cambio para que sea más oscuro, luego haga clic derecho y seleccione “Crear componente” .
botón principal color :#1589DD
Segundo botón: # 0C171F
Crear un componente de botón
También puedes crear componentes usando el atajo de teclado: Ctrl+Alt+K
Estos son los pasos para crear un prototipo del efecto de desplazamiento del botón en Figma:
Después de ingresar al menú del prototipo, arrastre la línea de interacción desde el botón principal al botón flotante. En la sección Interacción, seleccione Mientras flotaPara el tipo de interacción seleccione Abrir superposiciónSeleccionar Manual para la sección de superposición
Ahora puedes practicarlo en tu propio diseño. Con suerte, esto puede ser útil y ayudarlo a diseñar la UI/UX.