By Howard Pinsky
One design trend that seems to be sticking, are FAB menus, short for Floating Action Buttons. You may have seen these on many applications you use on a regular basis, and in today’s video, we’re going to create our own using Adobe XD. Let’s get designing.
Here I am in XD with the photo editing workflow I’ve shown off a few times in the past, and to give users quick access to the camera or photo gallery, we may want a button at the bottom right corner of the application. Starting off simple, I’ll grab the Ellipse tool and draw one out, making sure to hold down shift to contain it to a perfect circle. For the color of this button, I’ll want a nice, actionable blue, which I have saved in my assets panel.
With the button in place, we also need an icon, and since the primary action is ‘add’, we can go with a simple plus button. With my text tool, I’ll type out a quick plus button, change the color to white, and use the handy handle below to enlarge it. Great, with the add button ready to rock, I’m going to place both these elements in a group, just to keep things nice and organized.
Next up, we want to create two more buttons – one for the camera, and one for the gallery. Since the buttons will look similar to the one we just created, I’ll duplicate two of them upwards, then delete the plus buttons. I’ll also want to make sure to keep my group names up to date, which will help during the prototyping phase.
This first button is going to act as the gallery trigger, and in my assets panel, I have a symbol saved that I’m using throughout this project which will work perfectly. Next, I’ll do the same for the next button, which will be used to activate the camera. Again, I have a symbol that I’ll drag in and set into place.
Now that all three buttons are set up, I’ll want to not only make sure they’re all grouped and named correctly, but that the add button is on top of the other two. This will let me hide the gallery and camera buttons behind it.
Great, before we create our second state, there’s one more thing I want to add. When the buttons are triggered, I want the rest of the application to dim a touch. So to easily accomplish this, I’ll drag out a rectangle across the entire artboard, set the color to black, then on this screen, decrease the opacity to 0. I’ll also want to make sure that it’s placed behind our newly created buttons.
Alright, now that the first state is complete, let’s work on the second. I’ll start by duplicating this first artboard over to the right, then I'll select the overlay layer that we just created, and increase the opacity to around 90%. Next, I’ll want to move both the camera and gallery buttons above the plus button, and make sure to space them out evenly. I’ll go with a nice 16 pixels in between each. Once in place, I’m going to also make a few modifications to the plus button. First, I’ll slightly decrease the opacity of the circle, then to let users know they can press on it again to cancel the action, I’ll rotate the plus about 45 degrees until its an X.
Beautiful. It’s time to wire this thing up. Switching over to prototype mode, I’ll start by selecting the add button, then I’ll drag the blue handle over to the second artboard. Within the properties, tap will be the trigger, and to instruct XD to animate the differences between these two artboards, I’ll select Auto-Animate for the action. There are a few easing options that will work for an interaction like this, but I’ll go with Snap and set the duration to around 0.4 seconds.
Let’s see this in action. The play button at the top will launch the preview, and clicking or tapping on the add button will kick off the interaction. And now that I’m pretty happy with the way this looks, I’ll jump back in and wire the button back to the first artboard so I can easily cycle through the two states.
And there you have it, your own animated floating action button created using Adobe XD. For more XD tips and tricks just like this, make sure to check out my other videos. I’ll see you soon.
Add navigation to your XD project with a floating action button (FAB). A FAB is a circular button that triggers the primary action in your app's UI. Learn how to create and add a FAB menu to your layout, customize its appearance, and configure the button to respond to user interaction and simulate taps.
