Design an App from Scratch in Figma (Tutorial)
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
Watch video Design an App from Scratch in Figma (Tutorial) online without registration, duration hours minute second in high quality. This video was added by user Mavi Design 09 December 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 45,170 once and liked it 1.9 thousand people.