Thanks for mocking this up, Eyal!
This is actually pretty similar to our initial sketches for this control. I'll cover what I like about it and then talk about why we ultimately decided to go with a different approach.
I think you're right that switching the layout type control from a dropdown to toggle buttons would be an improvement—it's one less click. This is already on my todo list to implement.
I like that this "cardinal direction" style of control for the spacing reenforces the spatial relationships, i.e. the space on the "left" side of the element is on the "left" side of the control. It's a little faster and easier to make the connection of what you want to edit.
The most obvious difficulty with trying to preserve spatial relationships in this control is the "space-between" input. As you found, it doesn't fit nicely into the middle of the other inputs. Even if you removed the "layout preview" component and put it in the middle, it's not clear at a glance a) which axis it belongs to or b) what it's actually doing. (Putting space between every element, not just two elements.)
Space-before, space-between, and space-after on the main axis are also inextricably linked—they work together to both position and (if they are stretch) size the elements. Kevin and I felt that separating out space-between wasn't a good reflection of the layout model.
Keeping these inputs visually linked in a row also makes it easier to know which axis is the main axis. There are always three inputs instead of two on the cross-axis.
The "layout preview" or "visual representation of the stack" is an intriguing idea, as it helps the designer connect the values to the behavior. It's tricky, though, because it's an abstraction and doesn't always correspond to what's really happening on the artboard. It can't take into account the size of elements, the number of elements, or any overrides that the elements may have. In other words, the designer might end up more confused because what's showing in the preview box doesn't match up with what's actually going on in the layout.
The "quick alignment" buttons also have this problem to some extent, but I'm less bothered by it because the icons are less likely to be mistaken for a perfect representation of the layout.
I mentioned the Denny's menu idea a little earlier in this thread. That's another way to come as this visual representation idea, but it's not perfect either.
Consistent quick alignment buttons are tougher to accomplish with a cardinal direction layout, as you've mentioned.
"Full-frame" and "floating" act here as modes, but that's not really consistent with the semantics of the layout engine. There's no difference between a children layout with
0 spacing all around and one with spacing on the left or right, etc. Your alternative take here I think is more spot on, but again, it's really solvable by an "align to left + right" and "align to top + bottom" quick buttons.
I definitely think there's room for improvement with the existing control. We spent a fair amount of time trying different configurations and each have their downsides. For now, though, our major consideration was that the control is reasonably functional and fast w/ the quick alignment buttons.