<p>Published on <a href="http://ift.tt/2p2YmBC">| Prototyping: From UX to Front End &mdash; Medium</a> Martina Pérez <img alt="" src="http://ift.tt/2oIugzT"></p>
<h3>What is a FAB?</h3>
<p>A floating action button represents the primary action in an Android application.</p>
<h3>What is the related actions?</h3>
<blockquote><p>The floating action button can fling out related actions upon press. The button should remain on screen after the menu is invoked. Tapping in the same spot should either activate the most commonly used action or close the open menu.</p></blockquote>
<p>Resource: <a href="http://ift.tt/2jWnKY1">Buttons: Floating Action Button in Google Material Design</a></p>
<h3>What elements do you need?</h3>
<ol>
<li>Screen with the FAB</li>
</ol>
<p><img alt="" src="http://ift.tt/2oICWWY"></p>
<ol>
<li>Image with your related actions</li>
</ol>
<p><img alt="" src="http://ift.tt/2p2WCbg"></p>
<h3>What are the steps?</h3>
<ol>
<li>Place the FAB in Sketch</li>
<li>Export elements from Sketch to inVision</li>
<li>Add the interaction in the inVision prototype</li>
</ol>
<h3>1. Place the FAB in Sketch</h3>
<p>The first thing that you should do is to create the layout of your interface and place the FAB button at the bottom of your artboard leaving transparent the background behind it.</p>
<p><img alt="" src="http://ift.tt/2oIKuc5"></p>
<h3>2. Export elements from Sketch to inVision</h3>
<p>Export your layout screen and the image with your related actions separately.</p>
<p><img alt="" src="http://ift.tt/2p2WCbg"></p>
<p>Once you are in inVision you have to make fixed the FAB button when scrolling. If you are not sure about how to make fixed the FAB you can take a look at <a href="http://ift.tt/2p348Tv">Sketch + inVision: How to do a Floating Action Button (FAB) for Android prototypes</a>.</p>
<p>Afterwards, we can start adding the hotspots to display our related actions.</p>
<h3>3. Add the interaction in the inVision prototype</h3>
<p>Now you will have to add the hotspot to display the related actions, set the position of the related actions image on the screen and add the interaction to close it.</p>
<p><strong>Adding the hotspot to display the related actions<br /></strong>Go to the <em>Build Mode</em> an add a new hotspot over the FAB button. You will get a dialog to set your hotspot. Select ‘Screen as overlay’ in the <em>Link to </em>option. Then, select the image with your related actions as screen. Go back to the <em>Preview mode</em> and click on the FAB button. Your related actions will be displayed on the center of the screen.</p>
<p><img alt="" src="http://ift.tt/2oIoxdg"></p>
<p><strong>Placing the related actions<br /></strong>Go again to the <em>Build Mode</em>, click on the hotspot and change the position of the screen overlay. I recommend you to use the <em>bottom right</em> position as the <em>Custom</em> option doesn’t work very well. The margin-bottom is 48px and the margin-right is 8px. Keep in mind that these measures can change according to your design. Click on ‘Save’.</p>
<p>Uncheck the option <em>Close on clicking outside of overlay.</em></p>
<p><img alt="" src="http://ift.tt/2p33Zj7"></p>
<p><strong>Add the interaction to close the related actions<br /></strong>Now, go to the screen with your related actions. Draw the hotspot in the ‘Close’ action. Select ‘Link Back / Close’ in the <em>Link to</em> option. Click on ‘Save’.</p>
<p>And… voila! you can check the behaviour below.</p>
<p><img alt="" src="http://ift.tt/2oIivcK"></p>
<p>If you like to link more screens from your related actions go to the Related actions image and add hotspots in each of the actions with links to the associated screens.</p>
<p><img alt="" src="http://ift.tt/2p2Z8yi"></p>
<blockquote><p>Did it help you? Press the heart and give me the strength to keep going 🙂</p></blockquote>
<p><iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2puRtdB">http://ift.tt/2puRtdB</a></iframe><img src="http://ift.tt/2oIHb4H" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2p39COt">How to display related actions upon press a FAB in Android prototypes using Sketch + inVision</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


How to display related actions upon press a FAB in Android prototypes using Sketch + inVision

What is a FAB?

What is the related actions?

Top Stories