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) 👉 https://oneexercise.mstflotfy.com
✪ My website 👉 https://mstflotfy.com
Free figma community file -- https://www.figma.com/community/file/...
Material 3 design kit -- https://www.figma.com/community/file/...
Material design 3 website -- https://m3.material.io/
Read it -- https://mstflotfy.com/design/fab-mate...
FAB component Material 3 Guide -- https://m3.material.io/components/flo...
Extended FAB component Material 3 Guide -- https://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
Auf dieser Seite können Sie das Online-Video FAB (material design 3 component) prototype (Figma Tutorial) mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer The indieDev 09 Januar 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 19,358 Mal angesehen und es wurde von 363 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
