You’re using Auto-Layout WRONG
ฝัง
- เผยแพร่เมื่อ 19 พ.ย. 2023
- Let's talk about Auto Layout! There are right and wrong ways of doing it. I want to show you both sides.
Here's the 50% off promo code:
hype4academy.gumroad.com/l/au...
Auto-layout is an automatic grouping technique for design elements that preserves some basic alignment and allows for easy reflowing or changing the elements within those groups.
It's not a magical cure for a bad design and it's not the most important thing ever.
Major misconception is that developers don't want to code projects done without auto-layout. Not true. It's a myth mostly promoted by people around a certain design tool.
Auto Layout can be VERY useful in the design process, but sadly most people do it completely wrong. And in this video and what follows is me showing you why, how and how to make good use of the tools.
As always the final goal is the best possible UI design that can be made.
#figma #autolayout
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
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 :)
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!
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! 🫡
This is one of the few auto layout guides that makes sense. I’m a product design lead, as well as a 20-year veteran of front end development (yes, I still use jQuery). My company’s Figma project consists of 4 major products that share component libraries as well as components that are unique to those products. Our design system is complex and in a constant state of refinement. We design for 5 breakpoints, and in any particular page I’m using auto layout only occasionally, and almost always on groups of similar elements (like button groups, stacked navigation, interior page elements that require consistent vertical spacing - like sections of body copy).
All the tutorials that auto layout all of the things are not only frustratingly untenable on an actual real-life project that is solving real world problems, I’m always amazed by how diligently the designer sticks to the task of ensuring everything on the page is being shift-a’d as much as possible. Long story short, this is stupid, an unreasonable constraint, and just doesn’t make much sense. Even as a dev I would never work this way, using flex or grid on everything on the page. Sometimes a simple div with some stacked, block-level elements with margin and padding is a better solution than using flex.
The best advice I can give anyone still learning to use these tools is to give yourself a mock brief, and learn to design a product from front to back. Create a user journey, flows, low fidelity wireframes, get some friends and family to commit to usability tests, iterate and refine, move to the high fidelity stage and build a design system as you go. Work on a product as if it was going to be shipped. This is a much better use of your time than designing another dashboard interface (by the way, we don’t use these as often as you think on real products), or building yet another version of a food delivery app.
FACTS!!!!
Man, I want to give you a medal. Can we be friends?
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.
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. :)
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.
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.
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.
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.
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
Awesome vid, thanks for sharing michal and have a beautiful day as always 🥰😍🤩
Thank you! You too!
Can't wait! 😍 And for boring Course 2 !
Everything's on its way! 🫡
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'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! :)
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 🫡
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 :)
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
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
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.
this was my misconception that i should master autolayout to work together with dev and believe me i invest more time than manually aligning things. thank you bro
Some devs are starting to believe that, but trust me it's not the truth outside of just one bubble. As long as the design is good AND clear to devs and the devs are good they rarely care or ask about these things.
You should however make components and outline them for devs from the start, they do frown a lot when that's not the case.
@@MalewiczHype thanks from Pakistan I always recommend your videos to my friends and colleagues
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☺️☺️
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.
You are the best 💪🔥
Thanks Michal
You are!
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.
Working on other designers files is a nightmare: !!!!!
It is regardless of what they use because all workflows are different.
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.
Oh, no... it turns out one has to do actual mental work
:C
Sorry ;)
my designs are basically all auto layouts lol
i wanna watch this video
Very soon :)
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
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
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
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 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.