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 👍
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. :)
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
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!
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
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.
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.
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.
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 :)
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?
I have a question, you kept mentioning "dont use rectangle, use frame", what kind of UI component is for frame, and when should i use rectangle? what about creating a background
noob question here, why is desktop 1440x1024 and not 1920x1080? furthermore, how does a larger resolution with the same aspect ratio effect the design process?
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.
Hey Mizko - Great instructional content here. Following along is a breeze. Quick question however...why do we need the overlay (Background Layer)? Seems that this might be problematic approach in real case scenario? Thanks and keep up the great content!
How did you create the Grouping of the text field and button? I get those are broken up into frames but do you auto-layout those individual elements into a single frame, I am very confused about this?
Love the way you present the tutorials! Very Practical and Handy. Also, I was wondering how to tackle a scenario where we expect the modal to resize in accordance with changing screen size of the parent frame, especially keeping the aspect ratio of the modal intact. e.g consider a homepage screen with a big central logo which we expect to resize as per changing screen size. Would really appreciate if you can share on how to achieve this(maybe a small video if possible). Thanks. Looking forward to more awesome content.
Hey Apar, once again thank you for the kind comments. Autolayout components should scale gracefully in that sense. You might just need to put the modal inside another frame.
Hi Mizko, Great video. I know this might be a long shot, there is a video you made UI/UX related and in that video you mentioned a designer that created a UI/UX cheatsheet guide website. Do you remember his name and website? Thanks
Thanks for your reply back. It’s a global wed design guide website that shows designer how to design ‘form fields’, ‘buttons’ etc. you gave a mention on one of you video saying that he created the website to help other ui/ux designers create better and understand why is important to have good design consistency.
@@aaronpaterson7582 Oh right... I really can't recollect which website this was. If it was a reference to UI design components, the only one I believe I have mentioned was mobbin.design?
Hello Misko, You are polishing UI and your video with your work setup. If you could please reveal your work setup, what are the things you use to make videos. If you could help me, I am planning on starting a RUclips channel. I am inspired by you. I hope you will consider my request. Could you post your gadget videos?
Is there any way to get a component to scale from mobile to desktop? Like let's say I wanted a component that is usually 300 px wide to scale down to 260 on mobile. Over-all nice video
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! 😌
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 :)
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
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
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?
![State of Play | September 24, 2024 [ENGLISH]](http://i.ytimg.com/vi/fVs0suPHAX8/mqdefault.jpg)
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.
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. :)
I finally understand why people used frames over rectangles 😍😍😍 thank you. I think this will improve my overall workflow duration.
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
Yet again, you ask us to download a file that is not there.
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!
Mizko you are brilliant! very clear and simple, save my lives!
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
Where is the design file for this tutorial?
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.
I can't find the practice file!!
super helpful mizko!
Thank you V!!
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 🙏🏼
is it too early to say I love you? You just saved me so much time with this! thank you so much
Can you explain the difference between setting constraints "left and right" with "top and bottom" and scale.
This guy is awesome, Thanks for your Effort.
Nice. I like the Amazon UI look and feel
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.
I just want to say you're my new best friend
Thank you Snow :)
Your tutorials are just AWESOME ❤️
Than kyou Nayana!
U r the saver of my designer life ✌
Just subscribed. Awesome video. Learned a ton of stuff.
Your videos are so so informative.I love watching them and I have learned many new things in figma.Thanks for sharing with us.
And so well explained.....how can anyone dislike this?
Trolls!
all vedios are just amazing i love your way to explain the things
- love from india
Finally found the solution, thanks !
Hi. Where I can download the figma file?
I can't see where :(
Your videos are amazing! Thanks for making it plain for beginners
Thank you Sami! Really appreciate it.
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 teacher and content. I am looking forward to learning more.
Great video. Better than the official Figma one about constraints 👍🏻
Oh Vania, thank you and really appreciate the kind comments 🔥
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.
For sure, That's a life saver
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 :)
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?
Wow you're the best!!! Thank u so much
So helpful. Thank you Boss
Such an amazing videos you have! thank you so much for sharing, super helpful
🙏🏼🙏🏼👌🏼
I have a question, you kept mentioning "dont use rectangle, use frame", what kind of UI component is for frame, and when should i use rectangle? what about creating a background
If you just need a background, rectangle is fine.
Anything else a frame is more appropriate with a fill, it allows you to position elements within it
So helpful, you're a great teacher!
Thank you. Video is very useful.
You are a beast Mizko! Thank you for this tut!
Thank you! Have subscribed! its so clear
hey mizko, love the video. may i ask why there is a need to add the overlay to base frame?
There's no file in the description!
Thanks for the video! I'm not sure I understand why you might use a frame instead of the rectangle tool?
thanks for this great vid!
noob question here, why is desktop 1440x1024 and not 1920x1080? furthermore, how does a larger resolution with the same aspect ratio effect the design process?
So, when using auto-layout and components which one comes first. Auto-layout or components?
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.
which one is the demo file?
But why is the constrains properties not there when i add a frame?
0:45 is there a list of different models or is it never ending list?
Hey, I do not have the option Constraints and resizing. It is because I am using the free version?
Thanks a lot !
I'm not able to find the 'hug contents' option. What do I do?
the link to the design file is no longer in the discription pls.
Whats the difference between "left and right" vs "scale"under the constraints menu?
Hey Mizko - Great instructional content here. Following along is a breeze. Quick question however...why do we need the overlay (Background Layer)? Seems that this might be problematic approach in real case scenario? Thanks and keep up the great content!
Thanks for this!
Thank you Kay for the support! Glad you enjoyed this video ✨
nxt lvl
I'm a bit late to the game here... is the downloadable design file still available? Can't seem to find it in the description. Thanks.
I do not have Hug contents and Fixed options with Constraints. Can you help me?
Cant find the design file in the description
How did you create the Grouping of the text field and button? I get those are broken up into frames but do you auto-layout those individual elements into a single frame, I am very confused about this?
Is auto layout required for all components? Is a component without auto layout bad?
Your tips on using frame instead of rectangles is a mindblowing for me XDDDD
How do you hug components in Figma
thank you dude
Love the way you present the tutorials! Very Practical and Handy. Also, I was wondering how to tackle a scenario where we expect the modal to resize in accordance with changing screen size of the parent frame, especially keeping the aspect ratio of the modal intact. e.g consider a homepage screen with a big central logo which we expect to resize as per changing screen size. Would really appreciate if you can share on how to achieve this(maybe a small video if possible). Thanks. Looking forward to more awesome content.
Hey Apar, once again thank you for the kind comments. Autolayout components should scale gracefully in that sense. You might just need to put the modal inside another frame.
Pls give a demo how to create a simple webpage on Figma.
Does the font sizes also changes while changing frames size ?? Pls tell
Anyone got the practice project file? I cant seem to find it, thanks.
Do you 100% have to use to ''overlay'' frame?
Hi Mizko, Great video. I know this might be a long shot, there is a video you made UI/UX related and in that video you mentioned a designer that created a UI/UX cheatsheet guide website. Do you remember his name and website? Thanks
Hey Aaron! Oh man, do you remember what type of list was it? I don’t recollect
Thanks for your reply back. It’s a global wed design guide website that shows designer how to design ‘form fields’, ‘buttons’ etc. you gave a mention on one of you video saying that he created the website to help other ui/ux designers create better and understand why is important to have good design consistency.
@@aaronpaterson7582 Oh right... I really can't recollect which website this was. If it was a reference to UI design components, the only one I believe I have mentioned was mobbin.design?
Can I drop Storyboard into Figma
thankyou❤
Hello Misko, You are polishing UI and your video with your work setup. If you could please reveal your work setup, what are the things you use to make videos. If you could help me, I am planning on starting a RUclips channel. I am inspired by you. I hope you will consider my request. Could you post your gadget videos?
Is there any way to get a component to scale from mobile to desktop? Like let's say I wanted a component that is usually 300 px wide to scale down to 260 on mobile. Over-all nice video
Hey Nick, 100%. Autolayout and constraints is exactly how you would do it. Did you watch the video? were you able to achieve it?
Am I looking in the wrong place? Why am I the only one who is not able to find the file in the video description for download?
Same thing
I don't have the hug contents option on Figma. Anyone else facing this problem?
same for me
edit : you can find it in the frame options with the hight width ... and for the center option it still in it's place.
where is the figma file?
Mine did not show “constraint and resizing” how do I get there I did select A and it still the same left, right, center. No hug
Sameeee
who do you think is the most powerful designer in MCU?
WHERE IS THE FILE?
10:55 he says NOT fixed aka hug content :D youre welcome
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! 😌
where is the file?
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 :)
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
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!
Hey, quick question, do you always use auto layout?
100% - Haha I have a habit of autolayout-ing everything.. even navigation links spanning horizontally. It saves me time.
Hey guys where can I find the file so that I can follow along
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
Don't see the file to follow along
your videos are awesome🤩
Where is the file? haha
up quiality pls
@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