Learn UI Design for Mobile Apps like a PRO! - Figma Tutorial
HTML-код
- Опубликовано: 4 окт 2024
- 🚀 Create an account on Mobbin for free:
mobbin.com/?re...
In this Figma Tutorial, you are going to learn how to design UI like a Pro. When learning to design UI for mobile apps there are 4 things to consider, fonts, colors, layout, and spacing. By observing the UI design of popular apps we can get an understanding of what makes a good UI design. We will then screenshots of the UI design and try to recreate them in Figma. Using the Material Design UI Kit provided by Google is a really good way to get started in learning UI Design.
Enter the Giveaway to get a FREE Promo Code for Lifetime license:
1. Like the Video.
2. Share the Video.
3. Comment below that you want to enter the giveaway.
Download Developer Assistant from the Plat Store:
play.google.co...
Download Material Design UI Kit:
material.io/re...
Basics of UI Design for Mobile Apps:
• Basics of UI Design fo...
Credits to Arpit for letting me know about this app:
/ appy_013
/ appy013
-----------------------------------------
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Twitter : / kvschethan
Facebook : / designpilot
Mail : designpilot21@gmail.com
Portfolio : behance.net/ch...
Instagram : / design_pilot
Discord: / discord
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
![ADVANCED MOBILE APP UI DESIGN AND PROTOTYPING [FIGMA]](/img/1.gif)
Hey Chethan, just wanted to say thank you for your work, knowledge, and sharing. It's EXCELLENT information! I've only been following your channel for less than a month, by far your knowledge and passion for product design rises above any other channel I've found.
Working in web design many years ago as a visual designer, I've contemplated circling back and relearning today's required skill sets beyond software for product design. Your channel dives into REAL learning details providing the knowledge needed to compete in such a competitive job market.
I like that you are self taught. It proves to others if there is a will there is way to reach your goals. Please continue the outstanding work of teaching with your channel. I hope others will join to support you in your journey and their own ambitions.
Thank you so much. This means so much 🙏
To see layout of any applicable just go to devloper option in phone's settings and enable show layour boundary. It will show you layours of every element on your screen
👍
A true gem for those just starting out and for those looking to brush up on their design skills. I'm also willing to participate in the prize.
For those of you who want to see the elements of any mobile app WITHOUT paying for that android app:
Open/log into said app on your browser (Chrome or Firefox).
Right click and do inspect element.
On the right side or the bar of your inspection window look for a mobile/tablet icon. This should let you see the mobile view of what's in your browser.
Click on inspection tool and have a look at whatever you want. The CSS/code you want might be a bit more buried but it will be there generally. To find the fonts just use a plugin like font-ninja.
I just designed my first screen by following the things you mentioned in this mentioned. Tbh, the screen is still shitty looking but it's definitely some progress from simply just watching theory videos. Might take me some time to improve my Visual design skills. Thankyou soooo much for this video man!!
Easily the best tutorial I've seen on Figma Mobile UI Design replication.
Yay!
Agreed!
I feel soo bad that I found this channel so late . How I wish I was there for the giveaway.
Also Great content dude.Keep up the good work.
Great work Chethan, its super helpful, thankyou!
Hi chetan loved how you teach. You are teaching design on a whole new level more power to u. This is the most professonal course and guide that I have come across on youtube.
This is the best UI tutorial I have to say! Thank youuuuu
Thank you
hi, I want the promo code for a lifetime. I loved your content UI. I get clarity on frame sizes and 1x,2x,3x,4x how they work. Thank you a lot, man
The giveaway ended years afo
I'm too late for this video and your channel. Why I don't found you earlier Your video open my mind and thanks 🙇
Amazing information, thank you so much for such valuable content. That has actually blew my mind. I would like to mention that I am following your content for past few weeks now, it is really helpful, I do not have words to explain but I must appreciate, you are doing something great for people who actually want to learn and build their career in UI/UX. Thanks a lot😃
Nice video and really Informative
This app is very helpful. Material kit for android and ios kit for ios is highly recommended if its a native app.
👍
I found this video worthful, Thank You bro
👍
I cannot thank you enough for what you shared in the video! Liked and subscribed!
A lot of useful info! Thank you so much!
Glad to hear that. Thank you ⚡️
seen and learnt a lot from previous mega courses for web design. You are real charm and I am also participating for prize!
Thanks for the video bro, giveaway plz..
This tutorial is one of the best!❤ Great Video
wen need more of these
Thanks for making such awesome content available for free 🙏
👌
Very very helpful information thank you
Hi Chethan! This was indeed mind-blowing piece of information! Thanks! I'd like to enter the giveaway :)
L4B9EUSQV3ZN3C50G37PCY5
please make more😊
Back days just completed Abhinav Ui/UX playlist, Now I landed here to explore more.
Bro your videos are pure in-depth detail on Ui/UX design, the amount of insight you provided are valuable for me , going to start my case study after completing your videos.
If any code is left I would like to Enter Giveaway it would really help me out.
Thank you!
FXDE30YSCG0FZCUP11SZ63P
@@DesignPilot Thank you, bro!!
✌️
helpful video thnx
Amazing explanation.. why I not watch this earlier.. You are great mentor HAPPY TEACHERS DAY..Is this giveaway is still on?
Hey my guy....hope am not late but this information is mind blowing....can I get a piece
thank you for sharing your knowledge!
Nice work.
I want to get into that giveaway,
Very good information you shared in this video,
I have never seen this kind of video bro.
Excellent Work
K48XAYNBNTDPCA56Y1QS2BM
Wowwowowwww your'e such a blessing 🌟
this developer assitant application app isn't working in oneplus phone. could you please help me with that, I will be very thankful to you
You may not need that anymore. Just try to trace the screens and figure out the values accory
Awesome channel! Just subscribed!
Thanks alot. Please do you have any more voucher, I'm late😣😣
you are amazing, your video is informativ
Love your tutorials, You teach everything in detail with passion for free. I really appreciate it,Looking forward for more videos. Thanks.
I know i am late but i wanna join the giveaway ?!
the Best > thanks
Is it okay to use UI kits for portfolio projects or should we create everything from scratch??
Better to create your own
Amazing video!!! Much much helpful. 👌. Is the giveaway still on? Please reply.
Unfortunately no
Hi design pilot… thank you so much for this Video ..it’s super helpful as I am a complete beginner ..is there any chance if the Promocode still available ¿?
Thank you so much for these videos. Is the giveaway still available?
Nailed it Chethan! Keep making these great tutorials
yea for the giveaway Im in!
EJABUW65H5U53CZX19EZZZL
Thanks for this video, I learned a lot of stuffs. I think I'm late :( Can I have a code? Thanks.
Previous was doing by taking screenshot and practice BUT this video unlocked the different experience to understand UI better and core of it. Thankyou
I want to enter the giveaway.
N47ARJJDXCUYMD52DUEDDEF
@@DesignPilot Thankyou :) made my day. Really appreciate it.
Entry for the giveaway!! So happy I found your channel(subscribed!), thank you so much for the tutorial and introducing all the great tools
🔥🔥🔥
U6X39PTAT7MG44FHXJKCRLV
II did everythinng and shared
Too good! So informative and does justice to the video title! I know I am quite late, but I wish I could get the giveaway!
BPM2ZDQX2AUNV9ZDS48GXW5
@@DesignPilot Thanks much! Sadly my device isn't compatible with App's version!😦
Beauty. I loved this tutorial. Looking forward for more of these! is this giveaway still on?
This video was so informative. Honestly never knew that app existed and now it makes it so much more easier and helpful. Thank you. I'm up for the give away.
P5NE1SHPTD23QU6BWTHW25E
I learned many things from this video💜
I wanna be in giveaway, i know i am late though
URFXL1MBF6TUV6F3ZLU8F1G
Video really helped me!!!
🎉
Thanks for telling us about the app. I'm so in for the giveaway!!
G4WFVXAM36C8Q0HXAMC4NTB
@@DesignPilot thank you so much Chetan. Couldn't have been more happier❣️
Really awesome tips you give bro I am waiting for your next tutorial about website design process thank you for sharing your knowledge 😀
Website Design is next week
@@DesignPilot Please also explain how to come up with Ideas/Theme/Concept for Website.
Thank you...
✌️
Your video is very useful and informative.
Keep doing the great work👌
Thank YOU so much Sir, You are Amazing
Love You
What purpose does the screenshot of the app in 1080 X something serve in Figma? Have I missed some steps?
What do you mean?
Do you need the status bar in Material Design 3? Cause I haven't find it in their guidelines. There was only top app bar, but not the system one.
Is it hidden when you use the app or they just haven't added it yet?
Good question. The status bar has nothing to do with Material Design. It comes with the phone. Even if it’s hidden in the app, it’s still there but not visible. So you must always have the status bar when designing screens.
Informative tutorial 💯
🙌
thank you great content .
Awesome tutorial mate, which phone are you using?
IPhone 12 Pro
The Android? It looks like a Pixel but not sure which model
wow Nice man !!
I think I'm too late to watch the tutorial,,really informative tutorial
Is the app 'developer assistant' still available to download on iPhone? There is no search result I can see. oh its only for Android
Unfortunately not
Absolutely amazing!!! This video is a gold mine 👌. Is the giveaway still on?
345TWL8EL9YYQWMVG6XVAXH
I am a beginner to mobile app design and this is absolutely useful. Thank you so so much... I am trying the developer assistance and honestly it is a wow.. Hope i am not too late for the give away. If it's available please share... Thanks
F0LNSTCL85AGF65GU7S4Z5U
@@DesignPilot Thanks Man...
Question please, how did you do all those screenshot. Did you do it using the regular phone screenshot or there is a function in the developer assistance app?
Regular screenshot
@@DesignPilot Thanks, Man. Another Question please,... What about the Theme UI used @17:59.. How did you get it..
I would like to everett for promo code!! Great video thanks!!!
Any idea if there is a iOS equivalent for the Developer Assistant?
There isn’t unfortunately. iOS doesn’t allow apps to run on other apps.
Hey Chethan, I subscribed to your channel the moment I completed this video. Hats off to you man 💯. I know it's been a while but is the giveaway still on?
That app was really useful tho
Man, this is so insightful. Am I too late for the giveaway? Are there any more left?
62QUG0MY11XGWP4GVSBQZPG
@@DesignPilot How did you get the material guideline used in @18:06
There were many mind-blowing information here. Thank you so much. Could I join the giveaway now, it's late :((
Sorry. Its to late
@chethan Can't thank you enough for these tutorials, I must say this tutorial was very nicely done to get hang of. You are an amazing mentor and a great designer :) And YES I WANT TO ENTER THE GIVEAWAY AS WELL!
Thanks a lot Smriti. This means a lot 🙏
1NXGA3RD6151GQXM4T0CEFP
Really informative..liked the detailed analysis of these apps using Developer Assistant.
And yes, I want to enter the giveaway.
🙏
SQCCX4HFUKQY333F721HM87
@@DesignPilot Thanku so much.. means a lot 😊
Oh my god this is the best video to learn really cool . I know I am very very very late.. But do you have any more voucher or can you ask for more please 🙏🙏
Thank you. But unfortunately no vouchers left
@@DesignPilot cool no problem 👍
Hi Chethan Sir, Got to know about your channel Love your work and teaching style. Your videos help a lot. i know am bit late is there any chance of promo code for Developer assistant app are available/still left?
Great stuff chethankvs , Developer assistant app helps in understanding about the font size and colour of live app which is very important for the beginner like me ... Thanks lot for this stuff and keep making vedio over design. Be an Inspiration.
I want to enter the giveaway😊
N5V1LJ6H21XZZS8XG5FWLTQ
Hi, Is there any way to inspect apps element on an iPhone?
Unfortunately not
Really amazing video. Learned a lot, Thank you please share the giveaway code
Giveaway ended many years ago
@@DesignPilot haha okayy
It make my basics clear...Thankyou for this😇😇
Also, I want to have a promocode for the Developer Assistant App...it will be nice if you share it with me.
Watch my recent videos, you won’t need the developer assistant app. There is a better way to learn
@@DesignPilot Thankyou again😇
Entry For the giveaway. Actually Thanks Much for this tutorial, a great way to start.
9YFZGA8L3WUZMPRXKMJ3L82
Now you have any promo code
Actually I am a freelancer so would you please help me with my question as to
How can I forword my work done in figma to my clients so that they can access it.
Hi Chethan, I was not aware of developer assist app. I think It's a mush have app for the designers. Thanks for sharing your knowledge 🙂
K6Q6XGQH6NE3YHHBW0W44SE
@@DesignPilot Thanks buddy
But how to use this code in the app. Didn't get any section to redeem this.
@@iamcrashish go for the PRO option in the app.. And there will be two options.... Choose permanent licence... And then payment.. There you will see redeem code
@@mimickingminds5737 Thanks 🙂
Hey Chethan! Your videos are great. I am very late but is the giveaway still on?
No codes left
What’s the best size to start to build website as UI designer
You can start with 1440
Thank you brother 🌹
Hi Chetan, thankyou for the video! Very informative for beginners like me :) I really wanted to enter the Giveaway, is there any chance now?
I am a Beginner in UI designing. This video is very helpful. Thank you so much for your tutorials.
If the giveaway is still going on can you please share the vouchers?
TD1WCD6FWYJFP7MJVEB6K3D
@@DesignPilot Thank you so much
Video so awesome....is it still there giveaway??
WDXW21VRCYFDUTEP1YUBPJU
Hi Chetan, Cant thank you enough for this information. Its so helpful for a beginner like me.... I want to be in the giveaway, i know i am late though....
3AL18YPGB2MFW0LZ5QEU42D
@@DesignPilot thank you so much for the promo code!! 🙂
Amazing video Chethan. Thankyou so much for the guide. Ik it's too late but can I enter the giveaway? Thankyou so much in advance.
VY74P4ESSNDHR6DDPQ9BSTV
Hi, I have subscribed your channel. Do you have anymore vouchers for Developer Assistant?
ZQ1VN3X2NL6LTAW2XWEXSWD
bro why did u change screenshot to 411 while u designed on 360??
Cause my phone has a width of 411 rather than 360. You might have to check every phone’s width if you are planning to replicate a screenshot
Can you please teach us on how to design mobile app ui in photoshop like pro
Please dont use photoshop for Ui design 😂
How did your developer assistant 1/4 of the screen?
No idea
Loved the video! Is the giveaway still ON ? 😕
15MEC4FPM2RKXULPBMRJAS6
Hey Chethan, I subscribed to your channel the moment I completed this video. Hats off to you 💯. I know it's been a while but is the giveaway still on?
EZMKSPC523RG67NQ2N5ZW75
Nice video
Thanks
sick brooo
✌️
awsum video I too want to enter the giveaway
ET4HMT5JW2M2NPWR76AZ2NV