FAB (material design 3 component) prototype (Figma Tutorial)

I am finally working on my very first app; a workout tracker. To design the app I decided to use Material Design 3 (Google's open-source design system), I'll talk about the design process and lessons learned in a future video. In this video, I focus on one component of Material Design 3, the FAB (floating action button).
The FAB represents the most important action on a page.
It makes it easy to take the most important action (The most common action that people will most likely repeat every time they use the app), it makes it obvious, as it appears above scrolling content, and makes it feel important.
I talk a bit about the FAB and its use. Then I show you how I used it in the design of my application, and some choices I had to make. Finally, in the second part of the video I show in a step-by-step tutorial, exactly how I used Material 3 design Kit in Figma to add a FAB in my app's design.
LINKS
✪ Check out my workout tracker App: 1Xercise (OneExercise workout tracker) 👉 oneexercise.mstflotfy.com
✪ My website 👉 mstflotfy.com
Free figma community file -- www.figma.com/community/file/...
Material 3 design kit -- www.figma.com/community/file/...
Material design 3 website -- m3.material.io/
Read it -- mstflotfy.com/design/fab-mate...
FAB component Material 3 Guide -- m3.material.io/components/flo...
Extended FAB component Material 3 Guide -- m3.material.io/components/ext...
Topics Covered
- What is Material Design 3?
- What is a FAB (floating action button) component?
- How I used a FAB in my App's design
- How to use a FAB component
- How to use Material Design 3 Figma kit
- A step-by-step guide to add an interactive FAB to your Figma design
Chapters
00:00 -- Intro
00:21 -- What is Material Design 3?
01:25 -- What is a FAB?
02:55 -- Real-life apps that use a FAB
03:31 -- How I used a FAB in my App's design
05:21 -- A step-by-step guide to adding an interactive FAB to your design
#materialdesign #figma #figmatutorial #appdesign #indiedev

[@theindiedev.mstflotfy]

Check out the free figma community file -- www.figma.com/community/file/1195342405127749072
✪ Check out my workout tracker App: 1Xercise (OneExercise workout tracker) 👉 oneexercise.mstflotfy.com
✪ My website 👉 mstflotfy.com

[@karakbitihotra5224]

idk how to thank you my man . I was stuck with these for like a month and wasn't able to make meaningful progress on my project. Thank you so much .

[@theindiedev.mstflotfy]

You're welcome. Really happy you found it helpful. If you're still having trouble with it let me know. I'm still exploring but perhaps I could help.

[@Tuxedothursday]

Nice video! Was struggling with adding icons to the Material 3 style sheet, with your help, I was able to do it, thank you!

[@theindiedev.mstflotfy]

Nice! Happy your found it helpful

[@lismaiden]

Love the way you explain. Thanks!

[@hexasmartitagency5620]

Awesome explanation

[@saurav007cool4u]

Really helpful
Thanks

[@oxysolrise2001]

great job 😚

[@user-sn5tm1uh9j]

Thank you for tutorial. I have faced a situation when FAB is unseen in prototype. Can not understand why? on an empty frame it works, on a autolayout page it is not showing while prototyping

[@theindiedev.mstflotfy]

Sorry for the late reply, haven't been here for a while. It is hard for me to tell without having a look at the file, but I have found that Figma prototypes are sometimes buggy. Hope you solved the issue.

[@emlioms]

Really nice video!
I am a beginner at Figma and I have one question: Why at the begining, you decide to resize the material 3 device component and not the first android frame?

[@theindiedev.mstflotfy]

Sorry for the late reply. I resized it because I chose a specific size for the design of my frame (which is the size of a specific mobile device), and by using constraints it will follow the size of the frame anyways. So if we choose a new device with new size the android frame should just change accordingly. I hope this makes sense. But since we want it (the Android frame) to follow our device frame around thus we resize it and apply constraints to it to stick to our device no matter what size we change our device to.

[@VictorySports987]

Do you know that I leaned something new today? Thanks for the video though. I need someone to mentor me in this industry, sometimes you don't fine all the answers you need on RUclips, you might need to talk to someone in order to guide you. I will be happy to see you reply 🙏

[@theindiedev.mstflotfy]

I'm happy to hear it! Hopefully you find the video helpful. If you have Figma related questions let me know

[@user-ro4jm8km3z]

How can i use them directly in my design? 1:22
I have my color and text system in figma tokens

[@theindiedev.mstflotfy]

Hey, sorry for the late reply! Not sure what you mean really, do you mean how to use the Material 3 components directly without using them as a base for your custom components?