Behind the feature: How we took Smart Layout beyond Symbols (Part 1)

We’ve just released a major update to Smart Layout, taking it far beyond its roots in Symbols. This latest update builds upon an earlier one that made Smart Layout more reliable and predictable, along with related enhancements to Smart Distribute.

This was a long time in the making and, in this three-part series, the project team will take a deep dive into these updates, from the challenges they faced, to the work that led us to today.

We introduced Smart Layout to Sketch in late 2019, building upon Symbols and Libraries, with the aim of making Symbols more flexible:

With Smart Layout, you can say goodbye to manually resizing Symbols to fit their overrides, or building multiple Symbols within the same design, just to accommodate different sizes of the same component. Now, Sketch can handle all of that.

Simply set your Layout properties for your Symbol source and it’ll resize automatically whenever you edit an override in one of its instances. Better still, Smart Layout maintains the padding and spacing between layers in your Symbol as it grows in the direction you’ve set.

The premise was simple, but the goal was ambitious. Right after launch, we saw plenty of customers adopting Smart Layout and make it a fundamental part of their work. Over time, we managed to ship a few improvements while we focused our attention on other heavily requested features.

Recently, we decided to come back to Smart Layout and take it a big step forward. We knew it wouldn’t be a trivial effort (and it wasn’t!), but it was important and necessary.

In order to understand the difficulties we came up against, we must take a step backwards and understand the basics. What is Smart Layout, after all? And how does it actually work? Let’s break it down.

What Smart Layout is — and isn’t

Let’s start by understanding what Smart Layout actually is. It’s based on three key principles:

1. Minimal setup. It asks the designer for one thing only: how is this design laid out? There’s a choice of two orientations — horizontal or vertical — each with three choices of where to anchor the layout — left/center/right or top/middle/bottom, respectively. These choices set the layout’s axis and direction properties.
2. Freeform arrangement. Designers aren’t limited to a specific type of layout. Layers can be placed and spaced in any way designers want: laid out in a stack, side-by side, fully or partly overlapping, or a mix of some or all of these at once, with any amount spacing between them.
3. One single system. It takes care of two key tasks of managed layout systems at once. First, layers must adapt to layers contained within: such as a button, which in its simplest form is a text layer surrounded by a rectangle. Second, layers must adapt to adjacent layers: take two text blocks laid out vertically, where the bottom one must move down as the top one grows.

To better understand this, it might be helpful to compare Smart Layout to layout systems that are strictly stack-oriented. With these, layers typically must be arranged in single row or column (often with strictly even spacing without exceptions) and must be complemented by other systems for layer containment, since overlaps aren’t possible (style-able containers with explicit padding).

We designed Smart Layout so it accommodates but isn’t limited to stack-based layouts.

How Smart Layout actually works

The job of Smart Layout, as with any other managed system, is to respond to changes to a given layer by manipulating other layers in a way that respects the user’s prior choices and intention.

To do that, Smart Layout considers three inputs:

1. The layout chosen by the designer. What are its axis and direction?
2. The change that was made. Did the layer(s) grow or shrink, or disappear?
3. The current state of the design. Which other layers are in or adjacent to the changed region, and what’s their spatial relationship to the changed layer(s)?

While the first two inputs are very simple, the latter can be extremely complex.

The freeform arrangement and low explicit setup characteristics that make Smart Layout unique also make it uniquely challenging to develop. We have to evaluate the spatial relationship between the changed layer(s) and other layer in their immediate context to infer the designer’s implicit intent from their design. (Trivia fact: Inferred Layout is the original development name of Smart Layout).

When doing this evaluation, we have to consider:

• Six possible spatial relationships between each unchanged layer and the changed layer(s) along the layout axis: it may be before its leading edge, overlapping its leading edge, surrounding it, surrounded by it, overlapping its trailing edge, or after its trailing edge.
• Seven possible combinations of the three resizing constraints — fixed size, pinned leading edge, and pinned trailing edge — applied to each unchanged layer along the layout axis.

Together, these represent 42 possible combinations for a given layer change for each unchanged layer in the hierarchy level of the changed layer. Plus, Smart Layout works recursively — changes to nested layers lead to changes up the hierarchy, as groups adapt to their size of their contents.

While this evaluation can be quite complex, any change in any scenario results in just one of only three consequences for an unchanged layer: move it, grow or shrink it, or do nothing.

Additionally, if the change that was made was that a layer disappeared, we also need to consider what to do to the space adjacent to that layer. We’ll go into this in more detail in our next post.

Finally, we must consider the direction along the layout axis. Smart Layout is in fact direction agnostic, always working left-to-right for horizontal layouts and top-to-bottom for vertical ones. If one of each axis’s other two directions is used, it simply compensates for that by offsetting each element which has Smart Layout applied to it, by half or the full amount of the total change. However, for changes to layers overlapping along the layout axis and some layout directions, we carefully adjust the position of individual layers, too.

The challenges we faced with Smart Layout

As we looked to improve Smart Layout, we were faced with three main challenges.

1. Smart Layout’s outcomes could be unexpected and inconsistent. Simple cases were fine, but its ability to work with any layer arrangement means there’s an infinite number of possible scenarios, and thus more chances it may fail to infer the most expected outcome. Ultimately, it fell below our standards, and it needed to become much smarter and more reliable.
2. Smart Layout was not available to groups outside of Symbols. This was by far one of our most requested features, and it was leading people to create Symbols simply to take advantage of Smart Layout — which comes with its own set of tradeoffs.
3. The popularity of stack layout systems created an expectation mismatch. It’s only natural, given the popularity of these systems, for people to expect that a key managed layout feature called “Smart Layout” would be our implementation of a stack layout system. Even if it’s not, we needed to better accommodate that expectation when it’s used in a stack arrangement.

On top of this, we had some aggravating factors.

• Smart Layout’s ability to work with any layer arrangement also mean that changes to its logic may be risky, since it’s hard to predict with complete confidence what the full extent of the consequences of a change could be, when looking at any given scenario in isolation.
• Since it’d been launched a few years prior and become popular, Smart Layout was ever-present in documents, and particularly in Libraries which are distributed to many documents across the workspace, and sometimes outside of it. This large usage base meant that any regressive changes we made could have vast implications and be highly disruptive for many.

The challenge was a tall one, so it was time to assemble a team and form a plan.

The road ahead

While Smart Layout seems simple on the surface, we’ve now seen how there’s a fair amount of complexity behind the scenes. With this in mind, we knew we needed one consistent team throughout this effort, who could all develop familiarity and expertise with the system. We assembled two full-time engineers, plus one QA, one PM, and one designer supporting it alongside their other ongoing projects.

Our ultimate goal was to bring Smart Layout to groups and give special consideration to its use in stack-based layouts, but we couldn’t get there overnight. We put a plan in motion that allowed us to build towards that goal piece by piece, while bringing some necessary enhancements along the way:

• First, we’d make Smart Layout more reliable, but still limited to Symbols. It was simply not acceptable to bring Smart Layout to groups before we improved its core logic. We knew that doing so would only expose its deficiencies in more scenarios, which would rightly frustrate users. Plus, a wider install base would only make it harder for us to improve it in the future.
• In parallel, we’d also improve our stacking features. These features — Tidy and Smart Distribute — have existed for some time, and we knew they’d play a role once Smart Layout arrived in Groups, since they naturally help to make and manipulate evenly-spaced stacks.
• After this, we’d bring Smart Layout to groups. This would be enough of an effort on its own, since groups don’t have the limitations that Symbols do, allowing designers to freely resize or delete any of its layers, or inserting new ones altogether.

We had our work cut out for us, and we knew it’d be a long journey, but an important one.

In the next post in the series we’ll describe how we made Smart Layout more reliable, and in the third post we’ll conclude the journey by looking at what it took to finally bring it to groups.

To keep up with series, keep an eye on the blog or follow us on X or Mastodon for updates.