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 m3.material.io 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.
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.
And Gmail has an extended FAB to quickly compose a new email.
How I used a FAB in my App’s Design
While wireframing this is how I imagined the FAB.
I wanted a main FAB and when I click it 2 other FABs would come app.
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.
Clicking on a FAB that opens a list of FAB is inspired by MyNetDiary an app I’m currently using to track my calories.
So my first attempt to implement this in Figma using the Material 3 kit. This is what you see in the image below.
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.
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.
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.
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.
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.
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.
Then just grab a copy of the primary FAB and drop it into our design page to take an instance of it.
5. Edit the Label and Icon of the FAB
6. Test the FAB’s hover and press states
First turn it into a component, as we’ll add a variant to it soon.
Then grab a copy of it and drop it inside our device frame.
Present it, hover it, and press on it.
7. Add an open-state variant
Add a new variant to our extended FAB.
The new variant is 2 FABs on top of each other.
For the Add button to change to its open state, we’ll use 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.
You can now present our design and see the FAB in action.
Finally, you can add a couple of pages with back buttons, so you can have a mini prototype.
Links
- A free Figma Community File (FAB Prototype (material design 3 component
- Material 3 design kit
- Material design 3 website
- FAB component Material 3 Guide
- FAB component Material 3 Guide
#materialDesign #figma #figmaTutorial #appDesign #indieDev