Experimental feature: Smart Layout in groups

Newsroom Sketch Labs
44

Hi, I just created account on this forum to reply to this comment.

For context: I am 100% new to Sketch, but I have prior experience with no-code web development and Figma.

Yesterday I finished the Sketch 101 course and I plan to finish Sketch 102 course today.
(Great courses btw, these helped me a lot to understand how Sketch works!)

Back to the topic: the only functionality I am currently missing in Sketch is the element that would behave as the Container.

@Giancarlo nicely compared the main differences between Groups with the Smart Layout enabled and the Frames Auto Layout. I would love to see elements behave the same way in Sketch “out of the box” and without the need of changing background colour or padding by adding additional Rectangle element.

Today, I have also tried to play around (first time ever) with Penpot because I was curious to check if they have any solution for the “auto layout problem”. I was surprised to see that their “Board” element has Layout function where I can adjust the following settings: Direction, Align, Justify, Gap, Padding (and change background colour without adding separate Rectangle element). It just works without thinking about how to use it.

Just before posting this comment I have also took a look at Framer. And in Framer I am also able to adjust Layout setting in similar way as in Penpot and it also just works fine. Obviously Framer is a slightly different tool, but I have seen some people consider Framer as a Figma/Webflow combo alternative.

If people who are switching from using similar applications are your target group, I would highly recommend adding Layout functionality to the Group element. I think it would really make switching to Sketch less painful/more pleasant experience.

For people like me, who would like to use Sketch (instead of Figma or any other tool for that matter) mainly for web designing and who have some experience with no-code page builders as well as know how the flex or grid work, it would make much much easier to switch and use Sketch exclusively if there was the Group/Container element that would just work “out of the box” the same way as I experienced it with the “Board” element in Penpot or “Frame” in Framer.

Just my two cents, as this is my fresh first impression and the only area to “complain” I can think of in regards of using (or learning how to use) Sketch in the last couple of days.

2 Likes
45

Welcome @flowxd_io, and thanks for taking the time to make such a considered explanation. I fully agree with you, we want to make our container types more flexible and easier to use, without the need for rectangles.

4 Likes
46

I really like the smart layout functions so far!

One thing I would really like is, that if items inside a smart group are switched to invisible, they should also not take any space inside the group and trigger a layout shift. (see example screen recording)

This kind of function is possible when the smart group is inside a symbol and the item you want to hide is a symbol as well, but it would be really nice to have this for any shape, text or symbol that is part of a smart group.

1 Like
47

Really interested in this feature and thought I’d try it with a FAQ-style component to see if I could toggle between an open and closed view while keeping that spacing. Am I grouping these incorrectly or is this not a functionality of this new feature?

48

Hi folks, the beta for version 98 of the Mac app has been in beta for a while, and with it, we’ve included many changes and improvements to this feature. I’ve edited the original post with those changes, which I’m quoting here for your convenience:

We’ve since continued to improve the feature, expect more changes in v99.

11 Likes
49


Hello! Now and then I try to keep up with Sketch Smart Layout Improvements, and I wanted to show a possible bug, or maybe a still missing feature.
When I duplicate, delete, or resize a nested layer, in a Smart layout group, the parent group resizes accordingly, honoring spacing between layers, and background layer size. But when I resize the layer using ⌘⇧⇣ keyboard shortcut It does not.

Version 98 (176399)

50

+1
A very important feature we’re expecting too!

51

I’ve activated the Experimental feature Smart Layout in groups and for the moment the results I’m obtaining are great!!! I’ve been using the Anima plugin but testing this new feature it seems to me that we don’t need it anymore!!
Great work Sketch Team :+1:t3: :clap:t3:
Looking forward for more news like these!!!

3 Likes
52

Hi @Giancarlo :wave: Indeed, that shortcut is not triggering Smart Layout. We’ll look into it and thanks for sharing this

1 Like
53

Hello there! I’m curious to hear others experience and feelings about one of the group smart layout behaviors.

When you have a group with smart layout added, and you move a layer over that group, the layer will automatically get dropped into the smart layout group and pick up the smart layout properties.

If you do the same with a group that does not have smart layout applied, the layer does not get dropped inside the group.

The fact that the behavior is different between the two really confuses me, and I often accidentally drop a layer into a smart layout group when I don’t mean to. I know that I can press ctrl to cancel this, but I don’t ever think to do it.

I would much rather press ctrl in order to drop the layer in the smart layout group. That way Sketch knows I intentionally want to do it. Then the same behavior can be used to drop a layer into a non-smart layout group.

For others who have been using the feature, what are your thoughts so far?

EDIT: I also know it USED to be the other way around, then there was an intentional change by Sketch. So I’m just curious how people feel about it now that it’s been this way for a bit. If most people like it how it is now I’ll just shut up and get used to it.

1 Like
54

I’m not sure whether this should be part of Smart Layout in groups or just Smart Layout generally but it would be great to be able to hide a label from a symbol instance and have that auto-resize the symbol. Right now the only way to do this is to convert that label into a symbol of its own and then hide that symbol from the parent symbol, but converting a label into a symbol only to be able to hide it always feels a bit silly.

55

I recall @paulozoom mentioning in the past that they are working on the ability to show and hide layers in a symbol instance. So rather than only being able to show/hide nested symbols, you’ll be able to do the same with non-symbol layers. So once that gets implemented this won’t be an issue anymore.

2 Likes
56

That would be quite a huge improvement, we really look forward to it!

57

Hi, I would love to see the feature of hiding/showing not symbol layers to work with the smart layout.

I don’t know if it was mentioned before, but it really annoys me that we can’t swap nested symbols that have different size than the original and not to squeeze/stretch it.

1 Like
58

Hi @srkkrs, thanks for sharing this. As Jason pointed out, in the previous post, we’re looking into how to show and hide nested layers in a Smart Layout Group.

About the symbol swap, I created this new topic so it can have its own replies and keep this one centered in Smart Layout in Groups :raised_hands:

2 Likes
59

Would love smart layout to be triggered by hiding a layer inside a group. Would also love smart layout to be organised by the lay order and move around with the layers being moved. Is there any plans to add these features?

60

Hey @kurtingwersen Welcome to the forum and thanks for sharing.

I can see the need for SL to trigger when hiding layers inside a group. Currently, deleting changes the behaviour of SL in groups, hiding doesn’t. However, changing this for hiding would disrupt other behaviours in Sketch as well.

Is there any plans to add these features?

Most likely not in the near future.

61

[Sketch beta 99]

The Smart Layout capability is not evident when selecting objects, typing command-L, and selecting a direction.

Any way to automatically give it an initial ‘Tidy’ to activate the Smart Layout features?

Even better could be to select objects, type command-L, type 20, hit down arrow to start a Smart Layout group where the contents are vertically stacked top to bottom with 20pt spacing. Instead of partial hotkeys and partial interface twiddling, it could all be done efficiently via hotkeys.

63

Hi @joe thanks so much for trying the latest Beta build and sharing your feedback!

Just to confirm, you refer to visual, UI feedback when setting Smart Layout to a group, right?

About Tidying a group, there’s a shortcut that can speed up things: ⌃⇧⌘A (also available as a menu item in Arrange → Tidy) When you use the shortcut, Tidy will use the space between the first and second layers to space all layers in that group. You can customize the shortcut from the default as well.

Thanks for the insight of making this even faster by focusing on the Tidy value input field after setting Smart Layout, so you can type the desired value.

64

@joe I tried to reproduce this but the vertical stack is properly set to vertical top to bottom layout. Please take a look at the video below where you can see which keys are pressed and the final result: a Tidy group with vertical top to bottom layout.

You should only get a horizontally centered layout if you press the “H” key after using the ⌘L shortcut. Let me know if I missed anything