Smart Layout

Smart Layout maintains the padding and spacing between layers in a Symbol when an override changes its size. Once you’ve set up Smart Layout, changing an override in a Symbol instance will resize it automatically.

How to use Smart Layout with Symbols

You can apply and edit Smart Layout properties for an existing Symbol in the Inspector, or add them when you create a new one.

When you create a new Symbol, you can apply Smart Layout properties using the drop-down menu in the Create New Symbol sheet. You can choose from the following layout properties:

• Vertical:
  • Top to Bottom
  • Bottom to Top
  • From Middle
• Horizontal:
  • Left to Right
  • Right to Left
  • From Center

When a Symbol uses Smart Layout, it gains a new icon in the Layer List showing its layout direction.

To use Smart Layout with an existing Symbol, head to its Source (selecting any instance of that Symbol and press ⌘Enter) and apply/edit Smart Layout properties under the Layout panel in the Inspector.

If you change existing Smart Layout properties for a Symbol Source, instances of that Symbol may look wrong. In most cases, using the Size instance to fit content button that appears in the Overrides panel in the Inspector will fix this.

You can also apply Resizing Constraints to layers within a Symbol that uses Smart Layout. This is handy if you want a specific layer to ignore the layout settings you’ve given the Symbol.

If you apply Smart Layout to a Symbol with text layers, their alignment should be either auto height (for vertical layouts) or auto width (for horizontal layouts). Smart Layout compares the dimensions of the Text Layer in the Symbol Source to the one in the instance to work out how the other layers in the Symbol should resize, so fixed size text layers will not work as they always stay the same.

How to nest Smart Layout properties within a Symbol

For more complex UI components, you might want to include a horizontal layout and a vertical layout within the same Symbol. For this, you can apply Smart Layout properties to groups within a Symbol Source to have different sets of layers resize in different directions.

To do this, edit the Symbol’s Source, select the layers that you want to resize in a different direction, and group them. Now you can apply a separate set of Smart Layout properties to that group under the Layout panel in the Inspector. Like Symbols themselves, you’ll see a new group icon in the Layer List showing you their layout direction.

If you have a Symbol where one of its layers dictates that Symbol’s minimum height (like the image in this card example below), applying an override to a shorter text layer next to it would cause the Symbol to resize with unnecessary padding. If that’s the case, you’ll need to group the text layer(s) and the layer that dictates the Symbol’s minimum height together in the Symbol Source. Once that’s done, you’ll be able override the text layer and Smart Layout will know not to increase the overall Symbol height until the text passes its minimum height.

How to use Smart Layout with hidden Symbols

Smart Layout doesn’t just work when overrides change the size of a Symbol instance, it also works when you hide a Symbol. For this to work, you’ll need a set of nested Symbols that follow the direction of the Symbol Source’s layout (a row of buttons in a menu with a horizontal layout, for example). Hiding one of those Symbols will cause the others to move up and fill the empty spot — this even works for Symbols of different heights and widths.

How to set minimum Smart Layout dimensions

When you choose Smart Layout properties for a Symbol, you’ll see a field for minimum height (for vertical layouts) or minimum width (for horizontal layouts) under the Layout panel in the Inspector.

Adding dimensions to these fields will stop your Symbol shrinking below a minimum size, regardless of its override content. If you leave these fields blank, your Symbol will shrink to any size to fit its content.

Note: Minimum Smart Layout dimensions are only available in Sketch 62 and above and do not currently apply to groups within Symbols.

Smart Layout in groups (experimental)

Before you can use Smart Layout in groups, you first need to enable this experimental feature in Sketch. In the Mac app, head to Sketch > Experimental Features and enable Smart Layout in Groups item (1) under the list of experimental features to activate it.

When you select a group, you’ll now see the same Smart Layout options as you would for Symbols under the Layout panel in the Inspector. From here, you can apply Smart Layout properties or edit existing ones. Smart Layout works when you’re deleting or resizing layers, adjusting spacing with Smart Distribute, editing text layers’ content or font properties; or swapping or resizing Symbols to fit.

Smart Layout will resize a group when you:

• Resize or delete any layers within the group
• Adjust spacing between the group’s layers using the Smart Distribute handles (if the group’s layers are already evenly spaced)
• Edit the content or font properties of any text layers within the group
• Swap Symbols within the group or resize them to fit
• Duplicate (⌘D) a layer (if the layer is part of an evenly-spaced group, the same spacing will apply to the new duplicate, too)
• Add a layer by dragging it into the group while holding Control (⌃)

If you detach a Symbol with Smart Layout, we’ll apply those same properties to the resulting group. Likewise, if you convert a group with Smart Layout properties, we’ll carry them over as well.

This feature is still in development and, right now, Smart Layout will not resize a group when you:

• Adjust spacing with Smart Distribute on multi-selections of layers
• Use the sliders on the following text properties; Size, Character, Line, and Paragraph
• Cause a Symbol within the group with its own Smart Layout properties to resize