Skip Navigation

Smart Layout

A basic button Symbol with Smart Layout properties, resizing horizontally from the middle when the button label text changes.

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 VerticalTop to bottom Alignment (Smart Layout )
    • Bottom to Top Vertical Bottom to Top Alignment (Smart Layout )
    • From Middle Vertical Middle Alignment (Smart Layout )
  • Horizontal:
    • Left to Right Horizontal Left to Right  (Smart Layout )
    • Right to Left Horizontal Right to Left  (Smart Layout )
    • From Center Horizontal Middle Alignment (Smart Layout)

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

Smart Layout icons in the Layer List

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.

Depending on whether you choose a horizontal or vertical layout, the properties row below will show different options.

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 Shrink Instance button that appears in the Overrides panel in the Inspector will fix this.

Example of using the Size instance to fit content button in the Inspector to adjust a Symbol instance.

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 Auto Height (for vertical layouts) or auto width 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.

Once you apply Smart Layout properties to a Symbol, you should avoid manually resizing any instances. Doing this can cause your Symbol to look or behave unexpectedly. To manually resize a Symbol instance with Smart Layout properties, you’ll either need to detach it or remove those Smart Layout properties from the Symbol Source.

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.

This card Symbol has a vertical layout and resizes from the top down. But the two buttons at the bottom are also grouped, have a horizontal layout and resize from right to left.

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 Group 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.

This card Symbol has a minimum height that’s dictated by the image layer. By grouping the text layers and image layer together, you can make sure that any text overrides don’t cause the Symbol to resize with unnecessary padding.

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.

This button’s label is quite short and its Smart Layout settings mean it has resized to be quite small, but setting a minimum width of 90, we can make sure it stays a reasonable size.

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)

Smart Layout in groups is an experimental feature that we’re continuing to develop. You can find out about the latest updates — and report any issues you come across — in the Smart Layout in groups forum topic.

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.

An image of Sketch’s Settings with the new Labs tab.

You’ll find experimental features under the Labs tab in Sketch’s Settings.

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.

When you enable the Smart Layout in groups experimental feature, you’ll also be able to apply Smart Layout to Artboards too — just as you would with Symbols.

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
Last updated on 06 Jun 2023

Create your Workspace for free!

Whether you’re new to Sketch or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.