Design an App from Scratch in Figma (Tutorial)

[@MuratKarakus-to4tr]

This guy went to silent mode for a while, then came out of nowhere with this banger, what a champ!!!

[@kmr7684]

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!❤

[@CoolIntellect]

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!

[@El_X_Will]

Thank you so much Mavi. What a premium course. Cheers to everyone who fought through till the end💪🥂

[@ossa4010]

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 ❤

[@Khadijahh20]

You deserve millions of subscribers. 🎉Thankyou for sharing this detailed video. Really helpful😊 Please keep sharing detailed videos like this one.

[@michaelemenike5006]

You rock brother! I wish you all the good things this life has to offer! Thank you so much for doing this!

[@mavidesign]

🥰🥰🥰

[@baazigar5]

i love your videos! good to see you back in action! 💥 thanks brother ❤

[@Adiyat_Coto]

Everlasting knowledge.. Thanks Mavi!

[@ritikachouhan9252]

Omg I so needed this! You're a saviour ❤

[@raynaldofirli]

been waiting for this since yesterday

[@sayekatchakraborty2552]

Wonderful brother ❤. Long await course from you. Thank you so much 🎉

[@nayemhere1]

Love your works! Thank you Mavi🍉

[@MinahilAhmad88]

Dude you are just amazing..every single video on your channel is extremely helpful. Thank you so much for all your efforts!! Keep going!

[@MohilWankar]

this tutorial was my first app design in my UI Jounrey. Thanks a lot for this in-depth tutorial loved your presentation and design thinking. 🥰

[@johnesmaina8552]

Hello teacher @mavi design an awesome tutorial you have recorded for us but on minute 50 , i want to share a helpful way on switching icon colors on different states: On icon swap to a variant, which on different state should change its color, apply the preferred color to the icon and the swap icons shall inherit that color / theme automatically.

[@mariyanrusev6158]

Great lessons in Mavi Design channel. Big UP

[@kelvinjr4854]

This channel is the best channel everrrr 😩

[@chriswerge2372]

Great content, thanks Mavi!

[@updates4043]

Thank you so much for this.

[@innocentpeace3727]

Mavi has taught me Alot Only if we could do more

[@Naveenartistic]

Great course MAVI ! designed along with you throughout this 5hrs, I learnt a lot

[@anotherone5415]

The most suffering section was the buttons. Not because it was difficult, but because Mavi made it difficult. Still, all this is super appreciated

[@mavidesign]

Yeah, I struggled there a lot. Wanted to show the full process, hopefully it’s still useful

[@anotherone5415]

Haha totally understandable @@mavidesign I see the great intention of analyzing the product before releasing it!

[@stevensaleh4263]

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 😊

[@AkinsRealm]

Great tutorial 👏

[@annachmielinska7069]

Hey, great video! Thank you for that! I just have a few questions: 1. Is using components from other figma users allowed in commercial projects or do I have to make my own? 2. If we design for e.g. iPhone 14, how does the app convert to other phone versions?

[@jonathanadiwena]

1. it depends on the license and terms of which components you are using. Eg: You can use open source components like google material for commercial projects. 2. You need to learn how to make responsive components in figma, it can be easily achieved with figma variables and fluid width.

[@KNLE_]

Great tutorial 🐐

[@DroneGraphy]

Oh Mavi Mavi!!! Explicit

[@mluqmanabbasi]

Your content is truly wonderful, i learned bulk of techniques from your channel, truly genuine content no doubt at all. May i ask you where did you learn all of that?

[@mavidesign]

@@mluqmanabbasi thank you! More than a decade in the field :)

[@HafsaMunj]

please share a whole video on mobile app from splash screen to the last page with prototyping

[@Personate777]

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 KZbin, tried out a few things that might be relevant, and I've yet to find the solution.

[@Personate777]

I've also recorded this problem in my own testing design as well which may be clearer to see what the problem is: kzbin.info/www/bejne/ZnKtd5SAaLKJjtEsi=cq-X-8uR-9VQ4xdF

[@mavidesign]

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.

[@Personate777]

@@mavidesign Alright, I thought it was just me. Thanks for the help and appreciate your tutorials!

[@smilli6415]

at 4.15, you said expose from nested instances . what does that exactly mean ?

[@Dupdopy]

Thank you! Wonderful!

[@Hygge2921]

Expecting more videos from figma tool

[@smilli6415]

please do course o variables and tokens in real life project course

[@saudmussadiq7180]

hey Mavi design love the videos, can you please do such a video for desktop app has well, looking forward

[@master036]

How to change the layer panel or toolbar size

[@donlord746]

Download the tutorials but didn't get an activation key?

[@SoYBrownSugga]

link is not working to make the purchase once the item is added to the cart, after pressing the checkout button

[@happyfeva9423]

Awesome! Thanks so much

[@headshotzwillhappen]

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

[@LenaPrisovskaya]

Thank you!

[@alokranjanoraon7336]

i have just copmpleted 50% of the tutorial .. and i'm enjoying it 👍

[@Investment_101]

how can I get access to the discord server you mentioned 😩😩😭

[@JesseHermans-Efenudu]

i paid for the source file downloaded it but cant sim to access it on my windows pc

[@mavidesign]

@@JesseHermans-Efenudu please search for “how to import a .fig file” on Google. If that doesn’t help, reach out to my email

[@GraveRave]

Hell yeah let's go!

[@ManuAntony-ne8te]

Thanks bro

[@AbhinavSingh-is8tu]

very nice

[@zzzzzzzzzzzzzzzzzzz13142]

Tebrikler 🎉

[@jackslifestyle4884]

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.

[@ashiqurrahman3680]

I also have the same question

[@beatrizavelino517]

amazing

[@alexandramcgain3847]

2:15:54 !

[@tomassedlacek3743]

Cool!

[@vamboo8918]

Thanks thanks

[@JF.M.]

Well, not for me, I don't want to be a App/designer I want to use a barebone, almost a wireframe, project to show/feel how the data would interact. To beautify the app, it is another task as I'm new on Figma. I needed a tutorial, from create project to running on my phone. the MVP : Minimum Viable Project. maybe just a button + and a counter , you press the +' te counter increment by doing so, we would learn the environment. And then use "Relay" to to migrate to Android Studio and then code the interaction between the button and the shown result. and create an installation file, so that I can see the whole loop. from Figma to running on my phone. I do For my part, you lost me on the first 30 sec. I had to stop, search how to create a project , and so on... So, I'll continue to try to learn something

[@thnadbrad2185]

HELLYEAHHHHH

[@tadswiech3043]

ok

[@RaufunNur]

😍❤‍🔥

[@chriswerge]

Did the police find you?

[@mavidesign]

Why would the police look for me 😂

[@isak1441]

Where did you get these information and pictures about spacing and safe zone dimensions? Good job man!! 🫡 17:46