I use Auto layout for pretty much everything. A lot of the time my entire design is nested within a series of auto layouts. Consider these points: -easy to add padding and shift elements in X and Y pixel by pixel with just numerical inputs -instantly change alignment (centered, bottom left, top right) -set min and max values to constrain elements to specific device range -much more flexible when you add or change something in a design, kind of like a “ripple delete” -hug contents and fill container modes are essential for building responsive tables, dashboards and more -design is much more standardized, scalable, accessible and flexible for other designers working on the same project If I wanted to manually drag pixels around I would just use Photoshop.
@@JustLearningDesign-bk4yr I agree with Malewicz approach too. No need to start adding AL to a layout before it's layed out properly in the 12th and "final" iteration, then if a later iteration is required (typically) then it's normally just a matter of swapping stuff or re-position things. If something more is required I normally start working on a new version of the existing layout without AL and repeat the process.
I'm normally not a fan of responsive design in terms of making one layout suit ALL devices, it's a tuff trade-off. Better to work with an adaptive approach, to cater specifically to each device. It always generate a better result compared to forcing a desktop layout to work unaltered on mobile, tablet etc based on some basic flexbox routines.
3:06 - I can't agree. You can use min/max width/height option and decide if elements should wrap to the next line. That allows to use AL not only to fit more content horizontally. Of course there's still a plenty of room on how the AL could be improved (in comparison to Webflow or Framer) but we're on a good path already ;-) 4:32 Also speaking of not putting the 'Back arrow' button in the AL - you can still have it in the AL and use the 'Absolute position' option, to keep things organized.
Been working with auto layouts for 2 years And auto layout saved a lot of time and effort when dealing with feedback, keeping the entire project with in same structural boundary. Spending some extra time using auto layouts in design system components and then simply drag and dropping them into screen im working on helped tremendously. Meanwhile working with manual layouts imagine making changings in one section/component and now your entire screen is out of alignment. I understand it is frustrating when people use auto layouts wrong but I think ‘vilainifying’ auto layouts is wrong move.
Totally agree. Designers have forgotten how to spend time on actually designing the best possible solution, because they’re knee deep in tool engineering.
I'm glad I've been making first steps in UI/UX when autolayout was not a thing (and Figma too) so I was not distracted, and I could focus on it when I've had neccessary skills already
That's exactly my point! It's a very useful feature but it really is essential to get the fundamentals first to really understand what it is we're designing. Good to hear! :)
Hey, just wanted to say thanks for the helpful info you shared. I'm using the method you showed for arranging stuff manually and using auto-layout when needed. Your tips are making a big difference in how I learn. Appreciate it!
Since learning auto layout, I can't imagine working without it. It can be a bit slow in the beginning but once you are iterating on the design it allows to make big changes very fast and I don't have to worry about spacing or positioning, only content and structure.
USE AUTOLAYOUT! You’ll be faster compared to moving things manually and eventually design freely like you would traditionally. This is a habit and skill every designer that every product designer needs to master if they’re going to succeed in a professional environment.
A perfect video like autolayout. 😁😁 I was a bit biased towards auto layout in the past, I used to recreate my design from the ground just to apply auto layout in everything. That was a lot of wasted time. Nowadays, I feel more comfortable with graphics design software for UI/web design. There's no auto layout type of thing. Everything has to be done manually. But since I'm not bound to any rules here like figma, I feel so much freedom. And this freedom allows me to break things apart quickly, without any hesitation - so I can now quickly create much more variations of my designs. Previously in figma, I used to get bound to perfectionism. And since I've invested a lot of time and energy on pixel perfect layouts, I always hesitated to break things and recreate new design variations. Now in graphics design software, there's no rules and lots of freedom.
I'm buying it right now. Created at least what I thought was a beautiful design in Figma with all sorts of auto layouts all over the place bc I thought that is what I was supposed to do. Started coping over to Framer and it basically exposed all of my mistakes and has now become one giant disaster in Framer. I'm wiping the whole Framer project, taking your auto layout course, going back to Figma to correct before I move anything over again. I'm sure many people would tell me to just go learn all the stack stuff in Framer but I want to learn to do it the right way, and I'm assuming the concept can apply universally at least to an extent.
Yes, the main idea is to first understand layout before you go use auto-layout. Many skip that step guided by fomo and 30 second tutorials and it really is necessay to be able to "see the layout" and then apply automatic tools. Good choice! :)
I've notice this shift in pixels when I was learning figma, the guy just showed the shortcut made the button and boom said it was done, but the text was clearly not aligned to the center
That is very common and it's exactly my main point of the video. But if you can see when it's off center you're already off to a great start! :) Most people don't see it.
So excited for Boring UI 2! I know its dumb but ive been looking forward this Auto Layout video because I need to present Demo versions of my designs at work and Ive been working with Framer, but I have trouble defining the breakpoints since you cant assign them manually, unless you use auto layout.
Funny I kind of came to this conclusion myself the other day, I found it more complicated to do the min max and then sometimes I'd get stuck and then had to track back to the original component and where this was an issue or not. But since Figma added this feature I figured this should be something beneficial or important. Figma has been working hard to push so many things but I feel their support is getting lost in things and some of the features are buggy as a consequence
Hell naw! Part of the fun of auto-layout is figuring out complex layouts while having the power to adjust limits, dynamics, and structure. Heck, you're basically stacking auto-layouts within auto-layouts. Isn't that the point, no? If development (yep, used to be a designer/dev before) has thought me one thing - it's semantics. If I wanna doodle and play-around- we have paper proto and lo-fi wireframes for that. But to each his own, I guess. Do what works for you.
Playing around with high-fidelity is crucial to not get the same boring crap everyone's outputting :) And sure, it is fun when you make a complex, multi-stack layout work, but still, having the eye for design and actually seeing misalignments in layout is a skill that only comes from manual first. Of course once you get awesome with manual layout you don't need to start with it anymore, this is aimed at beginners who skip manual layout and go for auto right away - resulting in misaligned designs they don't see as misaligned.
Moreover, too many people (most worryingly popular YTrs) don't use auto layout at all because "it's just a quick draft" which is insane because other than consistency in design, auto layout speeds up the with significantly if one understands how to use it 😶
Yes and no. Auto Layout speeds stuff if you know manual layout first. For beginners it makes them lazy and lacking proper understanding of layout at all. So my approach to Auto Layout starts from the ground up, lots to do before pressing Shift + A.
I am a bit overwhelmed... I am in the middle of the course where I learn how to close everything in Auto-layout to get close as much as possible to flexbox. The author also has over 20 years of experience in design. So now I am trying to find the best solution... I have to admit that Auto-layout sometimes is really annoying when you want to just move your CTA by a few pixels. So when and how to use Auto-layout? My favourite answer is: It depends… :D It's funny but it's true ;)
The best way is to (when practicing as a beginner) practice manual layout A LOT first. Then by all means use Auto Layout - I'm not saying to NOT use it, I'm saying to not use it in the initial UI stages AND to not START with it as a beginner. If you start with manual then you'll be able to spot layout issues later and that's valuable :)
Never felt that you were a big fan of Auto Layout. And if my intuition is true, not sure you are the one to teach it. Just keeping it honest. And still, I can't imagine a faster way to get really consistent spacing and good structure than just using Auto Layout, and applying a defined hierarchy for different levels of components and their internal/external spacing.
I'm not the fan of how people use auto-layout (mindlessly) and how they skip the importance of manual layout first - most auto-layouters don't know how to do layout and just rely on automation - that leads to many problems. When used right (and at the right time) it is a great tool and we've been using it in our projects too (just under a different name)
@@MalewiczHype I'll check your video and see what you have to say about it. I guess I don't quite get the part of doing manual layout first. Seems like doing double work. If you spend time carefully placing an icon to the left and then HStack of text to the right of it, and you use the 'square' method to check all the distances (to the icon and between the text elements and the screen edges) before doing AL.... well. That's what AL will do automatically for you, right? I guess I'll find out soon! 😊
AL does many alignments wrong optically. Sometimes you have to adjust the icon inside its own container manually, or even adjust with a nudge value for text (because vertical trim is not yet supported by any browser). What manual design does is it teaches people how to LOOK at design and see it as a structured layout. That way they can spot mistakes in auto -layout and correct them.
Hmmm yes and no, i prefer to have a better idea from the sketch and the low fidelity, after you have it, already you know how it should be designed. So, use autolayout will help too to reduce timing organizing things. But if you will start alrededy with mid or hifh fidelity or use a component library, yes, deaign without autolayout, then you have more or less how it will do, start to use in the parts that really need
Another headache with Auto Layout for me is during the initial design phase where we need to have the PO or others join in for brainstorming or commenting. They try to drag UI elements around on Figma. The problem is not everyone is Figma-savvy, and Auto Layout is here to murder them all. LOL
Hey Michael 😅 I'm big fan of you from a small town of India. Though I don't have that luxury to buy your course but your videos are such helpful that anyone can be a true designer if have the passion. Thanks my ଗୁରୁ (Teacher) for enhancing my skills 😊☺️
No worries, the paid courses help my simply create more free content for everyone - my goal is for as many designers as possible to get great :) Keep going!
I love auto layout, but it's completely useless without a wireframe first. I usually go the wireframe > lofi mockup > hifi with autolayout No cutting corners.
I seriously don't know. But there are many weird misconceptions like that. My favorite is 5 colorful cursors moving on one design and it just says "Collaboration" ;-)
I think it is fair to say that Auto-Layout is an important aspect when it commes to designing a responsive design. Would be great if Auto-Layout can have as much properties to make it trully responsive :)) Maybe in the future update
As a Graphic Designer moving into UI design I really felt auto layout just doesn't seem friendly it doesn't let me be creative but every youtube video tells me auto layout is the way to go, I will definetly try to not use auto layout and only use it at the end of the project
I started translating the titles and subtitles into PT, ES and FR recently - yes. Subtitles should also be in PT, but of course it's automatic translation so probably not perfect - but at least it's something :)
Not a directly youtube feature, our tool that does subtitles offers a translation and it's a bit of manual work every time to upload each file and put the titles in manually but it's worth it :)
No. I don't hate inanimate objects or software. I just don't agree with many things they do. As for Auto Layout it exists in every tool now and is something worth learning.
I use Auto layout for pretty much everything. A lot of the time my entire design is nested within a series of auto layouts. Consider these points:
-easy to add padding and shift elements in X and Y pixel by pixel with just numerical inputs
-instantly change alignment (centered, bottom left, top right)
-set min and max values to constrain elements to specific device range
-much more flexible when you add or change something in a design, kind of like a “ripple delete”
-hug contents and fill container modes are essential for building responsive tables, dashboards and more
-design is much more standardized, scalable, accessible and flexible for other designers working on the same project
If I wanted to manually drag pixels around I would just use Photoshop.
the point is for beginners to UNDERSTAND layout first and be able to see it when it goes slightly wrong.
Then AL is great.
Too slow for me. Easier to put manually first then frame items into auto layout
@@JustLearningDesign-bk4yr I agree with Malewicz approach too. No need to start adding AL to a layout before it's layed out properly in the 12th and "final" iteration, then if a later iteration is required (typically) then it's normally just a matter of swapping stuff or re-position things. If something more is required I normally start working on a new version of the existing layout without AL and repeat the process.
I'm normally not a fan of responsive design in terms of making one layout suit ALL devices, it's a tuff trade-off. Better to work with an adaptive approach, to cater specifically to each device. It always generate a better result compared to forcing a desktop layout to work unaltered on mobile, tablet etc based on some basic flexbox routines.
I don't know how to use auto layout properly or improperly, so I generally leave that button alone.
At some point it will be worth it to learn that, but at the initial stages it's best to master alignment manually to know what you're doing :)
3:06 - I can't agree. You can use min/max width/height option and decide if elements should wrap to the next line. That allows to use AL not only to fit more content horizontally. Of course there's still a plenty of room on how the AL could be improved (in comparison to Webflow or Framer) but we're on a good path already ;-) 4:32 Also speaking of not putting the 'Back arrow' button in the AL - you can still have it in the AL and use the 'Absolute position' option, to keep things organized.
Been working with auto layouts for 2 years
And auto layout saved a lot of time and effort when dealing with feedback, keeping the entire project with in same structural boundary.
Spending some extra time using auto layouts in design system components and then simply drag and dropping them into screen im working on helped tremendously.
Meanwhile working with manual layouts imagine making changings in one section/component and now your entire screen is out of alignment.
I understand it is frustrating when people use auto layouts wrong but I think ‘vilainifying’ auto layouts is wrong move.
the point is for beginners to UNDERSTAND layout first and be able to see it when it goes slightly wrong.
Then AL is great.
Totally agree. Designers have forgotten how to spend time on actually designing the best possible solution, because they’re knee deep in tool engineering.
This! 🫡
I'm glad I've been making first steps in UI/UX when autolayout was not a thing (and Figma too) so I was not distracted, and I could focus on it when I've had neccessary skills already
That's exactly my point! It's a very useful feature but it really is essential to get the fundamentals first to really understand what it is we're designing. Good to hear! :)
can't wait but can you do video on how to prepare designs system if you want do your project case study.
Hey, just wanted to say thanks for the helpful info you shared. I'm using the method you showed for arranging stuff manually and using auto-layout when needed. Your tips are making a big difference in how I learn. Appreciate it!
Since learning auto layout, I can't imagine working without it. It can be a bit slow in the beginning but once you are iterating on the design it allows to make big changes very fast and I don't have to worry about spacing or positioning, only content and structure.
You do have to worry about spacing and positioning - that's the issue here exactly. :)
As someone who uses figma, I agree. As someone who has done frontend, I hate you for saying this. I wish all layouts were just possible with flexbox 😅
Check out penpot's implementation of flexbox and their grid approach. Way better than Figma.
USE AUTOLAYOUT!
You’ll be faster compared to moving things manually and eventually design freely like you would traditionally. This is a habit and skill every designer that every product designer needs to master if they’re going to succeed in a professional environment.
First learn manual layout, then use automatic tools - sure
A perfect video like autolayout. 😁😁 I was a bit biased towards auto layout in the past, I used to recreate my design from the ground just to apply auto layout in everything. That was a lot of wasted time.
Nowadays, I feel more comfortable with graphics design software for UI/web design. There's no auto layout type of thing. Everything has to be done manually. But since I'm not bound to any rules here like figma, I feel so much freedom. And this freedom allows me to break things apart quickly, without any hesitation - so I can now quickly create much more variations of my designs.
Previously in figma, I used to get bound to perfectionism. And since I've invested a lot of time and energy on pixel perfect layouts, I always hesitated to break things and recreate new design variations. Now in graphics design software, there's no rules and lots of freedom.
I'm buying it right now. Created at least what I thought was a beautiful design in Figma with all sorts of auto layouts all over the place bc I thought that is what I was supposed to do. Started coping over to Framer and it basically exposed all of my mistakes and has now become one giant disaster in Framer. I'm wiping the whole Framer project, taking your auto layout course, going back to Figma to correct before I move anything over again. I'm sure many people would tell me to just go learn all the stack stuff in Framer but I want to learn to do it the right way, and I'm assuming the concept can apply universally at least to an extent.
Yes, the main idea is to first understand layout before you go use auto-layout. Many skip that step guided by fomo and 30 second tutorials and it really is necessay to be able to "see the layout" and then apply automatic tools. Good choice! :)
Please, make a video on when to use constraints or the auto layout.
Can't wait! 😍 And for boring Course 2 !
Everything's on its way! 🫡
Awesome video, please keep posting!
I've notice this shift in pixels when I was learning figma, the guy just showed the shortcut made the button and boom said it was done, but the text was clearly not aligned to the center
That is very common and it's exactly my main point of the video. But if you can see when it's off center you're already off to a great start! :) Most people don't see it.
So excited for Boring UI 2!
I know its dumb but ive been looking forward this Auto Layout video because I need to present Demo versions of my designs at work and Ive been working with Framer, but I have trouble defining the breakpoints since you cant assign them manually, unless you use auto layout.
Funny I kind of came to this conclusion myself the other day, I found it more complicated to do the min max and then sometimes I'd get stuck and then had to track back to the original component and where this was an issue or not. But since Figma added this feature I figured this should be something beneficial or important. Figma has been working hard to push so many things but I feel their support is getting lost in things and some of the features are buggy as a consequence
Hell naw! Part of the fun of auto-layout is figuring out complex layouts while having the power to adjust limits, dynamics, and structure. Heck, you're basically stacking auto-layouts within auto-layouts. Isn't that the point, no? If development (yep, used to be a designer/dev before) has thought me one thing - it's semantics.
If I wanna doodle and play-around- we have paper proto and lo-fi wireframes for that. But to each his own, I guess. Do what works for you.
Playing around with high-fidelity is crucial to not get the same boring crap everyone's outputting :)
And sure, it is fun when you make a complex, multi-stack layout work, but still, having the eye for design and actually seeing misalignments in layout is a skill that only comes from manual first.
Of course once you get awesome with manual layout you don't need to start with it anymore, this is aimed at beginners who skip manual layout and go for auto right away - resulting in misaligned designs they don't see as misaligned.
Moreover, too many people (most worryingly popular YTrs) don't use auto layout at all because "it's just a quick draft" which is insane because other than consistency in design, auto layout speeds up the with significantly if one understands how to use it 😶
Yes and no. Auto Layout speeds stuff if you know manual layout first. For beginners it makes them lazy and lacking proper understanding of layout at all. So my approach to Auto Layout starts from the ground up, lots to do before pressing Shift + A.
I am a bit overwhelmed... I am in the middle of the course where I learn how to close everything in Auto-layout to get close as much as possible to flexbox. The author also has over 20 years of experience in design. So now I am trying to find the best solution... I have to admit that Auto-layout sometimes is really annoying when you want to just move your CTA by a few pixels. So when and how to use Auto-layout? My favourite answer is: It depends… :D It's funny but it's true ;)
The best way is to (when practicing as a beginner) practice manual layout A LOT first. Then by all means use Auto Layout - I'm not saying to NOT use it, I'm saying to not use it in the initial UI stages AND to not START with it as a beginner. If you start with manual then you'll be able to spot layout issues later and that's valuable :)
Awesome vid, thanks for sharing michal and have a beautiful day as always 🥰😍🤩
Thank you! You too!
Never felt that you were a big fan of Auto Layout. And if my intuition is true, not sure you are the one to teach it. Just keeping it honest.
And still, I can't imagine a faster way to get really consistent spacing and good structure than just using Auto Layout, and applying a defined hierarchy for different levels of components and their internal/external spacing.
I'm not the fan of how people use auto-layout (mindlessly) and how they skip the importance of manual layout first - most auto-layouters don't know how to do layout and just rely on automation - that leads to many problems.
When used right (and at the right time) it is a great tool and we've been using it in our projects too (just under a different name)
@@MalewiczHype I'll check your video and see what you have to say about it. I guess I don't quite get the part of doing manual layout first. Seems like doing double work.
If you spend time carefully placing an icon to the left and then HStack of text to the right of it, and you use the 'square' method to check all the distances (to the icon and between the text elements and the screen edges) before doing AL.... well. That's what AL will do automatically for you, right?
I guess I'll find out soon! 😊
AL does many alignments wrong optically. Sometimes you have to adjust the icon inside its own container manually, or even adjust with a nudge value for text (because vertical trim is not yet supported by any browser).
What manual design does is it teaches people how to LOOK at design and see it as a structured layout. That way they can spot mistakes in auto -layout and correct them.
Hmmm yes and no, i prefer to have a better idea from the sketch and the low fidelity, after you have it, already you know how it should be designed.
So, use autolayout will help too to reduce timing organizing things. But if you will start alrededy with mid or hifh fidelity or use a component library, yes, deaign without autolayout, then you have more or less how it will do, start to use in the parts that really need
Another headache with Auto Layout for me is during the initial design phase where we need to have the PO or others join in for brainstorming or commenting. They try to drag UI elements around on Figma. The problem is not everyone is Figma-savvy, and Auto Layout is here to murder them all. LOL
Hey Michael 😅
I'm big fan of you from a small town of India.
Though I don't have that luxury to buy your course but your videos are such helpful that anyone can be a true designer if have the passion.
Thanks my ଗୁରୁ (Teacher) for enhancing my skills 😊☺️
No worries, the paid courses help my simply create more free content for everyone - my goal is for as many designers as possible to get great :) Keep going!
@@MalewiczHype
Thanks for your kind wishes 😊🙏
Definitely I'll follow your each step to be a shadow of you☺️☺️
I love auto layout, but it's completely useless without a wireframe first.
I usually go the wireframe > lofi mockup > hifi with autolayout
No cutting corners.
Hi Michal! I really want to buy your ultimate design bundle and I was wondering whether you're giving a black Friday discount? Thanks anyways
We will only have bf deals on individual courses, not bundles as bundles are kind of already discounted 🫡
Oh, no... it turns out one has to do actual mental work
:C
Sorry ;)
You are the best 💪🔥
Thanks Michal
You are!
Working on other designers files is a nightmare: !!!!!
It is regardless of what they use because all workflows are different.
my designs are basically all auto layouts lol
i wanna watch this video
Very soon :)
How did I happen to think that auto layout equals responsive design? 🤔
I seriously don't know. But there are many weird misconceptions like that.
My favorite is 5 colorful cursors moving on one design and it just says "Collaboration" ;-)
I think it is fair to say that Auto-Layout is an important aspect when it commes to designing a responsive design. Would be great if Auto-Layout can have as much properties to make it trully responsive :)) Maybe in the future update
As a Graphic Designer moving into UI design I really felt auto layout just doesn't seem friendly it doesn't let me be creative but every youtube video tells me auto layout is the way to go, I will definetly try to not use auto layout and only use it at the end of the project
is the video title in portuguese?! Oo
I started translating the titles and subtitles into PT, ES and FR recently - yes. Subtitles should also be in PT, but of course it's automatic translation so probably not perfect - but at least it's something :)
@@MalewiczHype wow! is that a youtube feature?! is it new? didn't know. pretty good!
Not a directly youtube feature, our tool that does subtitles offers a translation and it's a bit of manual work every time to upload each file and put the titles in manually but it's worth it :)
In french translation the title is weird! @@MalewiczHype
i thought you hate Figma
No. I don't hate inanimate objects or software. I just don't agree with many things they do.
As for Auto Layout it exists in every tool now and is something worth learning.