User Experience Design Portfolio of Martina Pérez

Home

I’m a UX Designer focused on Interaction Design & Research.
I also enjoy sharing my experience with the UX Community

Sketch + InVision: How to Do a Floating Action Button (FAB) for Android Prototypes

01.gif
 

Originally published on UX Planet - Medium


Showing your interaction design to stakeholders by using prototypes is a useful and helpful step into your UX design process. The Floating Action Button represents the main action in a screen design (according to the specs of Material Design), and the FAB is a strong interface element to use in order to make a recognizable UX for Android users.

So imagine you designed the layout with your FAB, and you want to scroll the content of the screen design keeping fixed the Floating Action Button. You need to place the elements in a specific way.

02.png

First, in Sketch, create a rectangle with the colour background that you want in your design and place it behind your content layout (in this case, I created a white rectangle).

Second, place the FAB and bottom bar below your content layout.

03.png

Third, don’t define a background colour for your Artboard. You can check it by selecting your artboard and view the thumbnail on the right side (the background of your artboard behind the FAB has to be transparent).

04.png

Third, don’t define a background colour for your Artboard. You can check it by selecting your artboard and view the thumbnail on the right side (the background of your artboard behind the FAB has to be transparent).

06.png

Fourth, add your screen design to inVision. Then, go to your screen design and select the ‘Build Mode’. Lastly, move the fixed footer just at the end of your rectangle background (above the FAB).

07.png

Then, you will be able to scroll the content and the FAB will be fixed on the screen design.

What’s next?

Join my Skillshare class about how to build prototypes in inVision for more tips: https://skl.sh/2Y4hj6l

Hope this helps!

 
martina perez