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
In questa pagina del sito puoi guardare il video online FAB (material design 3 component) prototype (Figma Tutorial) della durata di ore minuti seconda in buona qualità , che l'utente ha caricato The indieDev 09 gennaio 2023, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 19,358 volte e gli è piaciuto 363 spettatori. Buona visione!
