Design an App from Scratch in Figma (Tutorial)
HTML-код
- Опубликовано: 31 май 2024
- Get the SOURCE FILE for this project ($5.99): payhip.com/b/QILqW
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Visit my STORE: bit.ly/mavi-design-store
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: 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 
Хобби
This guy went to silent mode for a while, then came out of nowhere with this banger, what a champ!!!
Let's gooo!! Amazing Mavi Design, Thank you for doing this!!
i love your videos! good to see you back in action! 💥
thanks brother ❤
Thank you so much Mavi. What a premium course. Cheers to everyone who fought through till the end💪🥂
Love your works! Thank you Mavi🍉
Wonderful brother ❤. Long await course from you. Thank you so much 🎉
Im here to say man, i had to restart with your videos because i couldnt let it go
You are the best
Youve thought me things i never imagined existed in figma. Thank you so much man ❤
been waiting for this since yesterday
Everlasting knowledge.. Thanks Mavi!
Great content, thanks Mavi!
Great tutorial 👏
Thank you so much for this.
You deserve millions of subscribers. 🎉Thankyou for sharing this detailed video. Really helpful😊
Please keep sharing detailed videos like this one.
I was looking for a in depth tutorial on how to make an app in figma since I never used figma before. It's been just some days that I found your channel. When I saw the notification on my phone about your video I got really excited. Thankyou for this!❤
Believe me, you've found the right one! This man is truly amazing, and I'm confident you won't be disappointed. You'll learn a lot from him! Wish you all the best on your Figma journey!
Great tutorial
🐐
You rock brother! I wish you all the good things this life has to offer! Thank you so much for doing this!
🥰🥰🥰
Awesome! Thanks so much
Finally, I completed the video it's very informative and depth knowledgeable video ❤. Thank you so much i learned many more new things from this video 😊
Thanks bro
hey Mavi design love the videos, can you please do such a video for desktop app has well, looking forward
Mavi has taught me Alot
Only if we could do more
amazing
Expecting more videos from figma tool
what would you suggest then for a location to find the rastor images for common android phones? i am trying to make it so i can launch my project on both android and iOS with relative ease for end userr when they want to make interactions with the app
Hell yeah let's go!
Thanks thanks
Oh Mavi Mavi!!! Explicit
Cool!
please do course o variables and tokens in real life project course
at 4.15, you said expose from nested instances . what does that exactly mean ?
link is not working to make the purchase once the item is added to the cart, after pressing the checkout button
Tebrikler 🎉
How to change the layer panel or toolbar size
HELLYEAHHHHH
I have a question and would be grateful if someone can help me:
At 5:13:03, when he scroll down on the "Learn" frame and click the "Connect" icon on the navigation bar, when it's transitioning and if you slow the video down, you can clearly see that the scroll position of the "Connect" frame is the same as where it left the "Learn" frame for a moment (This shouldn't be happening, right?) before going back to the top of the "Connect" frame as it should've been in the first place.
Another time it happens is at 5:13:11, this time the position is locked at the top for a moment when transitioning before going back to where he left the "Dashboard" frame last time.
Does anyone know how to solve this?
I'm having this problem in my own design as well, I've tried searching for the solution on Google and RUclips, tried out a few things that might be relevant, and I've yet to find the solution.
I've also recorded this problem in my own testing design as well which may be clearer to see what the problem is: ruclips.net/video/0AJFaJ3MVXo/видео.htmlsi=cq-X-8uR-9VQ4xdF
You're exactly right, I've wondered about that during the process as well and it's most likely a Figma bug. Shouldn't be happening.
@@mavidesign Alright, I thought it was just me. Thanks for the help and appreciate your tutorials!
The most suffering section was the buttons. Not because it was difficult, but because Mavi made it difficult.
Still, all this is super appreciated
Yeah, I struggled there a lot. Wanted to show the full process, hopefully it’s still useful
Haha totally understandable @@mavidesign
I see the great intention of analyzing the product before releasing it!
😍❤🔥
Hello Bro i have one doubt for example: if the developer is develop a app in flutter framework for both ios and android and as a designer I should design the screens for android or ios. (or) I should design for both android and ios screens.
I also have the same question
ok
Did the police find you?
Why would the police look for me 😂