New in Sketch: Smart Layout beyond Symbols

Hey everyone :wave:

We’ve just released a new Mac update with something we hope you’ll love. You can open the Mac app and update right now, or read on to learn a little more…

Taking Smart Layout beyond Symbols

This headline of this release is a much-requested feature: Smart Layout outside of Symbols. If you’ve been trying out the Smart Layout in Groups Experimental feature (and if you did — thank you!), you’ll already be familiar with this. There’s a lot to cover, so I’ll let @joseph walk you through it instead:

Improvements, inspired by you

The following items are all based on common requests you’ve sent to our CS team, who have been working hand-in-hand with a dedicated group of engineers to resolve them:

  • Some folks wanted to set a shortcut for Size Instance to Fit Content, so we’ve added that Inspector control as a menu item. Now you can create a shortcut for it via your macOS Keyboard settings.
  • Another common request was to add a way to enable/disable all overrides for a Symbol source from the Inspector, so we’ve added that too. A real time-saver, this one!
  • If you’ve ever found yourself staring a beach ball because you tried to copy and paste a large Artboard between pages or Artboards, this update should put a stop to that and speed up that process significantly.
  • Using Enter and Shift-Enter should now consistently create a new line when you’re editing text on the Canvas, in the Inspector or in comments. Command-Enter will submit your text change. Also, text fields should now resize more consistently as you edit.
  • If you hide your Collaborator’s names and cursors in a document you’re all working in, you probably don’t want to see their selections either, right? So we’ve hidden those as well now.
  • When you swap Symbol instances for the first time, the Swap at Original Size option is now unchecked.

As always, you can find all the release notes — including a full list of bug fixes — at sketch.com/releases/mac/.

We’re already hard at work on the next release and will have a beta to share here with you all soon. In the meantime, you can always suggest an idea or share an issue. We read everything you post and hopefully this release shows that!

Enjoy!

9 Likes

Smart layouts have become quite difficult to use as of late. The fact that it’s alway “live” or “unpaused” has complicated working in Sketch greatly.

The most general illustration of this is if you want to constrain your resizing with a modifier. By modifiers I mean…

  1. Holding Shift constrains it 4 ways, effectively keeping all the proportions equal.
  2. holding Option constrains it 2 ways, effectively scaling it from the center on an X/Y-axis.

This works as expected with…

  • All individual layers
  • Layers inside groups (not using smart layout)
  • All Groups (regardless of smart layout)
  • But not layers inside groups that use a smart layout?

Well, there’s really two scenarios to consider…

  1. On-Axis
    a. Using a horizontal smart layout and adjusting the width
    b. Using a vertical smart layout and adjusting the height

  2. Across-Axis
    a. Using a horizontal smart layout and adjusting the height
    b. Using a vertical smart layout and adjusting the width

With the On-Axis scenario it is actually working, but the effect of the smart layout counter acts your intended action. Regardless it still feels like a bug. If a user has selected a child layer in a group, they have communicated that they wish to alter that one layer, how it relates to the group it is inside of is irrelevant for the moment. Smart layout should auto-pause when you select a child layer.

With the Across-Axis scenario there should never be a conflict in the first place. The group has instructions to keep the Interspacing on the X-axis consistent. It does not involve the Y-axis at all (or vise versa). So I’d say this is actually a bug, not just something that feels like one. Auto-pausing smart layout would mean you don’t have to fix this bug

This problem then compounds when you’re working with grids (or any layers that aren’t clearly horizontal or vertically aligned). Here’s a video demonstrating these scenarios…

Beyond this basic example there’s a some other scenarios that result in unexpected results…


  1. Overlapping layers in a smart layout group can cause unexpected results when deleting. The group auto contracts in size and hides layers behind one another. It’s very confusing when it happens. Here’s an example of it when removing a hover state.


  1. Stacking layers across-axis from direction of the smart layout is impossible. You need to drag a layer outside the group even if you ultimately want it grouped together. This results in either messier files or a lot of extra work to reorganize your layers. Here’s an example of it when trying to add an extra detail to a list item.


  1. Staggered smart layouts are impossible to use. There seems to be some problem with how the ultimate size of the symbol is calculated or perhaps the ability to have layers hang outside the bounds of the symbol. Here’s an example of it with a pill that has a notification dot.

  1. Smart layout in groups & artboards behave differently. On artboards it actually does auto-pause (even though there is no auto-pause next to the menu item). While this is the behavior I want, this feature should act the same no matter the object you apply it to.


So in summary I think auto-pausing smart layout when you’re working with child layers is the best default default for all users. That said, it wouldn’t hurt to…

  1. Have a button or checkbox in the properties panel showing if smart layout is paused or not (like “adjust content on resize” for artboards)
  2. Have an app wide setting enabling or disabling this feature at large.

I apologize for this extremely long post. I just want to be thorough so that you fully understand to nuances of this problem and can see how frequently this is encountered across many different types of tasks. It took me a while to collect and write out all these use cases, but I’ve spent a lot of time trying to circumvent this bug so if it can be fixed it’s worth it. Thanks!

Hello Stephen,

First of all, thanks for all the detailed feedback. We truly appreciate you taking the time to express your. thoughts about our latest update to Smart Layout provide context and videos to illustrate these bits of feedback.

Sorry it took some time to reply, we wanted to properly read, watch the videos and analyse all of the feedback and comments before replying.

I’ll be reviewing your post, bit by bit, so we can clearly express the intent on some of these product decisions. We’ll be generating a report from all of these comments to share with the team, so they have the full context of your comments and make decisions based on them!


Autopause Smart Layout

This wasn’t the case before, we just didn’t have Smart Layout in Groups and Artboards. The team made the decision to enable Smart Layout in these specific settings just because user feedback showed that it would be a well-received enhancement for our customers.

Some of the things users shared with us is that they’d like Smart Layout to behave in a Live setting, which is why adding it to Artboards and Groups made much more sense.

  • You can set up Smart Layout in your Symbol source, but this setting will only act when using Instances of the Symbol. You can consider this the old behaviour of Smart Layout.
  • With Groups and Artboards, Smart Layout is always listening and looking for changes in the elements contained in these.
    • You can always use the Pause Smart Layout shortcut, to momentarily pause it, make your adjustments (without Smart Layout working) and then, as soon as you press ⎋ Escape or deselect the element itself, it will become active again.

From the first video:

1:30 ~ 3:00

In this part of the video, the app is working correctly. When you select a direction in the Smart Layout section of the Inspector, you’re basically telling Sketch to: "pin my content to the left, and only grow to the right (or any other direction you choose).

That’s why it looks like it’s only growing from one side, but the app is just pinning the content and following the rule you manually set for it: Only expand this element to the left/right.

The Pause Smart Layout shortcut was introduced for situations like yours, when you want to have the best of both worlds:

  • Keep Smart Layout working on the overall element
  • But allow you to make a change or adjustment to a specific element within the Group or Artboard without other elements reacting to it.

4:40 ~ 5:25

Yep! This is one of the edge cases the team was discussing when working on Smart Layout, we’ll file a ticket with the team to report it! As you mentioned, it feels somewhat unexpected that the app pins the element to the bottom (or top) when you haven’t made any adjustments to that.


6:00 ~ 7:45

The app is reacting, correctly. With Smart Layout, you want every element to react to changes (sizing, spacing, etc). Since you are modifying the top-left rectangle, the one at the bottom is reacting to this new extra space it has, and it’s growing, just to follow the Smart Layout Direction set.

You’d have to Pause Smart Layout to modify the element itself, and not have other elements react to it.

In this specific case, What would you expect to happen? Should the app keep the spacing you have set between elements while you change the dimensions of this single rectangle?


Overlapping layers

This is definitely unexpected, and from what we see on the Layer List, the app should only be deleting the cursor and not removing any extra space (since the other photo should take priority). The best way to go around is to:

  • Pause Smart Layout
  • Delete the Cursor (or any other Layer you might want to delete)
  • Deselect to reactivate Smart Layout.

Would it be safe to assume that it should only hide the Cursor, and nothing else, while keeping the spacing of the other picture? Would you add anything else to this statement?

We want to make sure we capture all of the specifics of this one, so when we create a ticket for the team, they know exactly what is the expected behaviour here!


Stacking Layers

From what we notice, this is just Smart Layout in Groups working as it should. To make this happen as you want (without SL acting):

  • Select the Group
  • Pause
  • Duplicate and then deselect to keep on working.

The great thing about Smart Layout (pretty much everywhere) is that it will suit your needs, and you can create the simplest or most advanced components. However, to create something truly more complex, you might have to use more Groups and elements to make it look and work the way you want it to.

Similar to the above, we feel like adding “Auto Pause Layout option” would solve most of these comments you’re making to us. Would that be a good assumption?


Staggered

From the video we saw that the initial issue was kind of fixed by Grouping elements, and this is generally a good idea. This will give you more control over the way things work and behave.

We want to get our hands on these two Components so we can check them out ourselves and, if need be, share those with the team so they can inspect why it might not be working as expected from the get-go.

Would you mind sharing that Doc with us? :pray:


Artboards & Groups

This is another case of Pausing Smart Layout :white_check_mark:

By pausing, you make sure you can make any edits you want to the Component, Group or Artboard you’re working with.

In this specific instance:

  • You have a Symbol that has Smart Layout applied to it.
    • Remember that Smart Layout on Symbols, only applies to Instances of it, not the source itself!
    • This is half-true, as when you work with Groups within Symbols, this does enable Smart Layout to work in real-time.
  • When you Group these elements, you’re telling the Group to react to the parent setting (the Center Horizontal resize).
  • As soon as you Ungroup, you see how the default behaviour of SL in Symbols is brought back, and you can edit anything as if you were in Pause mode.

Just to reiterate:

  • SL in Groups and Artboards work the same. You modify content, and the Group/Artboard should react to the changes, instantly.
  • If you’re working with a Symbol, only Groups within the Symbol (and with Smart Layout) applied to it will react instantly. The Instances of the Symbol will react to the parent setting (the one you set at the top of the Symbol).

Wow! This was a long one to write, and I hope I clarified some of the doubts and issues you had. We’d love to hear more from you, especially in those cases where we want more context to share with our team and have them check out this feedback!

Even though we cannot promise anything, the team is always super appreciative of the feedback we get, and you went above and beyond to share some nicely written explanations and videos to accompany those tidbits of feedback.

Let us know if this helps!

5 Likes