Radio Inspire

How To Learn Sign Language

Principle Tutorial Button Tap Gesture

Hey, in this video, I’m going to show you
how to use the tap gesture to make a floating action button fling out related actions. As soon as you import the assets, you’ll
see we have a floating action button, 3 related action buttons, and a background image showing our photo app. Add a shadow to all four buttons to add some depth. Then, rearrange them so that the print, share, and upload buttons are centered behind the floating action button. The first thing we want to do is create a
tap gesture on the floating action button. Upon selecting the floating action button,
you’ll see a lightning bolt, which reveals gesture options. Select “Tap” and drag the spaghetti code
arrow on top of the artboard, which will automatically duplicate it for us in its current state. To transform the plus icon into an x icon,
rotate the floating action button by 45 degrees on this new artboard. Then, create another tap gesture linking this
x icon back to its original state. Preview the interaction in the viewer to make
sure it’s working as expected. To make the interaction even smoother, click
on the floating action button tap transition arrow above, which will reveal the animation
properties. In this case, we only want to change the curve
from the default one to be both “Ease-in-and-out”. For consistency, let’s apply the same curve
to the reverse floating action button tap transition. Looking good. Now we want to show the print, share, and
upload buttons fling up from behind the floating action button. The interaction works perfectly well, but
it’s not very delightful, so let’s add some bounce to it. Choose “Spring” as the curve type for
each of the three buttons. Set the friction to 15 instead of 20 for even
more bounce. Looking good. Lastly, set the curve of these 3 buttons to
“Ease Out” on the reverse tap transition. That’s it!

7 Replies to “Principle Tutorial Button Tap Gesture”

Leave a Reply

Your email address will not be published. Required fields are marked *