Experimental feature: Smart Layout in groups

Apologies, it appears that some 3rd party plugins are interfering with the horizontal alignment when tidying Smart Layout groups and/or regular groups. I removed all installed plugins and did not experience this. Troubleshooting for specifics now.

Oh no worries @joe , quite the contrary, thanks for sharing this update about the plugins. Cheers!

Turns out it wasn’t plugins after all (reproduced in safe mode). It has to do with the Tidy functionality. If one element hangs out further than the rest, it will position the largest element to the left, then center everything else against it. It was unexpected.

Hi everyone, yesterday we released the beta for version 99 of the Mac app, where Smart Layout in groups is no longer an experimental feature, but rather, released to everyone.

This version includes many improvements, which I’ve added to the original post, and am quoting below. We’ll be making some more improvements during the beta, so please continue to let us know of any issues you find.

3 Likes

Hey @joe thanks for sharing the video!

This is the expected behavior. To keep the X position after Tidying, all layers need to overlap or at least, that their edges touch. If there’s one or more layers that fall outside these conditions, Tidying will change the X position depending on the positions the layers have. In this case, all layers were aligned to the left

I wish the smart layout in symbols worked the same as groups. When I create a symbol with a smart layout it works in the instances but not in the symbol itself and it’s absurdly frustrating. If the symbol is turned back into an artboard it works correctly (resizing it if I add or remove something) but as soon as it becomes a component it doesn’t work anymore.

Hey Camila,

That’s actually by design, we wanted to make it so SL kicks in automatically on the Instances of the Symbol, rather than the Symbol itself.

However, we see a case where this could be really useful for some setups. Do you have any examples of this we could share with the team to make the case for it? :bulb:

I have created a symbol which lists some information so the user can have a quick reference of filled values, it’s a symbol because it repeats the same information throughout different screens.

But as I create the screens the information in this symbol increased or changed. And whenever I changed it I had to resize the symbol manually every time.

This also caused the size of the symbol that is repeated in the screens to change without triggering the SL of the group the symbol is in. So I had to readjust all the groups where the instances of the symbol were as well.

Why not have it in the symbol if we can activate / turn off the SL as we work?

1 Like

Hi Sketch team :yellow_heart:

I work in parallel with Sketch and Figma on different projects. I’ve been using Figma’s auto layout and Sketch’s Smart Layout heavily and want to share my feedback.

In short: Why don’t you just copy Figma’s auto layout?

A bit less short: Figma’s way is much more intuitive and predictable to me. Even after using it a lot, I’d have trouble explaining someone how smart layouts really work. In Figma’s auto layout, I define the layout’s specifics (padding and spacing) and then just drop in the children. This dropping-in is very fast and effortless. In Sketch’s smart layout on the other hand, I have to position each child precisely and if I missplace a child by one pixel, the layout just doesn’t work. This is cumbersome and I have to “debug” my smart layouts again and again.

I love Sketch and really want it to shine. So, please just copy Figma’s auto layout.

3 Likes

@Landschaft Hi there, and welcome! Appreciate the honest feedback. Of course, this is a comparison that we see often, but at their core the two systems are actually fundamentally different, each with its own trade-offs. This will require a not short explanation :sweat_smile:

Auto Layout focuses on evenly-spaced single-file stacks. It’s then complemented by other features (Frames, and their padding and styles) when you need to place things in front of things (e.g. buttons, cards). It prioritizes systematization over flexibility. By the way, I’m not casting judgements as bad or good, just breaking it down.

Smart Layout is an all-in-one system that doesn’t impose any particular arrangement. It can be used for all kinds of layouts — buttons, cards, even- or unevenly-spaced stacks, parallel columns/rows, overlapping elements, etc. — without extra features or primitives other than the layout direction. It prioritizes flexibility over systematization.

We like these aspects of Smart Layout. You have to make a single choice, the layout direction, at the top level, and it attempts to accommodate whatever design you want. You can move and space and place things exactly as you want it.

But as I noted, there’s trade-offs, like the ones you mentioned. We’ve been addressing some of these (but not all) during the feature’s development. Beyond increased predictability, you’ll find it much easier today to interact with evenly spaced stacks (the kind that Auto Layout focuses on): you can select an item and easily reorder it, quickly adjust the stack’s spacing, and inserting and duplicating layers in the stack respects that spacing. I’ve included a video at the end of this post so you can put pictures to words.

Auto Layout has its own trade-offs, which need their workarounds as well. That’s natural.

But, of course, a system like Auto Layout that focuses on one systematized arrangement will naturally do a better job at that one arrangement over a system like Smart Layout that’s more multi-purpose, even if it makes special accommodations for such arrangement, particularly when the two systems prioritize flexibility and systematization differently.

While we want to keep improving it to allow people to enforce stricter rigidity, we can’t and won’t be turning Smart Layout into Auto Layout. They’re fundamentally different systems. That said, we have had informal discussions about working on a separate dedicated single-file layout system. There’s no concrete plan, and this isn’t a guarantee. We want to release this update to Smart Layout, see how it performs and what everyone’s feedback is, and re-evaluate where that puts us, before deciding what we want to do in this space next.

Here’s the promised video showing some improvements working with stacks:

Again, thanks for taking the time to join the forum and give us feedback!

7 Likes

@paulozoom Hi there! Thanks for a really thorough updates here about the Smart Layout feature. It’s really interesting to read about all the considerations that are going into its development. I like the idea of a system that is less rigid than Figma’s auto layout and really like how you approach these problems.

On the other hand, I think most people that ask for auto layout here in the forum REALLY want Sketch to succeed. I would want to dump Figma completely but I can’t because clients and other designers expect it. That’s where auto layout comes as a topic. My opinion is that auto layout is the only big feature of Figma that designers miss in Sketch and that makes it hard to switch for them. Any other feature, even if some are currently more advanced in Figma, are not a deal breaker as is auto layout - even with all its flaws.

That’s why I think many designers would like you to do a similar thing to Figma’s auto layout, maybe as a separate thing to Smart Layout, as you mentioned (that’s actually a great idea, one system for flexibility, the other for systematization).

It feels like Sketch is missing an opportunity to get many users back from Figma. It is becoming more and more obvious that many designers are feeling stuck with Figma more than they really love the product, and especially the company and its values.

I support companies like Sketch that do things their own way and are really intentional and mindful and not just pursuing crazy growth using questionable practices. At my company we use Sketch for internal things, but for client projects we almost always have to use Figma. I would like that to change.

Hope you don’t mind this kind of feedback. I guess you probably hear it a lot, but it comes from a desire for Sketch to thrive. <3

9 Likes

@wwwedran I don’t mind the feedback at all, on the contrary. I truly appreciate you and everyone else in here taking their time to give us feedback. :man_bowing:

3 Likes

This. Removing the obstacles should be at the top of everything in your strategy.

2 Likes

It’s not about being like Figma but rather about being productive. In UI/UX realm of app development (web, mobile, desktop) auto-layout and mimicking Flexbox/Grid functionality is just much more practical. Smart layout is probably better for Illustration and that’s fine. If you decide doing Illustration in Figma, you’re up for a big pain, for example. It feels like it’s not possible to build a perfect layout system for everyone. If Sketch want to be more productive tool for UI/UX - there’s no alternative for handling layout same way Figma, Penpot and developers handling it. Any alternative at this point would be just confusing.

7 Likes

But PenPot and Figma doesn’t work the same way.

I’ve been waiting for this fearture for years. It is because Sketch lacked this feature that I made the jump to Figma. I still prefer Figma’s implementation though.

• I like the concept of nestable Frames (which can later use a smart layout) much more than artboards. Apply smart layouts to Frames, not Groups. Groups should be treated like a folder. It shouldn’t change anything about the child.
• I want to be able to give my smart layout a background instead of having to add a rectangle behind my content just to give it a background color.
• Changing a smart layouts direction, should change the positioning/layout of the smart layouts children.
• Copying and pasting in a smart layout should position the newly pasted item where the next item should go in the smart layout based on it’s configuration.
• Pressing the left or right arrow in a horizontal smart layout or up in down in a vertical smart layout should change the ordering of the layout instead of shifting pixels.

Do this and I will gladly come back to Sketch! I love Sketch because it is natively built for macOS, but I need my tools to work for me in the most natural and seamless way possible.

4 Likes

Hi folks! We’ve just released v99 of the Mac app, which brings Smart Layout in groups and artboards out of Labs, making it available to everyone.

In the name of the whole Sketch team, I’d like to thank you all for your continued and caring feedback throughout the feature’s development. It’s been truly invaluable to help us fix issues and prioritize the enhancements we’ve made.

Many of you will be deeply familiar with Smart Layout by now, but in any case I’d like to let you know that we published a blog post about it, and updated the documentation, if you want to check them out.

This type of feature is best demonstrated visually, so @Joseph has put together this video that covers everything about Smart Layout that launched today:

I’ll now close this topic, but I encourage you to continue opening new topics in the forum to share issues you find, as well as suggesting ideas to further improve it.

6 Likes

Quick note: we’re working on a new stack layout feature, separate from Smart Layout. We’re really thankful for your interest and feedback on Smart Layout in Groups, and we’d love to know your wishes and expectations for this new feature as well.

:point_right: Here’s the topic for it: Call for feedback: “Auto Layout”

Hope to see you there!

5 Likes