Smart Layout feedback

[everydayslang (Stephen)]

Some old bugs still haven’t been fixed.

Using a Layouts effects how sub-layers is behave

1A. Here the group has no layout and sub-layers can be resize as expected

1B. Holding Option ⌥ and dragging the layer wider let’s you resize it horizontally while keeping it centered.

2A. Here the group has a vertical, top-down layout applied

2B. Holding Option ⌥ and dragging all the sudden doesn’t work.

Takeaway
Having a layout should never affect the way a sub-layer behaves (especially when it’s a vertical layout and you’re making a horizontal change to the sub-layer). The current remedy for this is to, first remove the layout from the group, second make your changes, then go back and add the layout again. Slow and annoying!

There is a way to Pause Smart Layout, but it’s buried in the Layer > Layout > Pause Smart Layout so no one will ever find it.

Smart Layout is so BAD I want it permanently paused. I have absolutely zero use for it. It only complicates the way I interact with layers. Even when it works it’s inherently unintuitive. This example is only one of the many bugs with it. Please revert Layouts back to the way they used to work, where they only affected instances of a symbol. Not the content of the master symbol.

Option ⌥ drag is a standard OS level behavior (it works on all app and finder windows). breaking this behavior is very annoying and clumsy.

[jonne]

We’re currently working on the Flex/Auto Layout feature, expected to be released early next year. I hope this can be a suitable alternative.

[raulrincon]

Hey Stephen,

Thanks for the feedback and comments on Smart Layout and the issues you’re having while working with it.

• Would you mind sharing a bit more context as to why you’re using it? Smart Layout works so content is always king, this means that the content within the SL (Group, Artboard or Symbol) will always define how the element itself changes in appearance and size.
• We have a keyboard shortcut (⌥⌘L — Option-Command-L) to pause Smart Layout which we think will increase your speed/ability to make changes on the fly without affecting other elements in the Layout.
• Smart Layout will kick-in automatically when used in: Groups and Artboards. On Symbols, Smart Layout should only kick-in when you change the Overrides in an Instance. Just to clarify that bit

As Jonne mentioned, we’re indeed in the process of working on a Flexbox-like feature, which should solve some of the expectancy issues some users had when using Smart Layout (thinking it worked the same as Flexbox) when it really is a very different approach.

[everydayslang (Stephen)]

That’s awesome to hear. Yeah, ultimately these things will get put into flexbox of some kind so it makes sense to unite how Sketch and CSS treats these things.

My primary reason for using layout is for controlling “how instances of symbols behave when overrides are used”. Having smart layouts affect “live” artboards and groups is inherently confusing and clashes with some rudimentary expectation of GUIs. (e.g. the concept of drag-and-drop is broken).

Here’s a detailed list of some issues that I encounter on the regular…

1. Iconography - You have iconography in the layer list to describe the layout being ‘on’ and which ‘direction’ it’s flowing. However, in doing so you fail to communicate the initial reason for those icons, to describe what type of component they are.
   • Artboards are shown as an easel icon
   • Symbols are shown as diamonds icon
   • Groups are shown as folders icon
   …but when any of these components use a smart layout they all look the same, just a box with an directional arrow. This is confusing because these components all behave different. Mostly, I struggle in confusing symbols for groups. I can select a sub-layer of a symbol and am frustrated when I can’t move it, until eventually I realize it’s a symbol and not a group.
   Solution: Given each a unique icon, just draw arrows inside the easel, diamond, and folder. 21 icons in total. Each should have 1 neutral + the 3 vertical directions + the 3 horizontal directions.

2. Accidentally dragging into a group - Dragging a layer near or on top of a group on the canvas will cause the layer to be nested into that group. If that group has a layout applied, then the layer’s position is affected by the group’s layout. Drag-and-drop is broken. Totally crazy and unexpected!
   • This turns groups with layouts into landmines.
   • Grouping can already be achieved in 5 different way 1. dragging layers in the Layer Palette 2. Selecting Arrange > Group in the menu bar 3. using the Group/Ungroup button in the Tool Bar 4. Hot keys (⌘G and shift+⌘G) 5. Selecting items and Control clicking on them to get the pop-up menu.
   Solution: Remove drag-and-drop into groups from the canvas, it’s unnecessary, confusing, and totally unpredictable when combined with Layouts

3. Duplicating an item in a group - When duplicating an additional item in a group the spatial placement (xy) on the canvas behaves as expected, but the layer order behaves in undesirable ways. There is also an opportunity to have it work even smarter…
   • Option-Dragging layers works spatially, but the layer order is broken. It duplicates the layer, but it has very complicate rule on how it deals with the enclosing artboard/group. With artboards it either crops it or moves it out entirely. with groups it moves it out, unless you hover over, then it moves it back in, but that doesn’t work if it’s the last item in a group (which is the most common use case). I kind of understand the artboard behavior but there’s no reason remove a layer from a group. If I am duplicating something I expect it to retain all the properties including where it sits in the layer oder.
   • ⌘C/⌘V works as expected on the canvas. The new item is smartly pasted at the end of the list in the direction the layout is flowing, with the right spacing too. However, in the layer list the item is always pasted above the previous layer… The reason graphics programs paste above is to ensure you can see the results of your action. Here, you’re smartly positioning and offsetting the new graphic which also ensures that it will be seen. I reorder my layer list order to be in either left → right or top → bottom (I use an Automate Plugin command as a hotkey to do so quickly), but since you are doing so much nice/smart things on the canvas, it’d be amazing if you could take that same consideration with the layer order and paste new below the item being duplicated. Or a non-smart option is to have a paste above and paste below (I would just use the paste below option).
   • Hidden & Locked layers seem to be omitted or skipped which is a little confusing but honestly I don’t have any good ideas for them.
   Solution: Copy/paste and option-dragging should work nearly identically. If copy/paste extends the size of a artboard/group with a layout, then so should option-dragging. Layers should not be removed from (or added to) groups with either of these actions. Only if a user explicitly attempts change the order (e.g. a user selects a different layer to paste above, or a user taps ‘Esc’ to select the next higher container in the hierarchy while still holding down the option key). Additionally, a ‘paste below’ command in the menu bar would be wonderful.

4. Adding items on top of artboards or groups using layout - The most common example would be an adding a tooltip or hover component of some kind. Again, drag-and-drop is broken and it’s chaotic!
   • ‘Pause Layout’ does fix this, but it’s buried in drop-downs, it’s actually easier to remove the layout, making the change, then adding the layout back. There’s no affordance for anyone to know ‘pause’ even exists.
   • An alternative and far better, far simpler solution than having smart layout active all the time is the Butter Plugin. Two options, buttt (0px) or space (custom) selected items left, right, up, down lets users quickly specify what they want to do. It’s right every time. It never takes effect when you don’t want it to. It’s easy to understand. This also does things that layout can’t do, like neatly organize artboards.
   Solution: 1. Unbury ‘Pause Layout’ by putting a visible switch somewhere in the properties panel or toolbar to show if layout is active or paused. 2. Don’t keep turning it back on automatically, let the user decide when to turn I back on. 3. Add but and space to the menu bar under Arrange > Align, Distribute [Buttt], [Space]. Please, please, please make these commands native or at least fix whatever broken that plugin.

5. Subgroup inherit layout from parent artboards/groups - A subgroup with no layout has a normal folder icon, but if that subgroup is enclosed in an artboard or group that has a layout, then those effects are imposed on the subgroups content. In this case the icon misleads the user.
   Solution: I would expect a subgroup without a layout to protect its content from the effects of a parent’s layout settings. The concept of grouping is to make many things behave as one, this undermines this concept

6. Resizing a layer in an artboard/group holding down Option - Holding option should resize things from the center, vertically or horizontally. This works in sketch, except when using layouts.
   • I get that layouts work to preserve the padding between objects, but when this modifier is used it’s because the user want’s disregard the layout direction.
   • This bug exists even if the layout direction and the direction your resizing don’t conflict. (e.g. top-to-bottom layout + resizing the width)
   Solution: at minimum holding option to resize should auto-pause layout… but really live layout should be done away with completely.

I hope that helps explain the bugs in an organized way. Smart layouts are crucial when using instances of symbols with overrides, but are unbelievably clumsy and buggy to work with ‘live’. Working with layouts ‘live’ is inherently complex, incredibly confusing, and completely unnecessary. It breaks basic GUI concepts. Stop trying to be ‘smart’ and just give users quick control to align, distribute, buttt, space, and tidy (the Tidy button has been completely broken for the last few versions).

Bare minimum, let users turn off the feature and keep it off

[raulrincon]

Hey there Stephen,

Thanks for the reply and for the thoughtful feedback. We’ve shared these answers with the team and wanted to jump in to clarify the iconography side of things.

We do indeed have different ways to showcase how SL is represented on all of these scenarios:

From the image you can see how we represente, on the layer list, the different mediums where SL can be used. The Top level element (with the cell style and the chevron) represents the Artboard. The Purple icon, represents a Symbol (or an element with a Style applied to it). Lastly, the Group (within an Artboard) and the icon represents a Group (heh) of elements with SL applied to it.

We do know there are some areas of improvement here, but wanted to make the distinction clear so you’re aware that we do have different ways to show what each element is (along with some Canvas hints) when using SL.

As for the other points we hear you and we’ll forward these comments to the team so they can check it out and see if there’s any room for improvement.

Btw, we just wanted to note that if you do not want to use Smart Layout on any of these elements (Artboards, Symbols and Groups) you absolutely do not have to. Just grab the element where you’d like to remove Smart Layout and press ⌘L + L, and the Layout will be set to None.

[everydayslang (Stephen)]

It’s true that there are differences between the items as you pointed out…
• Artboards are ‘gray’ and ‘top-level’
• Symbols are ‘purple’ and ‘any-level’
• Groups are ‘grey’ and ‘not top-level’

But really there are three attributes that you’re either changing or keeping the same…
• Icon
• Color
• Nest-level

The thing I struggle with is which of these attributes is most significant. For whatever reason, I think of them in order of icon as most significant, color as the second most significant, and nest-level the least significant.

---

So to look at the example you sent…

Initial read
My instinct is to say I see three of the same things (3 boxes with arrows), one looks special (it’s purple), and one is nested inside a second type of component (must be a child) …Obviously that’s not right, but that my Icon > Color > Nest-Level way of reading.

Hard to connect ‘like’ things
Without the names written out it would be very hard for someone to make the association that “Artboard with SL” is similar to “Artboard”. They look different because the icon is different. They do share the same coloring and nest-level, but those are weaker signals. They’re not unique. The “Symbol with SL” shares the same nest-level. The “Group with SL” shares the same grey color.

Easy to connect ‘unlike’ things
If color is being used to connect similar things, then why are both Artboards and the Group all the same color grey? Am I supposed to connect those two? Nope.

---

Here’s your same example but with ‘SL icon’ + ‘existing icons’ combined…

It’s so much easier to read. You can connect ‘like’ things and separate ‘unlike’ things. It’s clear what each object is, if it has SL, and which direction it’s going, and obviously what the parent child relationship is.

---

The rules are…

1. Icons always denote the object type (Artboard, Symbol, Group)
2. Arrows always denote the flow direction if any (up, down, left, right, centered)
3. Colors denote if it’s linked (linked locally, or linked from library)

Here’s what all the icons would look like…

Of course there’s more like templates and things, but you get the point…

---

So in short…

1. Kill the generic Smart Layout icon (it doesn’t tell you what type of object it is)
2. Kill the Linked from Library icon (it doesn’t tell what direction the SL is flowing)
3. Also, maybe make all Artboards blue in libraries? That’d be a nice reminder of what type of file you’re in.

[Ash]

These icon ideas are great

[wwwedran (Vedran Židanik)]

Agree that it makes sense to separate icons not just with color but also with shape, if nothing else then becasuse of accessibility.