Sketch + inVision: Cómo hacer un botón de acción flotante (FAB) para prototipos en Android

Mostrar tu diseño de interacción a las partes interesadas usando prototipos es un paso que te va a hacer la vida más fácil en tu proceso de diseño UX. Un botón de acción flotante (FAB) representa la acción principal en una pantalla de diseño. El FAB es un elemento poderoso de la interfaz ya que los usuarios de Android lo reconocerán.

Mostrar tu diseño de interacción a las partes interesadas usando prototipos es un paso que te va a hacer la vida más fácil en tu proceso de diseño UX. Un botón de acción flotante (FAB) representa la acción principal en una pantalla de diseño. El FAB es un elemento poderoso de la interfaz ya que los usuarios de Android lo reconocerán.

Imagina que has diseñado el layout para tu FAB, y quieres hacer scroll para explorar más contenido, pero lo que quieres es que tu FAB se mantenga fijo en la pantalla mientras el usuario hace scroll. Necesitas colocar los elementos en una determinada posición.

Primero, en Sketch, crea un rectángulo con el color de fondo que quieras para tu diseño y colocalo detras de tu contenido (en este caso, yo cree un rectángulo de color blanco)

En segundo lugar, coloca el FAB y el bottom bar debajo de tu contenido.

Tercero, no definas un color de fondo en tu mesa de trabajo. Puedes comprobar que tu mesa de trabajo no tiene un color de fondo seleccionando tu mesa de trabajo y mirando la miniatura que aparece en la barra lateral derecha (el fondo de tu mesa de trabajo debería ser transparente)

Cuarto, añade tu pantalla de diseño a inVision. Luego, ve a la pantalla de diseño y selecciona Build Mode. Por último, mueve el fixed footer hasta donde finaliza tu rectángulo de fondo del contenido (encima del FAB)

Una vez hecho esto serás capaz de hacer scroll por el contenido y el FAB estará fijo en tu pantalla.

¿Qué más?

Si quieres saber más, únete a mi clase en Skillshare sobre cómo construir prototipos en inVision usando Sketch y Craft plugin.

¡Espero que haya ayudado!