Cómo crear un botón de acción flotante (FAB) en Figma para prototipos Android
Mostrar el diseño de interacción a los stakeholders utilizando prototipos es un paso útil en tu proceso de diseño UX. El Botón de acción flotante (FAB) representa la acción principal en un diseño de pantalla dentro del Google Material Design. El FAB es un elemento de interfaz sólido para crear una experiencia de usuario reconocible para los usuarios de Android.
¿Qué es un Botón de Acción Flotante (FAB) en Android y por qué es importante?
“Floating action buttons (FABs) help people take primary actions”
Utilizar un botón de acción flotante puede ser útil cuando quieres destacar una acción principal en una pantalla, o cuando tienes una acción principal y algunas acciones secundarias relacionadas. Por ejemplo, imagina que tienes una galería de fotos. Podrías utilizar un botón de acción flotante como una llamada de acción al usuario para editar las fotografías. Si tienes un botón de crear como principal, podrías mostrar acciones secundarias con las diferentes opciones de creación, como por ejemplo, un documento, un vídeo o un audio.
Cómo fijar un botón de acción flotante al hacer scroll
Imagina que diseñaste el layout con tu botón de acción flotante y quieres hacer scroll vertical manteniendo el FAB fijo en su posición.
Primero, selecciona tu botón de acción flotante.
Ve a la sección de Prototype.
En Scroll Behaviour, haz clic en Position y selecciona Fixed (stay in place).
Ejecuta tu prototipo para revisar la interacción. ¡Así de fácil!
Cómo mostrar acciones relacionadas al hacer tap en un FAB
Ahora quieres mostrar acciones relacionadas al hacer click en el botón flotante principal.
Ve a la sección de Prototype.
Selecciona el FAB principal.
Haz click en Nueva interacción y selecciona Trigger > On Tap.
Selecciona Position > Manual y Close when clicking outside.
Prueba tu prototipo para confirmar que la interacción funciona correctamente. ¡Y listo!
Cómo crear un FAB extendido
Imagina que quieres que el botón de acción flotante se extienda, es decir, que se haga más grande y muestre texto cuando haces scroll en la pantalla.
Crea dos Frames, uno con el FAB en su versión por defecto y otro con el botón extendido.
Selecciona el primer Frame.
Haz click en Nueva interacción y selecciona Mouse enter.
Añade 500ms en Delay.
Selecciona Action > Navigate to > tu segundo frame.
Selecciona Animation > Smart Animate.
Reproduce tu prototipo para verificar la interacción. ¡Listo!
Conclusión
Los botones de acción flotante (FABs) son elementos clave para crear interfaces intuitivas y atractivas en aplicaciones Android. Con este tutorial, ya tienes las herramientas necesarias para integrarlos en tus prototipos en Figma, ya sea que necesites fijarlos al hacer scroll, desplegar acciones relacionadas, o implementar un FAB extendido.
¿Tienes algún tema de diseño UX/UI en mente o necesitas un tutorial en particular? Envíame un correo.
¡Espero que haya sido de ayuda!
