How to use Figma Frames & Autolayout?

  Рет қаралды 161,895

Cutting Edge School by Ansh Mehra

Cutting Edge School by Ansh Mehra

Күн бұрын

Пікірлер: 448
@CuttingEdgeSchool
@CuttingEdgeSchool Жыл бұрын
🍿Binge Full Playlist - kzbin.info/aero/PLlHtucAD9KT3wgeeVqILeW-0rYoQgR1Rh&si=4yajSMq_CPIfbBzE 🔌 Figma Community Files: www.figma.com/community/file/1292854467563606602/anshs-free-figma-course-ep-2 🚀Complete UX Design Course (9 Weeks, 100% Free): → learnuiux.in/ 🏆Learn about Prompting and AI Tools: → www.howtoprompt.in/
@farhan78930
@farhan78930 Жыл бұрын
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 😃😃😃
@dv_one1
@dv_one1 Жыл бұрын
THNKU BRO I
@neelarnav7954
@neelarnav7954 8 ай бұрын
Thanks man.
@ravibhagat8834
@ravibhagat8834 3 ай бұрын
Thanks buddy
@shaurya2608
@shaurya2608 Жыл бұрын
We would love to see all these concepts using on a project as it can help us to know about these tools more practically
@avantipathak1386
@avantipathak1386 Жыл бұрын
I agree 100% let's see if he sees this post @ansh mehra
@bjkaur9185
@bjkaur9185 Жыл бұрын
Yess
@mohanaganesh4900
@mohanaganesh4900 10 ай бұрын
Hi Ansh....I too have the same request..please do any mock designs for a mock project.so that would be useful too
@Kanishk_MotionDesign
@Kanishk_MotionDesign 8 ай бұрын
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
@keshavisharma9477
@keshavisharma9477 7 ай бұрын
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.
@divyakamal2137
@divyakamal2137 11 ай бұрын
Haven't seen anyone else on KZbin explain Figma in so much detail! Thank you Ansh!
@safiahussain9866
@safiahussain9866 7 ай бұрын
exactly
@misalsudhir
@misalsudhir 3 ай бұрын
Agree bro
@SumedhShewale-x3w
@SumedhShewale-x3w 6 ай бұрын
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
@ophulkgaming7783
@ophulkgaming7783 3 ай бұрын
Thank you 🙏
@troysmusicalroom5260
@troysmusicalroom5260 Жыл бұрын
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. ❤️
@humzitoo
@humzitoo Жыл бұрын
Ansh you will gonna be One and only name for Complete UX. 🥰
@craftierszest9891
@craftierszest9891 Жыл бұрын
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.
@xuhain
@xuhain 5 күн бұрын
I am from Pakistan , my graphics/UI career goes way back to janurary 2008 but i must say , i have never seen such a young guy explaning with such dedication about modern tools i can safely say this about FIGMA .. Precision Dedication Practicality and spot on when it comes to career i have learned from Don Norman Books, and you have also put up a video "Worlds Firs UX Designer " on that topic Great work Ansh - keep making videos and saving us from the clutter of abstraction in form of courses Your figma course compelled me to go for your complete video library in 2026 i am making a resolution to complete all old videos in ur library
@vijayponugoti-22
@vijayponugoti-22 6 күн бұрын
HI Ansh. This is Day-2/200 in my journey to becoming a UX Designer. I've done the homework and I've also tried to recreate the comment card. Doesn't look exactly the same but the auto layout and other functionalities work just like your version. I've also watched the Quick responses video and read the article as well. Thank you for all the encouragement you've been giving and also for the efforts you put in making such informative content.
@dipanshchhabda3716
@dipanshchhabda3716 11 ай бұрын
The level of effort this man has put into this course to go into depth in every aspect is commendable! Thanks, man. Much appreciated.
@denispanarin
@denispanarin 7 ай бұрын
Thanks a lot from Russia and Uzbekistan. You are the best.
@Alikk784
@Alikk784 3 күн бұрын
as a junior ui/ux designer, this video saved my ass. All this ive been making raw design without any auto layout, components or even constraints (yeah i was that bad), but not anymore. Thanks alot dude
@chinmayaranjandas6003
@chinmayaranjandas6003 Жыл бұрын
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👍
@TechMag10
@TechMag10 7 ай бұрын
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!
@Fadhlina_AbuBakar
@Fadhlina_AbuBakar 7 ай бұрын
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!
@ridz4912
@ridz4912 11 ай бұрын
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. 💪
@emibaloc6344
@emibaloc6344 Жыл бұрын
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.
@CuttingEdgeSchool
@CuttingEdgeSchool Жыл бұрын
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
@ejtsandhu
@ejtsandhu 10 ай бұрын
Broo! can you provide me the notes?
@vijaysaket2500
@vijaysaket2500 8 ай бұрын
broo will you provide me the notes?
@systumhbhae99
@systumhbhae99 2 ай бұрын
Bro plz provide notes
@systumhbhae99
@systumhbhae99 2 ай бұрын
​@@vijaysaket2500can you provide your notes
@ManishaNegi-m1z
@ManishaNegi-m1z 7 ай бұрын
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
@nikhil4yourhelp670
@nikhil4yourhelp670 Жыл бұрын
This is amazing specially nested constrains and nested auto layout this would be the gamechanger , and thank you for this🙂
@michaelroberts2832
@michaelroberts2832 4 ай бұрын
Absolutely EXCELLENT content. By far, the best I have found. Covering and explaining everything from A to Z in detail.
@CuttingEdgeSchool
@CuttingEdgeSchool 4 ай бұрын
Thank you for acknowledging! This is just our Figma Series. If you wanna learn UX, we’ve made a 9 week course (all free) on LearnUIUX.in
@nikithasshenoy694
@nikithasshenoy694 9 ай бұрын
😄 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 😀
@seekhoforjob
@seekhoforjob Жыл бұрын
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.
@sahusanalysis7661
@sahusanalysis7661 11 ай бұрын
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? 🙏
@radhikagarg1463
@radhikagarg1463 4 ай бұрын
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.
@aayuff4430
@aayuff4430 3 ай бұрын
i was confused but i now see your videos and from now i am very satisfied with your course .nice work
@kajoldandapat
@kajoldandapat 7 ай бұрын
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.
@herbstelaut2994
@herbstelaut2994 2 ай бұрын
You are amazing Ansh! I really appreciate your spirit and your offers!
@heenaverma2313
@heenaverma2313 3 ай бұрын
YOUR TREMENDOUS EFFORTS BHAIYA ARE COMMENDABLE ! THANKYOU FOR SHARING LIGHT IN THE UX UI REALM!
@remax110
@remax110 Жыл бұрын
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.
@Tamilselvi-w2p
@Tamilselvi-w2p 4 ай бұрын
Wonderful content on Frames and Auto layout. I appreciate how you are giving most valuable video for free. Thank you!
@rafiq917
@rafiq917 6 ай бұрын
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.
@aqibshakil5540
@aqibshakil5540 Ай бұрын
"Nobody has ever explained it so well and in such depth before, Thank you very, very much."
@ashivy03
@ashivy03 Жыл бұрын
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.🎉
@lakshaymahajan8457
@lakshaymahajan8457 5 ай бұрын
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.
@mirzasaif2325
@mirzasaif2325 10 ай бұрын
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 !
@nehasalma9083
@nehasalma9083 Жыл бұрын
aao ak ase youtuber ho jo etna detail video banate ho lovely ... i wish apke 1M sub ho jaye ...
@abhishektejithkumar
@abhishektejithkumar Жыл бұрын
Ansh thank you so much for this clean teaching! this worth alottt i encourage you to do not drop down the depth of each concept u are touching in!❤
@akshaytaksande4
@akshaytaksande4 9 ай бұрын
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
@gajput
@gajput 4 ай бұрын
@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!
@CuttingEdgeSchool
@CuttingEdgeSchool 4 ай бұрын
Amazing!
@trishita._patra
@trishita._patra 4 ай бұрын
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 KZbin. Thank you so much! 🙏🏻❤️
@rufaidasyed7594
@rufaidasyed7594 Жыл бұрын
Thank you for this gem of a video Ansh!! You're an amazing teacher.
@itspraveensharma
@itspraveensharma Жыл бұрын
Use cases are extremely important. Things make more sense with appropriate examples.....Really enjoying your content....Thanks for sharing your wisdom.
@jayant4927
@jayant4927 Жыл бұрын
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!
@CuttingEdgeSchool
@CuttingEdgeSchool Жыл бұрын
Glad you like them!
@abishekchaudhary123
@abishekchaudhary123 Жыл бұрын
As
@sahusanalysis7661
@sahusanalysis7661 11 ай бұрын
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? 🙏
@architgoyal1350
@architgoyal1350 5 ай бұрын
Thank you Ansh for making this figma course it is helping me and saw that only your videos are so detailed videos, really love that...Thank you 🙏
@luvkingprince5469
@luvkingprince5469 4 ай бұрын
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....🙏🙏🙏🙏❤❤
@rimasmusa
@rimasmusa 4 ай бұрын
I got to learn so much from your videos. Great to know you genuinely want us to gain knowledge through your videos. Thank you so much Sir.
@NitishGariya11
@NitishGariya11 10 ай бұрын
Just want to say ansh bhai keep this video series continuous they are very helpful for us to develop a basics of foundation of ui ux
@parthbansal3930
@parthbansal3930 5 ай бұрын
you are the most genuine educator on youtube i am learning a lot from you not just ux but also much more so thank u for that 😊😊
@RajatKumar-eo7fl
@RajatKumar-eo7fl Жыл бұрын
Amazing Bro ❤ Here is one suggestion, please ad 2-3 full fledged projects at the end
@krsnabantai
@krsnabantai Жыл бұрын
one good project is enough
@NivyaBhagchandani
@NivyaBhagchandani 6 ай бұрын
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.
@almighty.saumya
@almighty.saumya Жыл бұрын
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 :)
@Aminam.yaseen
@Aminam.yaseen 13 күн бұрын
❤❤❤❤❤❤❤ loving this course the effects he put .....i m learning alot
@aishwaryavishwakarma1136
@aishwaryavishwakarma1136 4 ай бұрын
day 2 learning figma, and it is getting so exciting day by day.... just loving it
@ruchisharma309
@ruchisharma309 9 ай бұрын
Ansh it's really helpful.. I learnt figma by my self but in your videos every single detail mentioned . Thank you so much for these super content. 👍
@prakashbhol
@prakashbhol Жыл бұрын
Fantastic..I am recently moved from sketch to figma.. your contents are very useful. Thanks Ansh
@HadiEbrahimi-yq9yj
@HadiEbrahimi-yq9yj 29 күн бұрын
the first session I watched was perfect and I hope to share new things. thanks for helping us💗.
@arnabux
@arnabux Жыл бұрын
Thank you sir for this wonderful video. It is incredibly helpful and I look forward to further episodes
@nerf_shalin8848
@nerf_shalin8848 Жыл бұрын
It would be an understatement to call it a tutorial ; it's a manual. What a legend 🙌. Eagerly waiting for Variables and Advance Prototyping.
@Ruhi_Shares
@Ruhi_Shares Ай бұрын
I just completed this video and I don't know why but I was enjoying it, also loved Auto layout wala section in the video.
@himanshu3187
@himanshu3187 5 ай бұрын
Great work Ansh....I really love your Valuable stuff, Your immense Handwork and Dedication which you provide us at No cost. Thank You so much !
@WahizaKhan-i4x
@WahizaKhan-i4x 6 ай бұрын
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!🍀
@staycool219
@staycool219 6 ай бұрын
This series of Figma is very knowledgeable...much appreciated !👍👍
@kamalpreetcodebrew
@kamalpreetcodebrew 18 күн бұрын
this is really amazing. watching it is worth it. learning from it is worth it. Thank you for this remarkably good video
@surajitadventurenews2895
@surajitadventurenews2895 6 ай бұрын
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 🙌
@deepadabhi5738
@deepadabhi5738 6 ай бұрын
your explanation is great! your hard work is quite visible and your intention to help. Your energy inspires me aswel.
@krishnachaitanya9024
@krishnachaitanya9024 9 ай бұрын
This is exactly what I have been looking for, crisp & consise content & that to fo free You are great ansh, thax a lot. 👍
@swapnilssinha4314
@swapnilssinha4314 9 ай бұрын
Keep these videos coming sir. Your teaching make me wanna learn more and more. A big THANK YOU for this.
@palliasridhar
@palliasridhar Жыл бұрын
Hey Ansh, This is a brilliant video after having gone through several global videos. Thanks a ton. Content is packed with deep applicable skills of Figma. Thanks a ton.
@DimpleAhuja_
@DimpleAhuja_ 8 ай бұрын
Thank You so much Ansh for all your efforts. I thoroughly enjoyed and definitely learnt a lot from this video. Grateful to you for providing us with such a detailed course.
@SafiUllahkhan331
@SafiUllahkhan331 23 күн бұрын
Its the best course I have ever seen.
@Avipsachopdar
@Avipsachopdar 6 ай бұрын
Thank you so much for sharing your knowledge in a very simple and minimalistic way. Easy to understand.
@keerthireddy6220
@keerthireddy6220 Жыл бұрын
i cannot thank you enough for your tutorials and your resources it helps a lot .
@anandgaurav484
@anandgaurav484 8 ай бұрын
Hey Ansh! This was way better then any paid one. Kudos to you for bringing this up. God bless you mate
@ShivangiTiwari-d5v
@ShivangiTiwari-d5v 2 ай бұрын
thankyou ansh this course is such a gamechanger..
@DollarsSense-r9i
@DollarsSense-r9i 24 күн бұрын
such a great tutorial on figma that covered all over the things about figma. and i also liked the way he teaching thank you sir love from Pakistan.
@Rudrakshi_debnath
@Rudrakshi_debnath 7 ай бұрын
00:05 Understand the difference between groups and frames and the concept of constraints Learn about Auto Layout and useful plugins Practical implementation and hands-on examples ✦ Horizontal constraints define how a layer behaves inside a frame. 02:16 Center constraint keeps the layer in the center when stretching the frame along the x-axis. Left and right constraints tie the layer to the corresponding sides of the frame, allowing movement only on those sides. ✦ Scale in Figma maintains proportions of layers as you resize them. 06:53 Horizontal constraint can be set to scale, which scales the width of layers proportionally. The scale constrains the layer's size and position as a percentage of the frame's dimension. ✦ Frames in Figma have constraints inside them, making them extremely powerful. 09:12 Frames allow you to add constraints to the elements inside them. Groups, on the other hand, do not support constraints. ✦ Auto layout is level two of frames 13:22 You can convert a group into a frame You can create nested constraints for more control ✦ Setting constraints in Figma to make responsive designs 15:35 Constraints can be set to individual objects as well as to the entire component Constraints at the component level and atomic level are important for responsiveness ✦ Understanding the concept of responsive design versus adaptive design 19:48 Responsive design allows elements to rearrange themselves to fit limited space while adaptive design can lead to elements disappearing when space is limited Auto layout and Frames help in achieving responsive design ✦ Adaptive design is necessary for real products to optimize space on different devices. 21:48 Responsive design resizes and repositions components based on viewport. Having the same elements on all devices may result in empty space on desktop and wasted real estate. ✦ Understanding the difference between desktop and mobile web apps 25:36 Desktop web apps are opened on Google Chrome, while native desktop apps like Figma or Photoshop need to be downloaded and installed. Mobile web apps open on browsers like Google Chrome or Safari, while native mobile apps need to be downloaded. Component libraries for desktop web apps and mobile web apps are different, as constraints alone cannot cater to different device sizes. ✦ Learn about variants, components, responsive UI, and adaptive UI 27:33 In responsive UI, constraints stretch to fit different devices In adaptive UI, you learn how to make the design adjust to different devices ✦ Autolayout in Figma allows for dynamic resizing and adjustment of elements within frames. 31:25 Autolayout is especially useful for buttons as it adjusts boundaries and accommodates text changes. By using Autolayout, elements can be easily arranged vertically or horizontally, depending on the layout axis selected. ✦ Understanding the behavior of wrap and fixed width in Auto Layout 33:22 Wrap allows the components to fit within the constraints and adjust their width accordingly Fixed width keeps the width of the component fixed even when duplicated ✦ Understanding Autolayout and Padding in Figma 37:31 Autolayout allows for dynamic resizing of elements based on different layout options Padding can be adjusted to control the spacing between elements in a design ✦ Using option key and clicking the icon allows you to apply padding equally on all four sides. 39:23 Padding numbers are arranged in a clockwise manner: top(left) = 12, right = 12, bottom = 68, left = 52. Extra padding on the left may be needed to make it visually equal due to line height. Auto layout is important for items to stack properly and maintain design behavior. ✦ Auto layout is used when elements will regularly change in width or height. 43:11 Elements that are static or won't change in dimensions should be in a basic frame. In the given example, the info box is a frame with elements inside in auto layout. ✦ Nested framing and autolayout constraints are used to create a responsive layout. 45:04 The info box has left and right constraints to keep its content centered. The promo button and middle image are set to stay at the center to avoid scaling issues. ✦ Use the Responsify plugin to easily test designs on multiple devices. 48:30 Responsify allows for testing designs on various devices by simply selecting the desired device. The plugin supports a range of devices including desktops, laptops, and phones. ✦ Introduction to frames and autolayout 50:16 Understanding independent pixels and dependent pixels (SP and DP) Recommendation to install files from Figma community and explore Check out Figma's KZbin video on quick responsive workflows Introduction to the concept of sections in Figma ✦ Learn how to bypass constraints and easily share design files. 53:38 Use Command L to copy the top URL of a selected frame. Enter outline mode with Command Y to view the structure of frames and auto layout.
@urvipatel8548
@urvipatel8548 6 ай бұрын
Your explanation and efforts 💥 It is very easy to understand each thing , thank you!!
@mohasenaafrin8685
@mohasenaafrin8685 28 күн бұрын
Frames: In Figma, constraints allow you to create responsive designs by determining how elements behave when a frame or screen is resized. You can set constraints for positioning (e.g., left, right, center) and scaling. Frames act as containers for design elements (like groups but more versatile). They can hold text, shapes, or other frames. Use them to define sections (headers, footers) or screens (mobile, desktop). Apply Auto Layout to a frame to align and space items dynamically. Add direction (horizontal/vertical), padding, and spacing. Perfect for buttons, forms, and scalable layouts.
@BurakDenizDeniz
@BurakDenizDeniz 6 ай бұрын
Thank you ansh mehra for this course . this figma course is really very helpfull fo rme thank you again Ansh mehra. You are really a great
@mohammedsalman8305
@mohammedsalman8305 9 ай бұрын
Thank you for this comprehensive and deeply explained videos😊 Your efforts in creating such a valuable resource that too for free is highly appreciated !!👍
@YaserMohammed-b2q
@YaserMohammed-b2q 5 ай бұрын
Thanks for this amazing video Ansh. I have started this module 😇
@Kanishk_MotionDesign
@Kanishk_MotionDesign 8 ай бұрын
Documented my learnings for this lecture very well. All the Important Timestamps along with notes and important links. Thanks for your effort brother.
@Scrap2wrap
@Scrap2wrap 6 ай бұрын
It is the best series for learning figma ... No doubt 🎉🥳🥳🥳
@Arjun222597
@Arjun222597 24 күн бұрын
This was awesome! Thanks, Ansh!!
@SafiUllahkhan331
@SafiUllahkhan331 27 күн бұрын
The best Figma Course.
@bhagyashreekejriwal749
@bhagyashreekejriwal749 7 ай бұрын
Great content! I am always confused with auto layout and this video helped me understand auto layout better.
@VaibhavKanda
@VaibhavKanda 6 ай бұрын
learning a lot from you, Not even the design but how to speak and how to express what we think... Sir really amazing content
@priyankaingole4417
@priyankaingole4417 Жыл бұрын
In depth knowledge covered very nicely.. It's little difficult to remember everything at once but the best part is you can revisit and let the content soak in. Thanks Ansh :)
@winforexwithdubisstv2993
@winforexwithdubisstv2993 Жыл бұрын
Hey Ansh! I'm glad i came across your videos. I always had issues with auto-layout especially the hug and fixed properties. This is really detailed. I would love a detailed video on how to use variants. Thanks once more and keep up the good work 👍
@SAMSAm-lf7kp
@SAMSAm-lf7kp Жыл бұрын
Mmmmm Amazing Detailed course.....Thank You soo much.
@mohdasif3082
@mohdasif3082 11 ай бұрын
Thank you so much Bhai for sharing your valuable knowledge for free. Because I am new in this field and I watched your 2-3 videos on UI/UX, it was good for me
@faiza_aiza
@faiza_aiza 11 ай бұрын
You are the best teacher, with extremely valuable content. Thankyou for this, and keep it up. Definitely, we need a mentor like you.💯
@sdid192
@sdid192 Жыл бұрын
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!
@safdarhussainmomin8362
@safdarhussainmomin8362 4 ай бұрын
best beginner video so far
@adityanalawade481
@adityanalawade481 Жыл бұрын
the best and most informative lecture on Autolayouts and frames
@Anas-Ben88
@Anas-Ben88 Жыл бұрын
Thank you Ansh for this great Tutorials it will be the number one here on KZbin.
@acceleratorgg1
@acceleratorgg1 Жыл бұрын
Best Figma course no doubt❤❤
@sugatkamble4275
@sugatkamble4275 7 ай бұрын
Thats valuable and simple to understand for beginners...thanks you😊
@anshikagoel6617
@anshikagoel6617 Жыл бұрын
Your videos are a lifesaver Ansh! Please cover layouts and spacings as well. The mentioned articles are helpful but not easy to understand and follow
@MMaaz-xd6rk
@MMaaz-xd6rk 10 ай бұрын
this courses is really helping me to learn figma in depth.
How to use Figma Styles & Libraries?
1:10:38
Cutting Edge School by Ansh Mehra
Рет қаралды 91 М.
Auto Layout for Beginners (crash course)
21:19
Flux Academy
Рет қаралды 58 М.
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН
The evil clown plays a prank on the angel
00:39
超人夫妇
Рет қаралды 53 МЛН
So Cute 🥰 who is better?
00:15
dednahype
Рет қаралды 19 МЛН
How to use Figma?
1:24:21
Cutting Edge School by Ansh Mehra
Рет қаралды 598 М.
How to use Figma Components & Variants?
1:10:38
Cutting Edge School by Ansh Mehra
Рет қаралды 86 М.
What are Figma Variables?
1:00:18
Cutting Edge School by Ansh Mehra
Рет қаралды 57 М.
How to Prototype on Figma?
59:40
Cutting Edge School by Ansh Mehra
Рет қаралды 44 М.
Simon Sinek's Advice Will Leave You SPEECHLESS 2.0 (MUST WATCH)
20:43
Alpha Leaders
Рет қаралды 880 М.
How to Make a Design System in Figma?
38:46
Cutting Edge School by Ansh Mehra
Рет қаралды 82 М.
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН