Skip Navigation

Why are my Smart Layout Symbols not working as they should?

Last updated on 25 Aug 2022
3 min read

Smart Layout lets you create Symbols that resize to fit their content. Such Symbols are immensely valuable when you create buttons, navigation elements, or more complex components such as cards. Learn more about Smart layout in our documentation.

My Symbol isn’t resizing when I change its content

When you create a Symbol with Smart Layout properties Sketch will determine the size of the Symbol by the content within it. If your Smart Layout Symbol is not behaving as expected, it might be because you have manually resized it. Manually resizing a Symbol with Smart Layout properties will temporarily disable its smart auto-resizing behavior.

Manually resizing Smart Layout enabled Symbols may lead to unexpected results. One way to determine if the Symbol was manually resized is to select your Symbol’s instance (click on it in the Layer list or on the Canvas) and check in the Inspector on the right to see if the Size Instance to fit content icon is visible: Shrink Instance

A screenshot showing where the size to fit icon can be found.

To re-enable Smart Layout for this Symbol instance, click the icon. Sketch will remove the manual resizing and calculate the size of the Symbol Instance based on its contents and Smart Layout properties.

We are continually improving the Mac app and Smart Layout for Symbols are an area to watch in future Releases. Currently you need to decide if you want your Symbol to be a regular Symbol that you can manually resize or a Smart Layout Symbol that resizes by itself based on its content. Learn more about Smart layout in our documentation.

The content of my Symbol resizes in an unexpected way

Sketch will always try to make smart choices for Artboards and Symbols when you resize them or when Smart Layout resizes them to fit their content, but sometimes Sketch needs your guidance. Resizing Constraints let Sketch know how a layer in your Symbol should resize by letting you define the x- and y-axis as rigid instead of flexible.

A screenshot highlighting the Resizing Contraints.

Text layers have additional layout properties, they can have:

  • auto-width or
  • auto-height or
  • manual size.

This impacts their Resizing Constraints, a layer with auto-height will always have its y-axis set to rigid, as it will not resize when the Symbol or Artboard it is placed on is resized.

A screenshot highlighting the Resizing Constraints for Text.

Please Note: A layer pinned to opposing edges cannot use Resizing Constraints to set an axis to rigid. Sketch cannot preserve its distance from the edge and keep it the same size simultaneously. To learn more about Resizing Constraints, visit our documentation.

The content of my Symbol moves to the wrong place when resizing

When you resize an Artboard or Symbol, Sketch will resize and move its contents. If you place an element 5% off the left edge, Sketch will keep it 5% from the edge when resizing the Artboard or Symbol. To tell Sketch that the distance to one or more edges is absolute and not relative to the Artboard size, use Pinning.

When Pinning is enabled, Sketch will preserve the distance your layer has to the edge of its group or Artboard, it will even resize the layer to preserve this distance if you Pin it to opposing edges (right & left, or top & bottom).

A screenshot highlighting the Pinning Controls.

Please Note: A layer that is pinned to opposing edges, cannot use Resizing Constraints to set an axis to rigid. Sketch cannot preserve its distance from the edge and keep it the same size at the same time. To learn more about Resizing Constraints, visit our documentation.

If you run into a problem you can’t solve, please get in touch. To help us help you, it is always a good idea to include a link to your document or send us a copy of your file.