Learn UI Design for Mobile Apps like a PRO!

No video

Learn UI Design for Mobile Apps like a PRO! - Figma Tutorial

Рет қаралды 59,632

4 жыл бұрын

🚀 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 :)

Пікірлер: 477

@kirtanyakardum6676 4 жыл бұрын

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

@DesignPilot 4 жыл бұрын

👍

@thinkjon Жыл бұрын

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.

@DesignPilot Жыл бұрын

Thank you so much. This means so much 🙏

@lisscat 4 жыл бұрын

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.

@not_now1820 Жыл бұрын

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

@sajidshakeel3681 Жыл бұрын

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.

@aerik999 4 жыл бұрын

Easily the best tutorial I've seen on Figma Mobile UI Design replication.

@DesignPilot 4 жыл бұрын

Yay!

@irsyadrouyani4073 3 жыл бұрын

Agreed!

@AdityaBolt 4 жыл бұрын

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.

@shikhakumari9690 Жыл бұрын

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😃

@vasagiridesigns2076 2 жыл бұрын

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

@DesignPilot 2 жыл бұрын

The giveaway ended years afo

@sammarkhalil7330 Жыл бұрын

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.

@romanmir8443 3 жыл бұрын

I'm too late for this video and your channel. Why I don't found you earlier Your video open my mind and thanks 🙇

@harshpopat 2 жыл бұрын

Great work Chethan, its super helpful, thankyou!

@gyulboxing 2 жыл бұрын

I cannot thank you enough for what you shared in the video! Liked and subscribed!

@surendarkumar-rs1og 4 жыл бұрын

This app is very helpful. Material kit for android and ios kit for ios is highly recommended if its a native app.

@DesignPilot 4 жыл бұрын

👍

@lisavu204 2 жыл бұрын

This is the best UI tutorial I have to say! Thank youuuuu

@DesignPilot 2 жыл бұрын

Thank you

@diogos7233 2 жыл бұрын

Thank you so much for these videos. Is the giveaway still available?

@elviscreations1498 2 жыл бұрын

Nice video and really Informative

@boxofsecrets6260 2 жыл бұрын

Amazing explanation.. why I not watch this earlier.. You are great mentor HAPPY TEACHERS DAY..Is this giveaway is still on?

@harshitverma9298 4 жыл бұрын

I found this video worthful, Thank You bro

@DesignPilot 4 жыл бұрын

👍

@AneeqaChowdhury Жыл бұрын

seen and learnt a lot from previous mega courses for web design. You are real charm and I am also participating for prize!

@vyshakiv9739 2 жыл бұрын

Thanks for the video bro, giveaway plz..

@AsimAntuleVlogs 2 жыл бұрын

This tutorial is one of the best!❤ Great Video

@aryanr1201 3 жыл бұрын

Beauty. I loved this tutorial. Looking forward for more of these! is this giveaway still on?

@yuanjoyce6663 4 жыл бұрын

A lot of useful info! Thank you so much!

@DesignPilot 4 жыл бұрын

Glad to hear that. Thank you ⚡️

@not_now1820 Жыл бұрын

Is it okay to use UI kits for portfolio projects or should we create everything from scratch??

@DesignPilot Жыл бұрын

Better to create your own

@den_vortezio Жыл бұрын

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?

@DesignPilot Жыл бұрын

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.

@ushadesai6306 Жыл бұрын

What purpose does the screenshot of the app in 1080 X something serve in Figma? Have I missed some steps?

@DesignPilot Жыл бұрын

What do you mean?

@vijetanayak8398 4 жыл бұрын

Hi Chethan! This was indeed mind-blowing piece of information! Thanks! I'd like to enter the giveaway :)

@DesignPilot 4 жыл бұрын

L4B9EUSQV3ZN3C50G37PCY5

@dawn2dusk740 Жыл бұрын

Thanks for this video, I learned a lot of stuffs. I think I'm late :( Can I have a code? Thanks.

@masterkeeran 3 жыл бұрын

Amazing video!!! Much much helpful. 👌. Is the giveaway still on? Please reply.

@DesignPilot 3 жыл бұрын

Unfortunately no

@paddywakasiaka4176 2 жыл бұрын

Hey my guy....hope am not late but this information is mind blowing....can I get a piece

@mehulvarshney4374 3 жыл бұрын

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

@gsumeetsamuel6590 4 жыл бұрын

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!

@DesignPilot 4 жыл бұрын

FXDE30YSCG0FZCUP11SZ63P

@gsumeetsamuel6590 4 жыл бұрын

@@DesignPilot Thank you, bro!!

@DesignPilot 4 жыл бұрын

✌️

@tattoosupporter 2 жыл бұрын

Is the app 'developer assistant' still available to download on iPhone? There is no search result I can see. oh its only for Android

@DesignPilot 2 жыл бұрын

Unfortunately not

@nehakumari466 3 жыл бұрын

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

@patel_tej 4 жыл бұрын

Absolutely amazing!!! This video is a gold mine 👌. Is the giveaway still on?

@DesignPilot 4 жыл бұрын

345TWL8EL9YYQWMVG6XVAXH

@aisosaobasohan4265 4 жыл бұрын

Thanks alot. Please do you have any more voucher, I'm late😣😣

@atifahidari3449 10 ай бұрын

Hi, Is there any way to inspect apps element on an iPhone?

@DesignPilot 10 ай бұрын

Unfortunately not

@smilli6415 Жыл бұрын

wen need more of these

@gamingzone9253 4 жыл бұрын

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

@DesignPilot 4 жыл бұрын

K48XAYNBNTDPCA56Y1QS2BM

@arjunpillai8172 4 жыл бұрын

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.

@DesignPilot 4 жыл бұрын

P5NE1SHPTD23QU6BWTHW25E

@shaheenkerur8868 2 жыл бұрын

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 ¿?

@matthewshu5458 Жыл бұрын

Any idea if there is a iOS equivalent for the Developer Assistant?

@DesignPilot Жыл бұрын

There isn’t unfortunately. iOS doesn’t allow apps to run on other apps.

@milindkhadse556 2 жыл бұрын

Very very helpful information thank you

@pratikaher3313 4 жыл бұрын

Thanks for making such awesome content available for free 🙏

@DesignPilot 4 жыл бұрын

👌

@olebogengmoeng595 4 жыл бұрын

Man, this is so insightful. Am I too late for the giveaway? Are there any more left?

@DesignPilot 4 жыл бұрын

62QUG0MY11XGWP4GVSBQZPG

@nelvinnsude 4 жыл бұрын

@@DesignPilot How did you get the material guideline used in @18:06

@nishasingh8495 4 жыл бұрын

Can you please teach us on how to design mobile app ui in photoshop like pro

@DesignPilot 4 жыл бұрын

Please dont use photoshop for Ui design 😂

@eumm11 3 жыл бұрын

thank you for sharing your knowledge!

@rrayonyoutube 4 жыл бұрын

Entry for the giveaway!! So happy I found your channel(subscribed!), thank you so much for the tutorial and introducing all the great tools

@DesignPilot 4 жыл бұрын

🔥🔥🔥

@DesignPilot 4 жыл бұрын

U6X39PTAT7MG44FHXJKCRLV

@nishasingh8495 4 жыл бұрын

Your video is very useful and informative. Keep doing the great work👌

@ashishsoni2431 4 жыл бұрын

Really awesome tips you give bro I am waiting for your next tutorial about website design process thank you for sharing your knowledge 😀

@DesignPilot 4 жыл бұрын

Website Design is next week

@bajiraosingham9495 4 жыл бұрын

@@DesignPilot Please also explain how to come up with Ideas/Theme/Concept for Website.

@vikramsahai08 4 жыл бұрын

Awesome channel! Just subscribed!

@BoldMindHQ 4 жыл бұрын

Nailed it Chethan! Keep making these great tutorials yea for the giveaway Im in!

@DesignPilot 4 жыл бұрын

EJABUW65H5U53CZX19EZZZL

@AmoghSrivastava 3 жыл бұрын

Awesome tutorial mate, which phone are you using?

@DesignPilot 3 жыл бұрын

IPhone 12 Pro

@AmoghSrivastava 3 жыл бұрын

The Android? It looks like a Pixel but not sure which model

@prajwalpatil4588 4 жыл бұрын

bro why did u change screenshot to 411 while u designed on 360??

@DesignPilot 4 жыл бұрын

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

@ayeshameshram8665 2 жыл бұрын

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?

@jumanaalali8354 3 жыл бұрын

you are amazing, your video is informativ

@louismacdonald3755 Жыл бұрын

Hi what’s the iPhone equivalent of the developer measurement tool please?

@DesignPilot Жыл бұрын

Unfortunately there isn’t. But you don’t need the app

@louismacdonald3755 Жыл бұрын

@@DesignPilot ok thanks I have been importing most app screenshots into figma via airdrop and then arranging to fit a preset frame size like iphone 11 ... form there i measure in a grid of 8px and match the font sizes as close as possible to the screenshot overlay :)

@DesignPilot Жыл бұрын

Yes. That’s the right way to learn

@shereengrg 3 жыл бұрын

Hi Chetan, thankyou for the video! Very informative for beginners like me :) I really wanted to enter the Giveaway, is there any chance now?

@strengthandmotive 4 жыл бұрын

I learned many things from this video💜 I wanna be in giveaway, i know i am late though

@DesignPilot 4 жыл бұрын

URFXL1MBF6TUV6F3ZLU8F1G

@amitsakpal385 4 жыл бұрын

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.

@DesignPilot 4 жыл бұрын

N47ARJJDXCUYMD52DUEDDEF

@amitsakpal385 4 жыл бұрын

@@DesignPilot Thankyou :) made my day. Really appreciate it.

@varshakapil8224 2 жыл бұрын

please make more😊

@user-wn6bt1dr9e 3 жыл бұрын

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.

@apoorvaagarwal9255 Жыл бұрын

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.

@DesignPilot Жыл бұрын

Watch my recent videos, you won’t need the developer assistant app. There is a better way to learn

@apoorvaagarwal9255 Жыл бұрын

@@DesignPilot Thankyou again😇

@Itsabigailsunday 4 жыл бұрын

Oh man I am five months late lol for the giveaway. Do you have anymore vouchers?

@DesignPilot 4 жыл бұрын

9T8SDTC8T39FK6X6DU2UK78

@moajmasti416 4 жыл бұрын

Thank YOU so much Sir, You are Amazing Love You

@dikshasaxena5260 4 жыл бұрын

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!

@DesignPilot 4 жыл бұрын

BPM2ZDQX2AUNV9ZDS48GXW5

@dikshasaxena5260 4 жыл бұрын

@@DesignPilot Thanks much! Sadly my device isn't compatible with App's version!😦

@vannneldas 2 жыл бұрын

Wowwowowwww your'e such a blessing 🌟

@vannneldas 2 жыл бұрын

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

@DesignPilot 2 жыл бұрын

You may not need that anymore. Just try to trace the screens and figure out the values accory

@harshbadhai5468 4 жыл бұрын

Hey Chethan! Your videos are great. I am very late but is the giveaway still on?

@DesignPilot 4 жыл бұрын

No codes left

@anhduy.47 3 жыл бұрын

There were many mind-blowing information here. Thank you so much. Could I join the giveaway now, it's late :((

@DesignPilot 3 жыл бұрын

Sorry. Its to late

@srotaswinisahoo4132 4 жыл бұрын

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 🙏🙏

@DesignPilot 4 жыл бұрын

Thank you. But unfortunately no vouchers left

@srotaswinisahoo4132 4 жыл бұрын

@@DesignPilot cool no problem 👍

@aarishlakhani9475 4 жыл бұрын

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?

@DesignPilot 4 жыл бұрын

EZMKSPC523RG67NQ2N5ZW75

@GeorgeHandle0 2 жыл бұрын

Is there an app similar to developer assistant on the app store? I don't have an android :(

@DesignPilot 2 жыл бұрын

Unfortunately not

@GeorgeHandle0 2 жыл бұрын

@@DesignPilot that’s such a shame!

@Daly69 2 жыл бұрын

i like your video but i have a stupid question .. this video is speeded up or you are eminem ?

@debimishra7325 4 жыл бұрын

How did your developer assistant 1/4 of the screen?

@DesignPilot 4 жыл бұрын

No idea

@nelvinnsude 4 жыл бұрын

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

@DesignPilot 4 жыл бұрын

F0LNSTCL85AGF65GU7S4Z5U

@nelvinnsude 4 жыл бұрын

@@DesignPilot Thanks Man...

@nelvinnsude 4 жыл бұрын

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?

@DesignPilot 4 жыл бұрын

Regular screenshot

@nelvinnsude 4 жыл бұрын

@@DesignPilot Thanks, Man. Another Question please,... What about the Theme UI used @17:59.. How did you get it..

@josephstanley 2 жыл бұрын

Hi there, I'm in a transition from XD to Figma, and I realize that Figma doesn't have the mobile viewport height setting like in XD, may I know how can I do this in case I have very long mobile layout? (for scrolling down)

@DesignPilot 2 жыл бұрын

It does not work that way in Figma. You don't have to set anything. It works automatically

@rahultupe804 3 жыл бұрын

helpful video thnx

@MrBsattas 4 жыл бұрын

What’s the best size to start to build website as UI designer

@DesignPilot 4 жыл бұрын

You can start with 1440

@MrBsattas 4 жыл бұрын

Thank you brother 🌹

@iamcrashish 4 жыл бұрын

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 🙂

@DesignPilot 4 жыл бұрын

K6Q6XGQH6NE3YHHBW0W44SE

@iamcrashish 4 жыл бұрын

@@DesignPilot Thanks buddy

@iamcrashish 4 жыл бұрын

But how to use this code in the app. Didn't get any section to redeem this.

@mimickingminds5737 4 жыл бұрын

@@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

@iamcrashish 4 жыл бұрын

@@mimickingminds5737 Thanks 🙂

@FacelessAItechHub 4 жыл бұрын

Now you have any promo code

@hardikagawde2908 4 жыл бұрын

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?

@DesignPilot 4 жыл бұрын

TD1WCD6FWYJFP7MJVEB6K3D

@hardikagawde2908 4 жыл бұрын

@@DesignPilot Thank you so much

@kushalyadav1751 4 жыл бұрын

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.

@DesignPilot 4 жыл бұрын

VY74P4ESSNDHR6DDPQ9BSTV

@crickettalk361 4 жыл бұрын

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😊

@DesignPilot 4 жыл бұрын

N5V1LJ6H21XZZS8XG5FWLTQ

@sravan10421 4 жыл бұрын

Video so awesome....is it still there giveaway??

@DesignPilot 4 жыл бұрын

WDXW21VRCYFDUTEP1YUBPJU

@Uxarif 4 жыл бұрын

wow Nice man !!

@lalitbarai 4 жыл бұрын

Video really helped me!!!

@DesignPilot 4 жыл бұрын

🎉

@jasongunter2586 3 жыл бұрын

I would like to everett for promo code!! Great video thanks!!!

@stan4457 4 жыл бұрын

Hello bro. I am at the very beginning stage of UI designing. Just want to thank you for your tutorials. I am going through each one of your tutorial and learning how it all works. ☺️ Btw is the giveaway still there?

@DesignPilot 4 жыл бұрын

QGB4PKP7Q6VCAD2EVGZM0JP

@stan4457 4 жыл бұрын

@@DesignPilot 😲😲Thank you bro. Thank you soooo much ❤️❤️

@yashrajraut5755 3 жыл бұрын

Hey Chetan, I am watching your whole series of videos and wish I could see this one earlier. So Is the voucher still available?

@DesignPilot 3 жыл бұрын

Unfortunately Nope

@KirubanandanSwaminathan 4 жыл бұрын

Hi, I have subscribed your channel. Do you have anymore vouchers for Developer Assistant?

@DesignPilot 4 жыл бұрын

ZQ1VN3X2NL6LTAW2XWEXSWD

@surendarkumar-rs1og 4 жыл бұрын

I have a doubt, can we use helvetica neue font for android? do i need to purchase SF pro & helvetica for my ios app?

@DesignPilot 4 жыл бұрын

Nope. SF Pro is a free font that Apple gives.

@siddhibhatia5714 2 жыл бұрын

Really amazing video. Learned a lot, Thank you please share the giveaway code

@DesignPilot 2 жыл бұрын

Giveaway ended many years ago

@siddhibhatia5714 2 жыл бұрын

@@DesignPilot haha okayy

@syedumair4622 4 жыл бұрын

So,this app is the like the inspect we use in chrome browser

@DesignPilot 4 жыл бұрын

Yes

@smritirawat5646 4 жыл бұрын

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

@DesignPilot 4 жыл бұрын

Thanks a lot Smriti. This means a lot 🙏

@DesignPilot 4 жыл бұрын

1NXGA3RD6151GQXM4T0CEFP