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 Show Actions from a Floating Action Button (FAB)

01-min.png
 

Originally published on Prototypr.io - Medium


Building prototypes is a strong and powerful way to communicate your concepts design by allowing all stakeholders to grasp the navigation and interaction of the elements of your interface. It speeds up the process of internal validation since they can see in action how the interface works rather than have to imagine what is in your mind.

What is a FAB?

floating action button (FAB) is one of the components of Google Material Design and represents the primary action in an Android application. It can fling out related actions upon press.

02-min.png

Exporting elements from Sketch

  • Set the position of the FAB button at the bottom of your artboard (leaving transparent the background behind it)

  • Export this image (design screen + FAB)

03-min.png
  • Export another image with your related actions + close button

04-min.png

Create the interaction in the inVision prototype

Now you are in inVision:

  1. Do the FAB (fixed when scrolling)

  2. Go to Build Mode and create a new hotspot over the FAB.

  3. Click on ‘Screen as overlay’ in the Link to option and select the image with your related actions + close button as screen.

  4. Uncheck the option Close on clicking outside of overlay (to avoid closing your related actions when tap on another part of the screen)

  5. Change the position of the screen overlay. Margin-bottom:48px and margin-right: 8px.

07.gif

Go to the screen with your related actions + close button. Create the hotspot over the ‘Close’ action. Select ‘Link Back / Close’ in the Link to option.

08.gif

Link to as many screens as you want by creating hotspots in each of the actions in your related actions + close button image.

What’s next?

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

Hope this helps :) Thanks for reading!

 
martina perez