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

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

[karakbitihotra]

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 .

[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!

[sntmuhj]

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

[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?

[VictorySports]

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 YouTube, you might need to talk to someone in order to guide you. I will be happy to see you reply 🙏

[rojmkmz]

How can i use them directly in my design? 1:22

I have my color and text system in figma tokens