The Ultimate Guide to Figma's Auto Layout: Design and Construct UI Components like a Pro in Figma!

🚀 Get 2 free months on Skillshare Premium & watch my Course for free:
skl.sh/2TVhf8z
In this tutorial, I will show you how to use Auto Layout in Figma to design and create UI components the right way, like a Pro in Figma. We will extensively be using Auto Layout in this tutorial. So by the end of this video, you will be a master at Auto Layout.
🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design
🚀 Create an account on Mobbin for free:
mobbin.com/?referrer_workspac...
00:00:00 How to follow this Tutorial
00:01:24 Navigation Bar
00:10:58 Button
00:16:11 Slider
00:22:57 List Items (Super Important)
00:31:23 Modal Sheets
00:40:05 Dealing with Text in List Items
00:45:10 Exception to List Items
00:47:00 Tabs (Segmented Controls)
00:55:40 Input Fields
00:58:47 Anatomy of a Card
01:01:13 Dropdowns
01:03:45 2 Shortcuts for Auto Layout
--------------------------------------­---
UI/UX Design Tutorials:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
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 :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: [e-mail]
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#autolayout #designsystems #uiuxdesign

[@praveenpsg77]

Fun fact: These videos are better than an official Figma tutorials.

[@shrutipatil3827]

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

[@DesignPilot]

Very glad to hear that. Thank you 🙏

[@gowthampadmashali4722]

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

[@ganesanvartha]

Just not ready to believe that this content is Free..... phenomenal video. My auto layout concept is so clear now

[@yashrajpatil6367]

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.

[@prathameshagrawal9879]

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.

[@MeetRayka]

I get to learn something new every time I watch your videos. Thanks for making it simple!

[@mihirsalot-vd2sk]

I cannot emphasis enough how great the explanation of logic was in this video! Thanks man

[@priyankbusa3810]

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.

[@DesignBrain]

This video has cleared all my layout doubts. It's truly valuable content, thank you Chethan for such gem videos 🔥

[@pawanbisht8154]

This series is going to be super awesome.. 😊

[@siddhibhatia5714]

Lot to learn from this video! Must watch for all the beginners👌👌🌟 Thanks Chethan for such amazing content. Following it rigrously 🙌

[@sahil9198]

Thank you so much. Keep posting more such videos.❤️

[@ShelbyParton]

Okay, going through all of these now ---- you are my hero.

[@kishorekumar8216]

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

[@aayushx1610]

Thank you so much for this guide . will check out other guides tooo fr

[@shivamgupta2882]

This was super helpful, best Auto layout guide out there.

[@aayushx1610]

thankkkkk you so much for these guides. i dont know how to thank you mate. the real learning starts here 🎆

[@joshuaadeleyejoad1678]

This is very, very insightful and helpful. Thank you Chethan.

[@altamashkhan5870]

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.

[@varunsinghrathore653]

Loved it❤ Great video 🙌🙌

[@anouarnouri2111]

Thank you very much for a great tutorial!

[@himaaniedanu5216]

Explained it so well, really really helpful

[@tayyabsohail8823]

I see many video on auto layout but you educate well you teach us each edge case that is your beauty sir 🥰🥰

[@letsmakemusic7132]

Best autolayout tutorial on youtube

[@HardiRiddhi]

Mind blowing content. Kudos to you, Chethan.

[@dawn2dusk740]

Thanks man, it was great!

[@aayushx1610]

very very good guides on auto alignment.

[@cherry-lp8yq]

why are so good like this?😵‍💫, you are a legend ! ❤‍🔥

[@yamparalarahul]

Amazing video bro, i really loved it.

[@muktiray4719]

Best tutorial on youtube for autolayout

[@salehemwanga5408]

Great, good explanations

[@haneefahmed9748]

did you create Figma??? so good, thanks much!!!!

[@nisheethranjan1188]

Thanks a ton!

[@pruthvirajmane96]

Thanks for sharing your knowledge..

[@newyonface3700]

Loved it

[@nishantKumar-tr5ek]

Awesome sir awesome Valuable information given us thank you sir very detailed information

[@DesignAngadiShreya]

thank you for element selection short cut 🍀

[@nehasharma4657]

Gold!

[@TuShar-mp8um]

This vedio awesome. Sir please upload more vedios on autolayout like episode based...

[@rashikkenn8798]

The best!!!

[@hareeshkaladharan467]

Thanks for a lot of informations

[@sayekatchakraborty2552]

Thank you so much..

[@m01287]

the best

[@huzaifahzeeshan7599]

King

[@mahyarmahdikhani]

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

[@15791sandeep]

Great

[@ARUNKUMAR-lr9mj]

So Goood

[@aayushx1610]

Gold Mine for new Learners 🕶

[@user-ww9nf6gt8p]

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

[@DesignPilot]

You can set the title to absolute position and centre it

[@sachinnegi2924]

Rewatching again to gasp the concepts again

[@ashwini5142]

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

[@DesignPilot]

Stay tuned!

[@AmjadKhan-rz6nu]

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

[@DesignPilot]

Are you talking about solving design problems or designing the user flows and UI?

[@AmjadKhan-rz6nu]

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

[@AmjadKhan-rz6nu]

Yes exactly the solving design problem , the user flow and UI 🙏

[@smilli6415]

do you have a full course anywhere showing how to make components like cards etc

[@DesignPilot]

Not really.

[@kriswayne7938]

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?

[@DesignPilot]

The system is often used only for padding and margin values. Not necessarily the absolute height and width of components.

[@kriswayne7938]

@@DesignPilot oh ok ok U the best man 👏👏👏

[@bhuvardhenam336]

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

[@DesignPilot]

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.

[@pro_ux3664]

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]

You can prototype with a Drag Interaction.

[@pro_ux3664]

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

[@DesignPilot]

I think you should watch some tutorials on prototyping. You’ll understand

[@designhub-cx1zw]

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?

[@DesignPilot]

Pick a Google font

[@designhub-cx1zw]

@@DesignPilot thanks! but the thing is there any specific guidelines for the fonts or we can use whatever we like?

[@DesignPilot]

@designhub-cx1zw Use whatever you want. Try to keep things simple and use only 1 font

[@designhub-cx1zw]

@@DesignPilot thanks! I appreciate it.🤩

[@smilli6415]

do you suggest adding auto layout to all elements on same line ?

[@DesignPilot]

Yes

[@aitaikashyap5183]

Is it possible to share the screens you are explaining from to practice while you are explaning?

[@aitaikashyap5183]

means yes? sorry just waiting to see if no then i can find stuff

[@DesignPilot]

@aitaikashyap5183 Let me find the Figma file. Not sure why I didn’t add a link to it

[@aitaikashyap5183]

@@DesignPilot great thank you would appriciate it

[@aitaikashyap5183]

@@DesignPilot hi again did you get a chance to look into it ?

[@pankhudilanjewar4150]

i did not understood the absolute position part, my rectangle is still above the 6:30 PM.

[@DesignPilot]

Can you explain in detail?

[@pankhudilanjewar4150]

At 21:14 You placed rectangle 2 behind the 6:30PM ,When I try to do it, nothing happens.

[@user-yn8rj8ud5s]

Figma office Hours

[@manashkashyap7780]

Please make a video on design system and what is your process

[@DesignPilot]

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

[@tushargadekar9444]

@@DesignPilot ​No please create one on components like this. We need it. you explained this very beautifully

[@DesignPilot]

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.

[@tushargadekar9444]

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

[@DesignPilot]

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.

[@smilli6415]

good class. but this is more complicated than computer science degree.. imagine doing these in real projects

[@DesignPilot]

Well that’s what product designers do. This is a big part of the job

[@smilli6415]

@@DesignPilot what other tasks are product designers exected to do ? thanks

[@jximini]

It's illegal to keep this video free!!

[@DesignPilot]

😂😂😂

[@balkantrip553]

Pilot😊 you are really good

[@DesignPilot]

🙏