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.
You must use v96 or later of the Mac app. Note that some features listed below may only available in the latest Beta
Going to Sketch > Experimental Features… and enable Smart Layout in Groups.
You’ll now see Layout panel in the Inspector if a group is selected.
What works so far
Introduced in v96
Smart Layout will trigger when changes are made to existing layers in a group with Smart Layout. Specifically, when:
Deleting layers
Resizing layers
Adjusting spacing with Smart Distribute
Editing text layers’ content or font properties
Swapping or resizing symbols to fit
Added in v97
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.
Added in v98
New: Sometimes, you want to make some changes in a group with Smart Layout without immediately affecting other layers. Now, you can pause Smart Layout temporarily via Layer > Layout > Pause Smart Layout (⌥⌘L). When you clear your selection, Smart Layout will automatically resume.
New: When duplicating a layer in a group with Smart Layout with Option-drag, it’s now possible to insert the duplicated layer into the group, just like inserting from the outside.
Changed: We’ve reversed the behavior for dragging layers into a group with Smart Layout. Now, layers will be inserted by default when you drag them over a group with Smart Layout, but you can use the Control key to ignore this.
Improved: Adjusting spacing with Smart Distribute handles of a group will now respect the layout direction.
Improved: The Layer > Layout menu is now available for Groups and Artboards via the menu bar.
Fixed: Changes to symbol instances will now trigger Smart Layout.
Fixed: When converting a Symbol source to an Artboard, the Smart Layout properties will carry over.
Fixed: Using the Scale tool will now trigger Smart Layout.
Fixed: Adjusting text properties by dragging on their Inspector labels will now trigger Smart Layout.
Fixed: Deleting the first layer in a group will now trigger Smart Layout.
Fixed: Resizing a layer with locked proportions on the opposite axis to the layout direction will now trigger Smart Layout.
Fixed: Editing text will now always trigger Smart Layout.
Fixed: Resizing layers nested in a mixed-layout environment — for example, a layer in a Horizontal group nested inside a Vertical group — will now correctly trigger Smart Layout.
Added in v99
Improved: We’ve greatly improved Smart Layout behavior when deleting layers, so you’ll get more expected results.
New: We’ve added keyboard shortcuts to control Smart Layout. Select a group or Artboard and press ⌘L. Then, press ← H → or ↑ V ↓ to set layout direction, L to remove layout, or any other key to cancel the operation. Also, you can do this on a selection of multiple non-group layers, or a mix of layers and groups, and your selection will be automatically wrapped in a group for you.
New: Swapping images will now trigger Smart Layout. You can now also choose a sizing option for the swapped image.
New: When you enter a new value for a layer’s size or position in a group with Smart Layout, Foresight will now also include any sibling layers (which may be affected by the new value).
Improved: Copy and paste now works like duplicate by taking into account layout direction when pasting. When pasting into an evenly-spaced group, the spacing is taken into account as well.
Fixed: Fixes Inspector controls in the Layout panel when selecting multiple groups with Smart Layout.
Fixed: Resizing a layer in a group with Smart Layout using ⌘ or ⇧⌘ and the arrow keys will now trigger Smart Layout.
Fixed: When creating a Symbol from an Artboard with Smart Layout, the current layout option will be pre-filled in the Create Symbol dialog.
Fixed: Fixes an issue where, if Smart Layout was temporarily paused, using ⌥-Drag to duplicate a layer inside a group with Smart Layout would place the duplicate at the top of the layer hierarchy, instead of at the same level of the original.
Known issues
Smart Layout in groups fails to trigger when adjusting spacing with Smart Distribute on multi-selections of its 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.