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) 👉 [ Ссылка ]
✪ My website 👉 [ Ссылка ]

Free figma community file -- [ Ссылка ]

Material 3 design kit -- [ Ссылка ]
Material design 3 website -- [ Ссылка ]
Read it -- [ Ссылка ]
FAB component Material 3 Guide -- [ Ссылка ]
Extended FAB component Material 3 Guide -- [ Ссылка ]

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

свернуть