watched this---practiced---replicated 10+screens--loved creating screens--replicated 20more screens--taught 2 of my friends how autolayout works!!! thank you so much chethan for this indepth tutorial
Now here I want to take my time & appreciate how this person has taught us Auto layout in most detailed manner & as he promised at the beginning of the video that you will master auto layout if you watch this video till the end. Man! He kept his promise true. how should I thank you enough Chethan! I tried learning it from many you tube videos but no one has taught this in such practical way. Because of you I have understood not only auto layout but many concepts in most fundamental & practical way. Really Thank you. We appreciate your time and patience.❤
Master autolayout is crucial, i never opened webflow before. And now when i have the knowledge of autolayout webflow becomes so relatable. Autolayout is an underrated feature, but only few understand the power of it.
There sooooooo much value you are providing in this series I am completing and following all the episodes. Really grateful for making this valuable content.
Thank you Thank you so much chethan for this video auto layout was always been a enemy for me but now you make us understand how industry people use auto layout thank you for guidance.
kudos to one of the best auto layout tutorials, well explained with examples, Your content is pure gold Chetan bro! I hope you get a million subscribers soon :)
You are great man ! You have changed my design working system to different approach. After showing your videos i am only doing lots effort to solve different scenario of creating auto layout. Thanks for such valuable content.
Hi Chetan. How do we make sure the navigation bar text is center aligned if there are components of varying length on either side? In the example that you have shown, there is a chevron on the left and search icon on the right. What if there are 2 icons on the right? The text will be center aligned to the autolayouted frame but not to the parent frame
Sir we really nead a design proecess video behind any app or website, we dont know what is the right way to do that...something like this will make our future bright... Love from pakistan
Yah all the process a designer do for a mobile or web design do. Like if clients ask him to design from where he should start, does designer really need the whole ux process? Or directly jump to wireframe and UI ? These are and there are more and more questions that self thought designer have in their mind but we couldn’t found it on internet
Your videos are awesome! one small issue about your intro is that the audio volume level is way higher than your speech. that causes ear bother when we enter your next video. thank you
Hi bro as a beginner, I have some doubt Q-1) Does it necessary to add autolayout to every section on the screen like heading, subheading, cards, buttons, icons. Q-2) While practicing by trace screen I have seen a huge amount of space between one section to another, So that space should be include by setting padding to all section, by doing in the end every section is become like one after other from top to bottom connected. Is it the correct way of doing. Thanks
1. Basically all components need to have auto layout. 2. It’s recommended to put all sections in an auto layout. But the sections don’t have to touch each other. You can add the auto layout gap to separate them.
HI SIR please post a video of whole design process of a mobile application (how to approach particular application with respect to ux and ui) ..and thank you very much for this video sir..
I liked your content very much! but I've to ask you something. As we all know Apple uses specific fonts for their product but If I work for a company or a start-up, what fonts do we use for them or for their app UI?
Thanks bro...the slider doesn't work in the 'Present' mode. I want the user to click and interact with this slider. For this interaction, do I need to do something in prototype tab? Would be great if you could elaborate. Thanks again :)
@@DesignPilot Tried doing that, but unsure about the sub property. Should it be (Scroll to, Open overlay, Navigate to? :O) Sorry for bothering you though :(
I will be covering colors in depth. But not components since there are many tutorials already out there which show how to construct many types of components
Well, that’s a very broad topic honestly. And Figma already has a lot of tutorials. It’s super easy to follow. If you have anything specific or probably and example you can give me, I’ll think about it.
@@DesignPilot ok I have watched office hours from figmal. but with this tutorial you blew my mind. so I dont know what you have to offer regarding components library. but sometimes I do struggle while modifying components and autolayouts.
hey anyone here who would like to connect and become a kick ass product designer together, reply to this comment. Would be awesome if you are from Delhi.
watched this---practiced---replicated 10+screens--loved creating screens--replicated 20more screens--taught 2 of my friends how autolayout works!!! thank you so much chethan for this indepth tutorial
Now here I want to take my time & appreciate how this person has taught us Auto layout in most detailed manner & as he promised at the beginning of the video that you will master auto layout if you watch this video till the end. Man! He kept his promise true. how should I thank you enough Chethan! I tried learning it from many you tube videos but no one has taught this in such practical way. Because of you I have understood not only auto layout but many concepts in most fundamental & practical way. Really Thank you. We appreciate your time and patience.❤
Very glad to hear that. Thank you 🙏
Fun fact: These videos are better than an official Figma tutorials.
As someone who just by chance got a new role as a ui designer, this video helps me so much! Thank you!!!!
this channel needs to hit 1 million subscribers. How fantastic is He! What a deep-dive.
I’ll have to make cringe content for that 😂
Just not ready to believe that this content is Free..... phenomenal video. My auto layout concept is so clear now
❤Today, I realized many gaps in my understanding of auto layout. Despite this, I managed to connect all the dots. I really appreciate your content.
Master autolayout is crucial, i never opened webflow before. And now when i have the knowledge of autolayout webflow becomes so relatable.
Autolayout is an underrated feature, but only few understand the power of it.
I cannot emphasis enough how great the explanation of logic was in this video! Thanks man
There sooooooo much value you are providing in this series I am completing and following all the episodes. Really grateful for making this valuable content.
Best autolayout tutorial on youtube
This series is going to be super awesome.. 😊
I see many video on auto layout but you educate well you teach us each edge case that is your beauty sir 🥰🥰
Okay, going through all of these now ---- you are my hero.
I get to learn something new every time I watch your videos. Thanks for making it simple!
This is very, very insightful and helpful. Thank you Chethan.
Loved it❤
Great video 🙌🙌
Thank you Thank you so much chethan for this video auto layout was always been a enemy for me but now you make us understand how industry people use auto layout thank you for guidance.
Best tutorial on youtube for autolayout
kudos to one of the best auto layout tutorials, well explained with examples, Your content is pure gold Chetan bro! I hope you get a million subscribers soon :)
You are great man ! You have changed my design working system to different approach. After showing your videos i am only doing lots effort to solve different scenario of creating auto layout. Thanks for such valuable content.
Thank you so much for this guide . will check out other guides tooo fr
This was super helpful, best Auto layout guide out there.
thank you for element selection short cut
🍀
thankkkkk you so much for these guides. i dont know how to thank you mate. the real learning starts here 🎆
Thank you so much. Keep posting more such videos.❤️
did you create Figma??? so good, thanks much!!!!
This is very amazing video
jut below my mind😇
This vedio awesome. Sir please upload more vedios on autolayout like episode based...
Thanks a ton!
why are so good like this?😵💫, you are a legend ! ❤🔥
very very good guides on auto alignment.
Awesome sir awesome
Valuable information given us thank you sir very detailed information
This video has cleared all my layout doubts. It's truly valuable content, thank you Chethan for such gem videos 🔥
Thanks man, it was great!
Lot to learn from this video! Must watch for all the beginners👌👌🌟 Thanks Chethan for such amazing content. Following it rigrously 🙌
Loved it
Explained it so well, really really helpful
Thank you very much for a great tutorial!
Great, good explanations
Thanks for sharing your knowledge..
Thank you so much..
Thanks for a lot of informations
Amazing video bro, i really loved it.
Hi Chetan.
How do we make sure the navigation bar text is center aligned if there are components of varying length on either side? In the example that you have shown, there is a chevron on the left and search icon on the right. What if there are 2 icons on the right? The text will be center aligned to the autolayouted frame but not to the parent frame
You can set the title to absolute position and centre it
The best!!!
Gold!
Mind blowing content. Kudos to you, Chethan.
Sir we really nead a design proecess video behind any app or website, we dont know what is the right way to do that...something like this will make our future bright... Love from pakistan
Are you talking about solving design problems or designing the user flows and UI?
Yah all the process a designer do for a mobile or web design do.
Like if clients ask him to design from where he should start, does designer really need the whole ux process? Or directly jump to wireframe and UI ?
These are and there are more and more questions that self thought designer have in their mind but we couldn’t found it on internet
Yes exactly the solving design problem , the user flow and UI 🙏
Rewatching again to gasp the concepts again
Your videos are awesome! one small issue about your intro is that the audio volume level is way higher than your speech. that causes ear bother when we enter your next video. thank you
Gold Mine for new Learners 🕶
do you have a full course anywhere showing how to make components like cards etc
Not really.
Why is it recommended or kinda necessary to follow 8-pont or 4-point grid system for elements when we r suppose to have a full width parent frame?
The system is often used only for padding and margin values. Not necessarily the absolute height and width of components.
@@DesignPilot oh ok ok
U the best man 👏👏👏
Is it possible to share the screens you are explaining from to practice while you are explaning?
means yes? sorry just waiting to see if no then i can find stuff
@aitaikashyap5183 Let me find the Figma file. Not sure why I didn’t add a link to it
@@DesignPilot great thank you would appriciate it
@@DesignPilot hi again did you get a chance to look into it ?
Hi bro as a beginner, I have some doubt Q-1) Does it necessary to add autolayout to every section on the screen like heading, subheading, cards, buttons, icons.
Q-2) While practicing by trace screen I have seen a huge amount of space between one section to another, So that space should be include by setting padding to all section, by doing in the end every section is become like one after other from top to bottom connected. Is it the correct way of doing. Thanks
1. Basically all components need to have auto layout.
2. It’s recommended to put all sections in an auto layout. But the sections don’t have to touch each other. You can add the auto layout gap to separate them.
do you suggest adding auto layout to all elements on same line ?
Yes
the best
HI SIR please post a video of whole design process of a mobile application (how to approach particular application with respect to ux and ui) ..and thank you very much for this video sir..
Stay tuned!
I liked your content very much! but I've to ask you something. As we all know Apple uses specific fonts for their product but If I work for a company or a start-up, what fonts do we use for them or for their app UI?
Pick a Google font
@@DesignPilot thanks! but the thing is there any specific guidelines for the fonts or we can use whatever we like?
@designhub-cx1zw Use whatever you want. Try to keep things simple and use only 1 font
@@DesignPilot thanks! I appreciate it.🤩
King
Thanks bro...the slider doesn't work in the 'Present' mode. I want the user to click and interact with this slider. For this interaction, do I need to do something in prototype tab? Would be great if you could elaborate. Thanks again :)
You can prototype with a Drag Interaction.
@@DesignPilot Tried doing that, but unsure about the sub property. Should it be (Scroll to, Open overlay, Navigate to? :O) Sorry for bothering you though :(
I think you should watch some tutorials on prototyping. You’ll understand
Great
So Goood
i did not understood the absolute position part, my rectangle is still above the 6:30 PM.
Can you explain in detail?
At 21:14 You placed rectangle 2 behind the 6:30PM ,When I try to do it, nothing happens.
Please make a video on design system and what is your process
I will be covering colors in depth. But not components since there are many tutorials already out there which show how to construct many types of components
@@DesignPilot No please create one on components like this. We need it. you explained this very beautifully
Well, that’s a very broad topic honestly. And Figma already has a lot of tutorials. It’s super easy to follow. If you have anything specific or probably and example you can give me, I’ll think about it.
@@DesignPilot ok I have watched office hours from figmal. but with this tutorial you blew my mind. so I dont know what you have to offer regarding components library. but sometimes I do struggle while modifying components and autolayouts.
I see. Honestly it’s case by case basis and there are tons of components that I can make. So not sure how beneficial it will be to everyone.
Figma office Hours
good class. but this is more complicated than computer science degree.. imagine doing these in real projects
Well that’s what product designers do. This is a big part of the job
@@DesignPilot what other tasks are product designers exected to do ? thanks
It's illegal to keep this video free!!
😂😂😂
hey anyone here who would like to connect and become a kick ass product designer together, reply to this comment. Would be awesome if you are from Delhi.
Pilot😊 you are really good
🙏
This was super helpful, thanks @designpilot