Using this timeline for self learning 00:05 Learn the practical aspects of frames and auto layout in Figma 02:16 Horizontal constraints define how a layer behaves inside a frame. 06:53 Scale in Figma maintains proportions of layers as you resize them. 09:12 Frames in Figma have constraints inside them, making them extremely powerful. 13:22 Auto layout is level two of frames 15:35 Setting constraints in Figma to make responsive designs 19:48 Understanding the concept of responsive design versus adaptive design 21:48 Adaptive design is necessary for real products to optimize space on different devices. 25:36 Understanding the difference between desktop and mobile web apps 27:33 Learn about variants, components, responsive UI, and adaptive UI 31:25 Autolayout in Figma allows for dynamic resizing and adjustment of elements within frames. 33:22 Understanding the behavior of wrap and fixed width in Auto Layout 37:31 Understanding Autolayout and Padding in Figma 39:23 Using option key and clicking the icon allows you to apply padding equally on all four sides. 43:11 Auto layout is used when elements will regularly change in width or height. 45:04 Nested framing and autolayout constraints are used to create a responsive layout. 48:30 Use the Responsify plugin to easily test designs on multiple devices. 50:16 Introduction to frames and autolayout 53:38 Learn how to bypass constraints and easily share design files. 55:14 Ansh Mehra provides a list of top rated inspiration websites and shortcuts for Figma. 58:41 The next lecture will cover Styles and libraries. 1:00:21 Feedback is needed for making the course top tier in Figma education 😃😃😃
MODULE 1 02:00 Groups vs Frames 04:30 scale property in constraints 05:16 shortcut- to copy 10:12 why frames? 12:18 shortcut- bypass constraints 12:45 resources -IOS systems by Joey Banks 13:13 shortcut to detach instance from the parent component 15:15 nested constraints 17:22 using frames 18:40 frames vs autolayouts 20:13 responsive vs adaptive design 27:53 resource -articles to learn about responsive design and grids MODULE 2 28:45 basics of autolayouts 30:32 shortcut for autolayout 31:45 resource - Untitled UI 32:45 vertical vs horizontal autolayouts 33:21 fixed width vs hug content 38:12 horizantal and vertical padding 41:35 nested autolayouts 42:28 why keyboard dont have autolayouts 43:24 example of constraints and autolayouts 48:00 important takeaways MODULE 3 48:48 practicle implementation and plugin - responsify 50:51 resource: figma video for responsive design 51:40 what are sections? 53:15 medium blog- how to organize figma pages by ansh sir 53:38 shortcut to copy URL to share your designs 53:54 how to get into outline mode in figma? 54:36 using annotation cards 55:10 inspiration resources 55:23 learn figma on your own 55:56 Ansh sir courses and learnUIUX.in 57:42 UX case study videos by ansh sir 57:47 Homework 1:00:00 Outro
For those who are facing these same problem just as I have there is this course on figma where all these concepts were practically implemented by the tutor. udemy discount code are easily available online. You can check it out shorturl.at/rxIY6
Yes, i was kinda expecting him to make something at the end, be it something little just to summarize at the end what we have learnt. It might have helped us to know where can we use these.
A reputed design institute would charge 80k Rs & teach frames for one day only. And then we have you, as always thank you so much for your efforts. Please keep bringing such detailed courses. ❤️
even , I do course of figma on udemy , but you are teaching great in details with examples to understand how its work actual. thank you Ansh sir, we students are so lucky to learning from you.
One of the main things I learned was the difference between Responsive and Adaptive design, combined with the Responsify and Breakpoints plugin, now that is a game changer. 💪
Hey Ansh! I've just completed this video, it took me 3 days to complete this video and making notes of it on notion. I was very confused about the auto-layout feature before. But you have explained it in so much detail that now my concepts are clear. Also i wanna let you know that I've start reading articles from figma blog| shortcut and those are very helpful. Thank you so much for guiding us to the valuable resources and providing such detailed videos on learning figma. Hats off to you for the hardwork you are putting in to make these videos.
I’m very happy that you took the time to finish the entire video. I know it’s tough but trust me, in 6-8 months you will thank yourself when you get your first big paycheck
Honestly after watching this video i recall i watched atleast 10 videos about how auto layout works...if i had this video before... it wld hv been a piece of cake...appreciated ur teachings alot....ur truly helping students on their fundamentals bro...respect👍
Hi Nina here! I'm a self-taught UX/UI designer. I just wanted to express my deepest gratitude for your amazing free video tutorials and courses. Even after paying for platforms like Ud*** and Cou*****, I still struggled to use Figma effectively for my work.Your playlists are a game-changer! They're exactly what I need to update my portfolio. Especially, your explanation of Auto Layout with a clear metaphor was fantastic. It really helped beginners like me grasp the concept. Thank you so much! I'm feeling motivated to dive back into my homework and recreate the UI design that you suggest. You're a truly inspiring mentor!
Hello Ansh sir ❤, please ek advance EP bana dijiye UI UX design ka, ya phir ek paid course hi launch kar dijiye, jisme sare topics advance me clear ho, youtube par option to bhout sare available hai but vo utna depth me cover nahi karte jitna ki "APP" i hope ki app isko lekr sochenge 😊
The course and knowledge you are providing of free others are charging 40 to 70k for the same, thank you so much. You are not just making videos, you are making the life of many designers.
I especially liked the way you broke down the different types of frames. It really helped me understand their purpose. Thanks for the free course, Ansh!
😄 no words.. this video is absolutely amazing.. I really needed a detail video on frames and auto layout and this has helped me a lot.. my 95% of doubts are cleared.. thanks for the resourses.. I really felt ansh bhai was sitting next to me and explain all this in detail ... thanks once again.. you are helping a lot of aspiring designers like me to gain momentum in the field of UX design 😀
Your videos are fantastic, I genuinely like your course, great help! Everything is covered in such detail, and it's truly worth its weight in gold. Thank you so much for your hard work. I'm incredibly satisfied with the course syllabus.BESTTTTTTTTT if you could just make a project and explain layout grid also , that would help a lot also Thank you again!
Hii Ansh I'm also learning UX design, and it would be great if we could stay in touch to share experiences. Currently, I'm actively searching for a job. Could you provide insights on how long it generally takes for a beginner in UX design to land a job with a starting salary around 20k? 🙏
This is literally a gem i have been simultaneously watching the UX design playlist and then this one ,omg it literally make my confidence go up by each lec thank you so so much for these videos Ansh
Hey Ansh , As i am freshie in the UI UX and learning with Windows PC. I want you to mention the key shortcuts in the Window PC format too in the captions of video. It's too Confusing to understand the Mac Keys terms. thank you hope you read this : )
The most lovable part of this video is Auto Layout... A huge Respect to Ansh mehra bhaiya That he has Made his 100% efforts To delivered Top Notch Content.... Thank You Bhaiya....🙏🙏🙏🙏❤❤
You're literally saving our lives. I've seen so many videos on YT and I finally landed here to start my career because I find it very genuine and hopefully, we'll cross path as Designers in near future.
Wow, I'm speechless seeing the effort you've put into making this video! It's truly a privilege to have access to such high-quality content for free on RU-vid. Thank you so much! 🙏🏻❤️
Hi Ansh! I am watching your video last 10 days and I have done a Google UX design course recently, for figma knowledge I am here. I have taken some paid figma course but I can say your content is more valuable and professional. Please don't stop this series the level of content you are creating is much appreciated.
I'm also learning UX design, and it would be great if we could stay in touch to share experiences. Currently, I'm actively searching for a job. Could you provide insights on how long it generally takes for a beginner in UX design to land a job with a starting salary around 20k? 🙏
I have been looking for a long long time to learn Figma, not UI or UX design. But there is not a single Video like yours. Fast of all thanks All mighty Allah after that you. Now I think My dream will be fulfilled very soon.
Thank you Ansh for making such detailed videos on the basics of Figma. After watching your several videos, I decided to learn UI/UX. After learning some kind of development, it has helped me to understand various concepts easily such as Auto-Layout, padding, margin, etc. And I am also watching your free course on your website. It has helped me a lot in learning. Lastly, I am documenting what I am learning and all the resources as well, that would help me to refer them in future easily as you have told us in various videos.
@AnshMehraa I must say this is a fantastic learning that you are sharing with us! I am currently pursuing the Week 3 of your UX/UI course. Documenting each and everything on Notion. Its a Lifesaver! God Bless!
Brother, I think in the beginning you also got confused about what to learn first and what not. That's why I believe your video is very informative and easy to understand. I took 2 classes of 11 hours each from different channels and got confused. However, what you are doing is very different and impressive.
Hello bhaiya. I have been following your videos for so long and trust me when I say this...figma is now becoming easy for me to access because of your in-depth guidance. I used to feel lost and dejected whenever someone showed me a figma file and I couldn't understand the entirety of it. 2 videos past, and I'm writing this that my reaction throughout the video was 😮.. because then it was all making sense. Thank you thank you thank you.🎉
you are my herooo for ui/ux thank you sir you are my inspiration and the way you teach is like next level.I am very grateful to have known your channel and yes you are really great sir the confidence that you have is really awesome wish the bestest for you
Great tutorial. Thank you. I have been having trouble with the auto layout. Thank you for clarifying it. I tried many videos for auto layout and this has been the best tutorial for it. Thank you for breaking it down and easy for me to understand.
This is an excellent excellent course and initiative - very detailed. Do not change anything so far - keep going. Waiting for more 😊 I would eventually love to pay for for something like this. Why don't you create a kind of a donate button or a sort of a paying feature on RU-vid where people can support your channel!
I think within this video you should have covered the advance settings for "Auto-Layout" that is "Strokes, Canvas stacking and Align base textline" apart from that it is super helpful for beginners.Yes, I have seen many beginners they just jump into figma and start creating screens without knowing the fundamentals of each element!
Hii! so my goal for this Course is to teach you Figma. The fully functional project would be possible if you finish these 3 Playlists: UX Breakdown Videos: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rWAhS8S3Vk4.html UI Redesign Playlist: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FWjG3yJsn08.html Laws of UX Livestreams: ru-vid.comnJ3cCvnI8JQ?feature=share and finally, our 15 Episode Course, all of which is organised on www.learnuiux.in
Use cases are extremely important. Things make more sense with appropriate examples.....Really enjoying your content....Thanks for sharing your wisdom.
ansh you are doing a brilliant work and effort for the design community , this is not only helping me but many people out there who are passionate about learning ui/ux
I would like to say that we really need to put same effort as ansh bro to produce results ( such a classic crisp video) Btw college hours, I am watching it thoroughly and documenting on notion Thank you so much Where I can find video to how to document on LinkedIn?
Your videos are great. This is something I really wish I had started watching months ago. I appreciate you providing this free treasure to all the students around the globe!🍀
Thank you so much, Ansh Sir. Your efforts and hard work in teaching this course are truly appreciated. These videos are exactly what we need, and they're making a huge difference for us.
I've been a desginer for years, but not a UI designer. Learning so much, thanks. One thing I can't work out is why I can't simply click on an element in a frame. I have to use CMD + click to select anything? Why is that? Got my answe. Looks like it's because it's a component.
Thank you Ansh 👍for your work in teaching the UX design. your teaching style is very effective. I have been learning from you for a year and currently, I'm following your LearnUIUX roadmap it's truly amazing.
hey Ansh! glad to know about your lectures, they are litterally helpfull for me as a UI beginner. It took me 2 days to complete this lecture. Thankyou so much !
Hi Ansh i have watched two videos of this series i found it very informative. I request you to create video on grid system 4px, 8px and 12 column grid with a example of dashboard design containing left sidebar navigation & right side content area. Example any admin dashboard design. Hope this comment will catch your attention. Also waiting for your paid design course. thankyou
God send video Ansh , I was stuck on some features of autolayout, and now after this video and practicing a few times, I got it. I really appreciate the depth of the tutorial :)
I really appreciate you hardwork in your videos. I have seen many youtube videos on figma but as i found your channel the quality and so much details on this platform it's a great video and keep hustling UI/UX Designers 🙌
Hi Ansh! Thanks for the lesson. Awesome as always :) I am just half way through the lesson, thought to ask you one favour. Could you please show the windows shortcut keys also as a layover text apart from the Mac keys? would be beneficial if you consider. Thanks!
