I’m absolutely with this position also. If this is the feature that will help bring people back over from a company actively trying to damage their livelihoods, it has to both meet their expectations and also push forward the things that Figma folk complain about the most - the design to production experience. This is why people are so hot on the way Penpot addresses this, I think increasingly UI/UX designers are aware of CSS and want their tools to more closely match execution. I’d wager like me, they’d take the complexity hit.
If you guys nail this and then a better-than-figma implementation of variables/design tokens, you’re golden.
What features and properties are non-negotiable, period?
Figma’s 3x3 alignment tool in their auto-layout is pretty intuitive, but would also love to have the support of applying auto-layout in various directions (e.g. vertical stacking & wrap the components to columns, or right to left direction, which would be extremely useful for publication and graphic design layout making for right-to-left and top-bottom-and-right-to-left writing system based projects)
ease of drag and drop between the components within an auto-layout grid
fill or fixed container within a group
What’s something you think that could live without? At least for a while?
canvas stacking or strokes as in Figma
Is there something that none of these apps do but you think we should?
to make the auto-layout feature in Sketch intuitive to use both in terms of having an intuitive icon set to help understanding exactly what they can or cannot do. We had to spend time understanding how auto-layout worked in Figma when it just came out.
to have layers like those in Adobe InDesign. The reason for this is that I use Sketch for graphic design and publication / portfolio design more often than making UI, and I would like to have editable templates in auto-layout (pg. number, water mark, names etc.) for ease of edit but still able to edit items on the canvas that are independent from the template, so that it won’t mess up the entire canvas when moving / adding things around
Please allow groups to have fill, stroke, roundness etc.
This
Being able to apply fill, stroke, and maybe layer style to groups would definitely be a time-saving feature.
And I hope “pause smart layout”’ feature will remain.
I assume you’re talking about pausing this new layout feature, but since you’ve mentioned Smart Layout, let me first make it clear that nothing will happen to Smart Layout: it’ll remain available without changes, this new layout mode will be separate from it. The only relationship is that you can either use one or the other, not both on the same container.
Now, if you’re talking about pausing this new layout mode, I’m not sure yet. In the case of Smart Layout it makes sense because Smart Layout doesn’t impose a particular visual arrangement: you can pause to do some changes, and upon resume your layers will stay where they are, Smart Layout won’t move them for you. In the case of this new layout mode, that wouldn’t be the case. So I don’t think it makes as much sense in theory, but we’ll keep it in mind.
First of all, I love the openness! You even mention with how many people you will work on this and that not everything is possible. That’s really great.
I also switched to Figma 2 years ago just because of the autolayout features. It made it super simple to setup components. My wish would be to just match the level of autolayout currently present in Figma. Wrap to new line is something I would also appreciate. That’s relatively new in Figma.
What features and properties are non-negotiable, period?
My experience with auto layout comes mostly from Figma, haven’t tested the other apps that much. Though, I have to say Figma is doing a lot of things right. Generally I really like how it works.
So, by that for me a must are paddings, gaps and alignment. I guess that’s the basics that will come anyway, but that’s also something that would be non-negotiable for me.
What’s something you think that could live without? At least for a while?
The ability to set a background color, stroke and border radius directly to the auto layout frame is powerful, but I can see that this doesn’t work with the way Sketch handles groups.
So I guess that would be something I could live without for a while as long as there are good was to connect the content of an auto layout group and the background shape(s). Especially thinking of something like buttons with icons. They should be easy to create!
Also having the ability to place an item absolute is nice to have. But if we have the ability to layer things nicely on top, I could get around that by stacking it on top and placing it with the current edge pinning.
Is there something that one of these apps does well that you think we should too?
The ability to switch the layout position around with the arrow keys is an awesome timesaver.
Is there something that none of these apps do but you think we should?
Would be great to have some easy way to get something like Figma’s „auto“ gap mode in Sketch as well. Though, what I don’t like about their implementation is that this is an either-or property. It’s not possible to make the gap auto width, but also at least a certain amount of pixels. That’s quite relevant when building responsive layout. There’s always a moment where the „auto“ gap resolves to zero and other things happen (e.g. truncation or line-breaks). Having a gap that triggers exactly that earlier than 0 would be awesome.
Also quite annoying is that having one child in this case places the item at the center of the layout. That leads to switching between these two states quite often in practice.
Happy to say this is definitely part of our plans.
So this would work by first applying the spacing you specified, and then distribute any remaining space along the container’s main axis after applying that gap, yes?
I’m not sure I understood what you mean, could you please elaborate, or provide a visual example? Appreciate it!
Yes, that sounds about right. For example when having things distributed like following. Now when resizing the parent or if something inside the container grows it would be nice to have at least a specified gap. Without creating an additional wrapper I can’t achieve that the two grey boxes don’t touch each other:
The one thing I need first - bar none - is liquid layout (reflow). With numerical control over gaps.
A second iteration of the features would have padding, left-centre-right alignement.
We already have ways to distribute on a line, make repeating lists, regular grids, stacks. I could wait for these.
But doing a layout like the example above is just very hard now. You can do it manually but any change or exploration will ruin the layout and necessitate manual adjustments. It is trivial on the web, but a headache in Sketch.
If this means ‘smart layouts’ get completely decommissioned, I love it!
Things I want to see…
Opt-in / Opt-out. No ‘pausing’, but a setting level check box that allows you to enable or disable the feature. Smart layouts was a terrible, very distributive experience. Don’t force a power user feature on novice users.
Separate ‘edit’ vs ‘live’ experiences. No trying to ‘smartly’ move, adjust, or resize while editing. It’s unpredictable and chaotic.
Honestly, the most important thing (despite is being low-tech) is just fixing the distribute, tidy, and aligning features. I don’t care much about having an auto-layout until after the manual controls work.
I wonder how the Opt-in/Opt-out stuff would work and this is because, Smart Layout (since you mentioned it) does not become active unless you set it on an Artboard, a Group or a Component.
And even then, if you define Smart Layout you can choose to set the Layout option to None and this will disable the feature entirely (not paused, but completely deactivated).
I’d love to hear more about your experience so we can better communicate this or see if there is an area we can improve on in terms of showcasing how a feature works.
I want to add to what @raulrincon said and comment on a few points:
If this means ‘smart layouts’ get completely decommissioned, I love it!
No ‘pausing’, but a setting level check box that allows you to enable or disable the feature.
This is how it’ll work:
On groups and artboards, you’ll be able to add a layout mode. (Or in multi-selections, which will first wrap the selection in a new group).
If you add layout, you have two choices: this new layout mode, or Smart Layout.
We can’t and won’t remove Smart Layout entirely as it’s widely used in existing documents and libraries. We can’t simply convert them to this new layout mode either, since it imposes layout constraints that Smart Layout doesn’t, so it’s not a 1:1 replacement.
There won’t be an app nor a document setting to entirely disable the feature. Like Smart Layout, you can choose to use it, or not, the app doesn’t force it on anyone.
Separate ‘edit’ vs ‘live’ experiences. No trying to ‘smartly’ move, adjust, or resize while editing. It’s unpredictable and chaotic.
Not on our plans at the moment. This new auto/flex/stack layout feature is both more predictable and more forceful than Smart Layout. Not doing re-layout live is simply delaying the inevitable. But we’ll be looking at making it easy to disable and re-apply.
Hi everyone! I’ve been quiet here, and that’s because we’ve been heads-down working on this. We’re overdue for an update, so we’ve just posted a sneak peek at this feature (and a little teaser about more), check it out below:
I ZStacks are still important as you can layout a z hierarchy with alignment between them. Like you can stack things and have them all aligned top right, or bottom left or whatever.
