New auto layout makes me sad

I’m sorry but I so strongly disagree with the new auto layout UX/look and feel. I do like the ability to change ordering, but why make it so much more difficult to change padding? It used to be just putting in one number for an even padding all around or clicking in to the box to change it left/right/top/bottom. Now there’s a tiny icon indicating left/right (which I honestly forget each time) with an input field and then another tiny icon indicating top/bottom with another input field. If I want to make an even padding around an element, I have to search, input, search again, input again. It’s just more cognitive load and has honestly cramped my design speed. It also was way easier to switch between “packed” and “space between”. I now have to go through a small kebab menu. And there’s also trigger areas when resizing? I just want to change the element, I don’t want to resize the padding. I miss the old layout. I want some of the new features with the old (more intuitive imo) layout.

2 Likes

I agree on switching between “packed” and “space between”.
With padding there’s mostly positives in my opinion. There are now two boxes (horizontal/vertical padding) but ctrl/cmd + click and it turns into one.
You do have to be more precise with mouse movements, but I do appreciate being able to control padding on the canvas rather than having to turn to the sidebar.

1 Like

Pro Layout Panel is created for this exact reason, and it now supports the new auto layout, I will definitely be adding back the ALv3.0 all-round padding input field now seeing this post :pray:

2 Likes

YOu can CTRL-Click on it to unite the two fields, or directly edit padding on the canva and holding Alt+Shift (I think)

I agree with you. I dont want to resize the padding but it keeps making me use it. Now it slows my design speed since I have to make sure I use the right icon for resize the whole thing or resize the padding.

1 Like

I agree it’s a little weird not having the padding be either 1 or 4 fields (similar to the corner radius behavior) but otherwise I do like the other changes.

2 Likes

I get what they are trying to do. So often my horizontal padding is equal on both sides, but different from my vertical padding which is also equal on both sides. I’ve never created a button where this wasn’t the scenario

But the layout of the fields divorces itself from the physical padding locations, and relying on invisible UI like holding down the control key just to make all padding the same is a punt at best.

No matter how they fix this, I hope it involves putting the four fields in the familiar NESW diamond shape.

1 Like

That a really useful thing - thanks! :+1:
On the other hand - how am I suppose to know that? That’s almost like Adobe AE (regarding poor affordance and discoverability) the tool is becoming gradually more and more for the ninjas :ninja:

I think the overall idea was to move the controls away from the sidebar, into the canvas. I can’t say if I agree with this yet, but I found the keyboard modifiers greatly help – so now it’s just a matter of getting used to them.

As for moving Packed/Space between into a kebab menu – on canvas, you can click on the gap and enter “a”, just a single letter. It will switch to space between.

To adjust a single padding, click on the edge and enter a value.
If you hold Option and click, it will adjust padding on both sides.
If you hold Option+Shift and click, it will adjust padding on all four sides.

I get that it’s not the same as having these options in the right panel, but I’m slowly getting used to this way of working with auto layouts and it starts to grow on me. Though I wouldn’t mind if there was a gesture to go to “space between” if you drag the cursor through all three alignments in the alignment box.

1 Like

Yes the affordance is terrible. Though the more complex an application gets, the more difficult it is to balance affordance and UI clutter. Figma isn’t the most complex design software out there though, compared to other more advanced design software that don’t have ninja features. It’s hard to tell if they could increase affordance while maintaining a clean UI.

Speaking of ninja features, here’s another one I discovered recently:
After clicking in the alignment box you can hit X to switch between “packed” and “space between”. Alternatively you could click the margin box and input “auto” or just “a” to switch to “space between”.

I want the old icon for changing the whole padding of auto layoout.