Get the SOURCE FILE for this project ($5.99): https://payhip.com/b/QILqW
Explore Mavi Design COURSES : https://bit.ly/mavi-design-courses
Visit my STORE: https://bit.ly/mavi-design-store
Get FIGMA for FREE: https://bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: https://bit.ly/figma-professional-plan
Welcome to the Figma mobile app design masterclass. In this 5-hour deep dive FREE course, we're going to explore a process of designing a mobile app prototype and design system in Figma. We're going to assemble a simple design system, create icons, prototype flows, set up microinteractions and more!
Chapters:
00:00:00 – Final Result
00:00:40 – Measuring screen safe zones
00:00:55 – Creating the first test screen
00:01:16 – Creating safe zone areas
00:03:04 – Recreating the status bar (icons, dynamic island)
00:17:00 – Creating safe zone components to be reused
00:22:00 – Establishing Text Styles
00:37:10 – Creating the button component
00:58:27 – Styling the button and making it interactive
01:10:22 – Test screen assembly
01:12:49 – Cleaning up the design system
01:14:12 – Setting up our App Section pages (just placeholders)
01:16:20 – Creating the app navigation bottom bar
01:24:00 – Prototyping the bottom bar navigation
01:32:25 – Creating icons for the bottom bar navigation
01:53:49 – Testing the navigation & iterating on the visual design
01:58:29 – Turning the bottom bar navigation icons into components
02:02:43 – Preparing a dark version for the bottom bar navigation icons
02:04:12 – Experimenting: section icons in headline areas
02:07:07 – Iterating on the bottom bar navigation visual design
02:08:35 – Cleaning up & rearranging the design system
02:11:28 – Beginning to assemble the Dashboard screen
02:14:10 – Creating the accordion component & preparing instances of it
02:32:11 – Creating a sub-page within the Dashboard screen (design + interaction)
02:42:26 – Designing the Chart section (Dashboard screen)
03:05:47 – Reworking the Dashboard screen content
03:11:42 – Creating the Alert / Info / Error component
03:29:21 – Creating the Chip / Label / Tag component
03:31:53 – Creating a set of Chips (Wrap Auto Layout)
03:37:31 – Adding a new instance of the Alert component
03:38:45 – Adding a new variant for the Alert component: Info + applying it
03:45:54 – Creating content for the List section
03:50:00 – Creating a simple Text / Form Field component
03:55:40 – Compiling more components on the List screen
04:08:28 – Creating a Feature Card component
04:17:52 – Creating an interactive Checkbox component
04:26:45 – Messing around, iterating, adjusting
04:29:05 – Creating content for the Connect section
04:30:23 – Designing the user profile round card
04:36:55 – Creating the Global Ranking ladder from Button component instances
04:45:13 – Adding a white fade-out at the bottom of all screens
04:48:51 – More messing around and adjusting
04:51:34 – Making the “Global ranking” headline sticky (stop at top edge)
04:54:06 – Clicking through and thinking what to do next
04:55:52 – Creating content for the Learn screen (using Button component instances)
05:04:02 – Desining a new textbook / learning icon
05:09:43 – Finalizing the Learn page
05:12:28 – Final result, Quality Assurance
————————
© 2023 Mavi Design