How I used a FAB (Material Design 3 Component) In My App's Design

. Mostafa Lotfy

I finally started working on building my first app. And I decided to use Material Design 3 to design it.

In the video above, I talk about a part of this design; The FAB (floating action button), and how I used it in the design of my app.

The second part of the vid is a step-by-step tutorial of how I used Material 3 design kit in Figma to add a custom FAB in the design of my app and I make a mini prototype to present and test it.

You can watch the vid above or you can read this summary.

What is Material Design?

Material Design is Google’s open-source design system, and Material Design 3 is the latest version of it.

The website includes guidelines on using the Material design system to design for Android and the web.

The website is very useful even if you don’t intend to use the material design system. You’ll understand a lot about Ux and Ui.

What is A FAB?

There is a components section on the m3 website that includes every single component of the M3 design system. Including headers, buttons, cards, …

one of these components is the FAB.

The FAB (Floating action button) is a button that is displayed above all other content. Taking up a prominent position. And it should be used to give quick access to the most important action of a page.

There are 2 FAB components, the FAB and the Extended FAB component.

The FAB can only have an icon. But sometimes an icon is not enough to show what the action is then you have the extended FAB component that can include a label alone or one next to the icon.

If you check the FAB, and extended FAB guideline pages on the material design website you’ll find more guidelines and very specific info on how to use the FAB and how not to use it as well.

Foundations page from the m3.material.ion website

Apps Using A Floating Action Button

Google Keep has a FAB embedded in the bottom Nav. That allows the user to quickly add a new note.

Google Keep app using a FAB

And Gmail has an extended FAB to quickly compose a new email.

Gmail using an extended FAB

How I used a FAB in my App’s Design

While wireframing this is how I imagined the FAB.

Hand-drawn Wire frame of my app with FAB

I wanted a main FAB and when I click it 2 other FABs would come app.

FAB from my wireframe drawn in Goonotes on the iPad

This is an exercise-tracking app. So there would be 2 main actions that I want to have quick access to when I’m on any of the main pages. And a FAB is perfect for that.

I thought I’d make adding a workout larger and adding an exercise smaller as adding a workout should happen more often than adding a new exercise.

Wireframe for my app clicked

Clicking on a FAB that opens a list of FAB is inspired by MyNetDiary an app I’m currently using to track my calories.

FAB from MyNetDiary app

So my first attempt to implement this in Figma using the Material 3 kit. This is what you see in the image below.

FAB from the design of my app in Figma

The icons I have do not make the action clear so I must use a label. However the extended FAB already has a place for a label, so I thought there is no need to customize the FAB and I used an extended FAB instead.

Extended FAB from the design of my app in Figma

When clicked it opens up 2 extended FABs, There is no need to have a dismiss FAB when I can just click anywhere outside the buttons. I can dismiss taking an action. 2 extended FAB in the design of my app using Material 3 components

A step-by-step guide to adding an interactive FAB to your design

05:21 – You can go to this part of the vid.

1. Get a copy of the free Material 3 Design Kit Figma Community File

You can follow the link above and all you need to do is press “Get a copy” and you’ll have a copy of it in your drafts folder.

Material 3 design kit in figma

2. Add a device frame to a new page

Create a new page for our design. And add a frame.

I added an Android large device frame from the presets.

Crating a large android device frame in Figma

3. Grab an instance of the device component and drop it in our device frame

This step is optional. If you want you can grab a device frame from the “Styles” page. And adjust the constraints of its elements to always stick to our frame.

Adding a device inside a frame in Figma

4. Grab an instance of the extended FAB from the components page

Before grabbing an instance of the Extended FAB component. Make prototype connections between the enabled, hovered, and pressed states. So that when we present our design and hover or press above the FAB the state changes accordingly.

Do this for the Primary and secondary FABs as we’ll use both.

Making prototype connections to the material 3 component in Figma

Then just grab a copy of the primary FAB and drop it into our design page to take an instance of it. Extended FAB dropped into our design frame

5. Edit the Label and Icon of the FAB

Zoomed in on the extended FAB and edited it

6. Test the FAB’s hover and press states

First turn it into a component, as we’ll add a variant to it soon.

Mouse hovering above the "Create component" button while the FAB instance is selected

Then grab a copy of it and drop it inside our device frame.

An instance of our custom FAB component placed inside the frame of our design

Present it, hover it, and press on it.

Presenting the design and pressing on the FAB and it changes to the pressed state

7. Add an open-state variant

Add a new variant to our extended FAB.

FAB custom component selected and mouse about click the "Add variant" button

The new variant is 2 FABs on top of each other.

Open state with 2 FABs

For the Add button to change to its open state, we’ll use an overlay.

The enabled state of our custom FAB connected to an overlay

An overlay is going to open right on top of the Add FAB and cover it.

Check the close when clicking outside, so we can dismiss the overlay and the open state when we click anywhere on the page away from the buttons.

The overlay placed right on top of the FAB

You can now present our design and see the FAB in action.

FAB is in an open stated and hovering mouse hovering above the create workout button

Finally, you can add a couple of pages with back buttons, so you can have a mini prototype.

Couple of new pages added and adding an on tap back

#materialDesign #figma #figmaTutorial #appDesign #indieDev