You’re using Auto-Layout WRONG

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:

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

[tashfix]

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.

[chiragmittal]

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!

[Underhills]

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.

[jacekpuzio]

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.

[Far_Dn]

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.

[zacwolff]

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.

[Hitchens_]

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

[davidkonevky]

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 😅

[faizanbaber]

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.

[Worminatordk]

I don't know how to use auto layout properly or improperly, so I generally leave that button alone.

[paalpaulsen]

Totally agree. Designers have forgotten how to spend time on actually designing the best possible solution, because they’re knee deep in tool engineering.

[DeignFilx]

can't wait but can you do video on how to prepare designs system if you want do your project case study.

[SzabatDesign]

Can't wait! 😍 And for boring Course 2 !

[tuams]

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.

[TonyBlount]

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.

[SkArifHossain]

Awesome vid, thanks for sharing michal and have a beautiful day as always 🥰😍🤩

[felcastt]

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.

[GadgetsGearCoffee]

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

[Iammrunkown]

Please, make a video on when to use constraints or the auto layout.

[exgeeinteractive]

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.