Yes, you read that right — we’re working on Smart Layout in groups. It’s not done yet, but we wanted to give you a chance to try it earlier and listen to your feedback, as we said we’d do, so we’ve launched it as an Experimental feature.
Smart Layout will now also trigger when new layers are added to a group with Smart Layout. Specifically, when:
Duplicating a layer with Duplicate (⌘D).
When duplicating, if the layer is part an evenly-spaced group, that spacing will apply to the newly duplicated layer as well.
Adding a layer to the group, by dragging it from outside the group into the group and holding Control (⌃) to drop it in.
Also included in this version:
Fixed: When creating a Symbol from a group, or detaching a Symbol into a group, the Smart Layout properties will carry over.
Fixed: When changing a Text layer’s Auto Width / Auto Height / Fixed Size property and this changes its size, it will now trigger Smart Layout
Improved: We now make it consistently clear which Layers have Smart Layout via an icon in the Layer List.
New: And finally, a few people asked, “Why couldn’t Smart Layout apply to whole Artboards?” — and luckily for you, we were already working on it. You can apply Smart Layout for Artboards just like any Symbol or group.
Known issues
Smart Layout in groups fails to trigger when a size of an instance of a symbol changes as a result of Smart Layout triggering for that instance.
Smart Layout in groups fails to trigger when adjusting spacing with Smart Distribute on multi-selections of its layers.
Smart Layout in groups fails to trigger when using the sliders on properties Size, Character, Line, and Paragraph for one of its text layers.
How to give feedback
Simply reply to this topic. If you can, attach a screen recording — that helps us the most.
WHAT KIND OF SORCERY IS THIS??!!! I love this feature so far!
One thing I like is how the container is also aware of other groups’ smart layouts, it follows all the content.
Also, the mental model of how the smart layout is integrated with the group, it’s like an on-off button, it felt effortless, with no need to differentiate “smart layout” from “group”.
In Figma, I feel like I have 2 kinds of components, “group” and “frame with auto layout”, for every component I want to make, I need to decide which one is which. Frequently doesn’t use “group” anymore, just uses “frame” for everything.
Sketch makes it so simple, it is a group, and I can apply the smart layout or not, no need to add another jargon or change the component to a symbol. This is an appreciation reply, thank you @paulozoom and teams, I will continue to play it further! Love to see how this feature will improve our workflow!
I still keep a copy of Sketch 51.3 around so that I can run Paddy 2 beta for auto layouts. I actually use this plugin with v51.3 on more projects than the current versions of Sketch just for this purpose! One nice feature it had was the ability to link the group name to the live spacing attributes. For example, you could rename it with [30h] in the group name to automatically apply 30pt horizontal padding between the group’s contents. Or change the padding within the UI and the group name is automatically updated.
As this Smart Layout feature progresses I will gladly get with the times and stop using the old solution. Pixel pushing without it is cumbersome for large projects.
Thanks for your work on this! Looking forward to these updates after many years!
@joe To be honest with you, I don’t see us adding the ability to affect group or layer properties purely by virtue of changing the name of said group/layer. That said, making layer names more useful in terms of understanding what they represent is something we’ve discussed, but we’ve got nothing concrete there yet.
@paulozoom It has been useful in the past when used in conjunction with find+replace layer name plugins. I could take all component xyz [25v] and change them to [20v] for example, on contents of 50-100 artboards at once. I’ve used it like a crude CSS document instead of inline styles per object, updating all ‘component xyzs’ in one go. Of course symbols play into the layouts, but having the flexibility to locate or update objects based on their attributes was powerful. Making the layer name more representative of its contents at a glance was also helpful.
Hi Sketch team, other findings here. From my experiment, the group with a smart layout that contained symbols, either external or document symbols is still not working, please see the screen records below.
I hope this is something you guys are actively working on. I think being able to group symbols and use a smart layout is very important for our workflow.
@eurlichallan Thanks for reporting! We’re aware of this one. We’ll surely fix this one before making the feature “official”, but most likely not for the release of v96, where the Smart Layout in Groups feature is still an Experimental feature, so some bugs are expected
Love this feature! There is an issue changing the font size of an item within the group by dragging the mouse as it completely breaks the layout. All other methods are fine, but this just collapses in on itself.
ah I think I missed that when reading the thread, but that does sound like the issue. It says I’m too new of a user to attach a video, so I’ve sent it to productsupport@sketch.com
Exciting to see this feature in action at last. I’ve waited a long time for this.
Is it intentional that resizing layers other than text within a group doesn’t trigger smart layout? Additionally, resizing with the cmd + alt + arrow keys keyboard shortcut doesn’t trigger the smart layout at all.
I maybe missing something but shall I assume groups need to keep their original width? rezing vertical works fine but i cant do vertical and horizontal to create responsive groups?
When making the group wider the elements don’t remember the distance between them
You can apply Smart Layout for Artboards just like any Symbol or group.