Great stuff Mizko. So I’m trying to create a responsive web layout using auto layout. A fixed header and fixed footer with variable width, and in the middle, the content area should have a variable height and also variable width. So far this should be easy right? But now I’d like the content area to have two columns, both scrolling vertically and independently. One column is a narrow panel on the left, and again it should be vertically scrollable. And the right column has variable width to fill the viewport space, and should also scroll vertically, but again, totally independently from the left panel. This is what I cannot get working. Any ideas?
I like how he stops and asks us questions, to make us think about what will happen without immediately showing us the results. This helps us get a deeper understanding of the tool and will drill it in memory. Thanks 👍
I'm a Junior UX/UI Designer and recently I started improving my skills with Figma. Your videos help me a lot to understand better how to use Figma and to achieve better UI results. Thank you! 😌
With the new Figma major update, these Hug content and Fixed width options are now at the top of the right sidebar not in constraints anymore. Thanks for your tutorials!
*I love the fact that you ask us questions at **8:46**.* I paused the video at this moment & tried to find the solution by myself. It really helpful. :)
5 minutes into your video, and im already out of my figma slump! I love that way you add personality and charm into it! I am an obedient overlay! Thank you so much
Just started learning Figma and you're such an awesome teacher! Simple explanations, exciting charismatic personality and you ask questions which gets us thinking! And then encouraging people to break the design by clicking the settings again, is very smart and helps build / reinforce confidence! Thank you!
Just found your channel today and so excited to be the 1000th like on this video! Congrats! And thank you so much for a really easy to understand walkthrough of these features and super relevant examples!
I'm starting to use Figma after a few years with Sketch (and of course Photoshop before that), and I must admit I'm pretty AMAZED by it. Thanks for the videos, I keep watching :)
Hey Mizko ..this one is golden... it's good if you'll teach "design system series" and throughout the series , you'll cover different different parts of design systems
Figma should hire you making tutorials. Watched their tutorial about these subjects and I understood nothing lol. Thank you so much for such a great tutorial
Nice Guidance for FIGMA..... I can able to work simultaneously in figma and get to how it works ….and for understanding the process it was so helpful...
Great tutorial! Very informative and timely for me. I especially liked the simple manner in how you broke down constraints. I've been working pretty heavily with Figma for the past week or so and every now and then I'd come across a feature-like this one-that more or less tripped me up and begged for extra attention. Taking what I've experienced so far along with what you've presented really helps set me up for success, thank you.
Haha! Glad you enjoyed it Andre. If you want to learn more advanced techniques, check out my masterclass - thedesignership.com/courses/the-ultimate-figma-masterclass/
Thank you so much for sharing this amazing knowledge for a newbie like me. I have a small question for this lesson. I'm doing a vertical auto-layout but I would like to add an element in the right side. How could I handle this issue? I hope to receive your reply or any reply from others. Thank you so much
your guide is more clear and more detailed than the official. I was able to easily complete it without any struggle and with your encouragement to play around with the setting, you are a great designer and teacher mentor. Since your online free tutorial is having such a huge influence and impact on us, is there any difference compared to your paid course?
Thanks! At 9:52, there was no "hug contents" option for me when I clicked on the modal auto layout inside the frame (overlay). But, when I set the constraints to center center for the vertical and horizontal axis it worked just like your demonstration
You are a real lifesaver Mizko. Thank you for all your videos, they are totally explanatory. If it wouldn't be a bother, could you do a video explaining how you designed the Modal; I have tried it on my own, but it keeps hiding some of the contents when I try moving the frame of the modal around. Looking forward to a positive response.
Wow, Mizko you helped me understand that way better than Figma or Google, thanks. This explains why my component layouts would fall apart when I added auto layout.😆
I just hit the subscribe button because I love the way you explain, very simple and informative. but one thing I wanna ask are you always using frame tools instead of rectangle into your design? and what's the weakness using those both tools thank you.
@@Mizko Great question! I personally found the frame tip (mind blown) and form field examples (mind blown but also forehead slap that I've been lazily continuing without learning this) most helpful. So any other time-saving tips, with an example of how it's helpful in a typical UI context would be much appreciated! Love your work :)
Thank you for this video Mizko! I really appreciate that you don’t rush through it like many other designers on here. I just accepted my first major role with a company and found this video so incredibly helpful!
Hi Mizko, I’m loving your videos! I just have a question as to why you need to have an overlay frame inside the scalable frame when you can work with the scalable frame and filling that black?
Great video! Your way of teaching is really good. I have one question with regards to the video. Why did you put another frame on top of the desktop frame? Can we not achieve the same responsiveness by putting the form element directly on top of the desktop frame? Thanks
Hey Ankit, thank you! Glad you enjoyed it. Ah, you can definitely do that as well.. but it can be easier to move everything within 1 group, than having 2. But your method can work as well.
In the beginning of this video, how did you create the overlay to get started? Is it just by click and dragging around the frame you had just made? Or is there more to it than that? Thanks so much! Great video.
I downloaded Shazam just to figure out what your closing song was. Really appreciate the videos and love the closing music! 😆 How can I find the music?
Loved this video! Could you show us how to take the next step and build out this same design and layout in Webflow? Specifically showing how we would set up the constraints and build the grid.
Great tutorial. I'm a beginner in Figma and in this demo i did'nt understand why the 'overlay' was in the 'desktop'. Why not just have the modal in the 'desktop'?
Thank you for this informative video! Just a heads up I am trying to follow along and the download you mentioned to do so is not in the video description here on RUclips. Any suggestions on where to find it?
Hi Mizko, thanks for the video this is very helpful! What if we want to resize the modal itself to fit mobile and web screens? When we change the size of the parent frame, the modal sticks to the center, but its size remains. Do we have to create different modals for Mobile, Desktop and Tablet in that case?
For this you need 2 steps: - set the modal's elements width as "Fill Container". Then, when changing the width of the modal, it should also resize the modal's width automatically. - set the modal width option as "Left and Right". Now you should have a modal that stick to the center and resize itself and its components :)
Become a FIGMA Expert today with me!
My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/the-ultimate-figma-masterclass
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/figma-design-system/
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/products/outline-wireframe-kit
Yours truly,
Mizko
Great stuff Mizko. So I’m trying to create a responsive web layout using auto layout. A fixed header and fixed footer with variable width, and in the middle, the content area should have a variable height and also variable width.
So far this should be easy right? But now I’d like the content area to have two columns, both scrolling vertically and independently.
One column is a narrow panel on the left, and again it should be vertically scrollable. And the right column has variable width to fill the viewport space, and should also scroll vertically, but again, totally independently from the left panel. This is what I cannot get working.
Any ideas?
I FOUND IT!! Sorry for the back and forth. It's 'George Hatzis' website I was looking for. I also SMASHED THE LIKE BUTTON. cheers
Might I ask a irrelevant question? Are u from Taiwan or associated with Taiwan? My friends are just curious no offense
@@percy9967 Haha! My parents are from Hong Kong and I was born in Australia.
@@Mizko WOW! What a coincidence ! I studied at USyd a few years ago!
Nice Concent! And Go going!
I like how he stops and asks us questions, to make us think about what will happen without immediately showing us the results. This helps us get a deeper understanding of the tool and will drill it in memory. Thanks 👍
:) Thank you! Appreciate it.
I'm a Junior UX/UI Designer and recently I started improving my skills with Figma. Your videos help me a lot to understand better how to use Figma and to achieve better UI results.
Thank you! 😌
With the new Figma major update, these Hug content and Fixed width options are now at the top of the right sidebar not in constraints anymore. Thanks for your tutorials!
Thankyou so much
*I love the fact that you ask us questions at **8:46**.* I paused the video at this moment & tried to find the solution by myself. It really helpful. :)
5 minutes into your video, and im already out of my figma slump! I love that way you add personality and charm into it! I am an obedient overlay! Thank you so much
Wooo! Glad to hear!
Just started learning Figma and you're such an awesome teacher! Simple explanations, exciting charismatic personality and you ask questions which gets us thinking! And then encouraging people to break the design by clicking the settings again, is very smart and helps build / reinforce confidence! Thank you!
I have seen so many videos on how to create auto-layout and this one is the best!
Hey Mizko, I must tell you, your videos and tutorials are the best! Thank you for sharing all this.
Thank you Ana! Really happy to hear :)
Just found your channel today and so excited to be the 1000th like on this video! Congrats! And thank you so much for a really easy to understand walkthrough of these features and super relevant examples!
I finally understand why people used frames over rectangles 😍😍😍 thank you. I think this will improve my overall workflow duration.
I'm starting to use Figma after a few years with Sketch (and of course Photoshop before that), and I must admit I'm pretty AMAZED by it. Thanks for the videos, I keep watching :)
✨
This is so helpful while I'm in my UX/UI bootcamp. I love the small bites of knowledge. Thank you!!
Glad you enjoyed this!
is it too early to say I love you? You just saved me so much time with this! thank you so much
Thank you for your video! I was stuck and hopeless. I ran into your content and it changed my life!
Thank you Cyril! So happy to hear this.
Hey Mizko ..this one is golden...
it's good if you'll teach "design system series" and throughout the series , you'll cover different different parts of design systems
Thank you Mizko. You are truly awesome; you know your stuff and teach it really well. Blessings on you.
Mizko you are brilliant! very clear and simple, save my lives!
Thank you!
Dude you're a wizard. This is gonna save me time! Thank you, thank you, thank you.
🙏🏼
Super informative video in under 15mins! You're my new design hero!
Woo! 🔥
Woahh really helpful video man! It was great that you showed how to design with an example.
You really have the best UX tutorial videos 👍🏼 Also really like how you give us time to think about a solution before you present it.
Wow. Humbled, thank you Sohmik!
I owe you a like and a comment because I am already subscribed. And I've just paid my due.
Awesome content as always. Life saver. Thanks
This is immensely helpful. I'm genuinely grateful to you to get this tutorial. Keep sharing much more from your vast knowledge.
🙏🏼 Every week!
Figma should hire you making tutorials. Watched their tutorial about these subjects and I understood nothing lol.
Thank you so much for such a great tutorial
Haha! Humbled
Nice Guidance for FIGMA..... I can able to work simultaneously in figma and get to how it works ….and for understanding the process it was so helpful...
thank you soooooooooooo much for this...I have struggled with Figma but thanks to you I know that ctrl f is my friend in need :)
Great tutorial! Very informative and timely for me. I especially liked the simple manner in how you broke down constraints. I've been working pretty heavily with Figma for the past week or so and every now and then I'd come across a feature-like this one-that more or less tripped me up and begged for extra attention. Taking what I've experienced so far along with what you've presented really helps set me up for success, thank you.
Thank you for this. Just popped up on my recommendations. I'm working on a social media cover photo and this is what i need!!!!
Thank you!
Hi Mizko, your Figma content really helped me who just switched from Sketch to Figma.
I regret why I didn't do it earlier. LOL
Thank you!
Haha! Glad you enjoyed it Andre. If you want to learn more advanced techniques, check out my masterclass - thedesignership.com/courses/the-ultimate-figma-masterclass/
You are an angel. Thank you so much for all your videos!
It definitely hurt when I fell down from heaven 🙏🏼
Thank you so much for sharing this amazing knowledge for a newbie like me. I have a small question for this lesson. I'm doing a vertical auto-layout but I would like to add an element in the right side. How could I handle this issue? I hope to receive your reply or any reply from others. Thank you so much
Man, I was a bit sceptical about you when I saw first time. I was wrong mate. Damn, you're a good teacher.
HAHA! Thank you Alan. Means a lot. Was the Thumbnail throwing you off? 😂
@@Mizko ahah let's say you're too friendly mate and I'm sometimes too Russian 🤣
That was awesome thanks!!! greetings from Dominican Republic u have a new suscriber
Thank you Nasser! Appreciate the support
Super helpful Mizko! I love this useful tip 🙌 I can’t wait for more future videos from you.
Thank you Aims, glad you found this useful 🙏🏼
You create the magic, by simplifying the complex things.
Thank you Sudhir!
your guide is more clear and more detailed than the official. I was able to easily complete it without any struggle and with your encouragement to play around with the setting, you are a great designer and teacher mentor. Since your online free tutorial is having such a huge influence and impact on us, is there any difference compared to your paid course?
Another amazing video Mizko!!!! Thank you!!! Learning smart hints watching your videos, the way you presents it is extraordinary!! Keep doing it!!
I LOVE your videos! you make our lives so much easier, thank you so much!!!
Thank you!
Thanks! At 9:52, there was no "hug contents" option for me when I clicked on the modal auto layout inside the frame (overlay). But, when I set the constraints to center center for the vertical and horizontal axis it worked just like your demonstration
Your videos are so so informative.I love watching them and I have learned many new things in figma.Thanks for sharing with us.
You are a real lifesaver Mizko. Thank you for all your videos, they are totally explanatory. If it wouldn't be a bother, could you do a video explaining how you designed the Modal; I have tried it on my own, but it keeps hiding some of the contents when I try moving the frame of the modal around. Looking forward to a positive response.
Wow, Mizko you helped me understand that way better than Figma or Google, thanks. This explains why my component layouts would fall apart when I added auto layout.😆
Haha, thank you Melissa! I am very happy to hear :)
I just want to say you're my new best friend
Thank you Snow :)
your videos are awesome🤩
These videos are gold🔥🔥🔥🔥
Thanks Rahul! Glad you found value.
U r the saver of my designer life ✌
Man this video help me so much! Thank you. You can explain in video like how to create and use the variants for figma?
Done! Will have this one done next week 👌🏼
@@Mizko Thanks you so much!!!
Kudos for showing practically how it behaves in other settings too!
Just subscribed. Awesome video. Learned a ton of stuff.
I just hit the subscribe button because I love the way you explain, very simple and informative.
but one thing I wanna ask
are you always using frame tools instead of rectangle into your design?
and what's the weakness using those both tools
thank you.
Thank you very much! That was a very good explanation! I have been trying to learn auto layout for days!
all vedios are just amazing i love your way to explain the things
- love from india
Great teacher and content. I am looking forward to learning more.
Thank you a lot seriously I struggle with auto layouts a lot but now I learn it perfectly
Thanks So much man! Watching all your videos in preparation for the master class! ;)
super helpful mizko!
Thank you V!!
You just saved my life bruh! very simple and clear content.👌
Very nice tutorial!! Thanks!!
Thank you Aashi! Glad you found this useful
And so well explained.....how can anyone dislike this?
Trolls!
You're an amazing teacher
You’re a life saver 🙌
This guy is awesome, Thanks for your Effort.
Another absolute gem!
Thank you! Grateful to hear you enjoyed it. Love to know, what's something you'd like to learn in an upcoming video
@@Mizko Great question! I personally found the frame tip (mind blown) and form field examples (mind blown but also forehead slap that I've been lazily continuing without learning this) most helpful. So any other time-saving tips, with an example of how it's helpful in a typical UI context would be much appreciated! Love your work :)
wow! youre a really good explainer. this is really helping me.
specially loved this one, thanks Mizko!
Thank you :)
Very nice and realatable Tutorials.
Keep going!
jumped on the masterclass, it is epic :)
Thank you for this video Mizko! I really appreciate that you don’t rush through it like many other designers on here. I just accepted my first major role with a company and found this video so incredibly helpful!
Thank you for this! Helped a lot !
Your tutorials are just AWESOME ❤️
Than kyou Nayana!
Hi Mizko, I’m loving your videos!
I just have a question as to why you need to have an overlay frame inside the scalable frame when you can work with the scalable frame and filling that black?
Because in the beginning he wanted to show how the constrains for the "overlay" frame work, related to the parent frame. :)
Yeah, I was confused as well, that overlay layer was unnecessary, could have been just the frame itself with a background color
Great video. Better than the official Figma one about constraints 👍🏻
Oh Vania, thank you and really appreciate the kind comments 🔥
These tutorials are amazing. Thanks!
I learned a lot from your video. I will definitely purchase the masterclass!
Great tutotial! Thanks Mizko!
Great video, I love your teaching approach, clear and direct. Thank you.
Your videos are amazing! Thanks for making it plain for beginners
Thank you Sami! Really appreciate it.
Thank you, brilliant stuff explained simply.
Super-helpful video! Love the channel -- thanks for taking the time to share your knowledge!
Thank you so much! You are a treasure) Really helpful videos
Thank you! Have subscribed! its so clear
Nice. I like the Amazon UI look and feel
Great video! Your way of teaching is really good. I have one question with regards to the video. Why did you put another frame on top of the desktop frame? Can we not achieve the same responsiveness by putting the form element directly on top of the desktop frame?
Thanks
Hey Ankit, thank you! Glad you enjoyed it. Ah, you can definitely do that as well.. but it can be easier to move everything within 1 group, than having 2. But your method can work as well.
@@Mizko Thanks! Got it now.
Can you explain the difference between setting constraints "left and right" with "top and bottom" and scale.
You are a beast Mizko! Thank you for this tut!
In the beginning of this video, how did you create the overlay to get started? Is it just by click and dragging around the frame you had just made? Or is there more to it than that? Thanks so much! Great video.
Amazing and very helpful video, thanks!
Thank you Ania!
Where is the design file for this tutorial?
Des explications claires et pertinentes, j'aurai pu payer pour voir cette vidéo ! Merci beaucoup.
I downloaded Shazam just to figure out what your closing song was. Really appreciate the videos and love the closing music! 😆 How can I find the music?
Amazing video!🥰
Loved this video! Could you show us how to take the next step and build out this same design and layout in Webflow? Specifically showing how we would set up the constraints and build the grid.
@Mizko why did you put an overlay first? why not simply change the color of desktop-2 frame? thanks
Because it’s the overlay. There would normally be content underneath
Finally found the solution, thanks !
Such an amazing videos you have! thank you so much for sharing, super helpful
🙏🏼🙏🏼👌🏼
Great tutorial. I'm a beginner in Figma and in this demo i did'nt understand why the 'overlay' was in the 'desktop'. Why not just have the modal in the 'desktop'?
Thank you for this informative video! Just a heads up I am trying to follow along and the download you mentioned to do so is not in the video description here on RUclips. Any suggestions on where to find it?
Great explanation! Thank you so much!
Hi Mizko, thanks for the video this is very helpful! What if we want to resize the modal itself to fit mobile and web screens? When we change the size of the parent frame, the modal sticks to the center, but its size remains. Do we have to create different modals for Mobile, Desktop and Tablet in that case?
I'm about to ask the same question :)
For this you need 2 steps:
- set the modal's elements width as "Fill Container". Then, when changing the width of the modal, it should also resize the modal's width automatically.
- set the modal width option as "Left and Right".
Now you should have a modal that stick to the center and resize itself and its components :)