Smart Layout

Smart Layout is a tool that automatically keeps spacing and padding in place while you edit, resize and remove elements in your layout. With Smart Layout, you don’t need to manually adjust whole layouts every time you make a change. Smart Layout takes care of it all, saving you time and effort.

Why use Smart Layout?

When you apply Smart Layout to your designs they’ll automatically adapt to the changes you make while staying true to the rules that you apply to your layout. Smart Layout can dramatically speed up your design workflow, especially when you’re working with common UI elements with horizontal or vertical layouts, such as buttons, menus or input fields.

You can apply Smart Layout at the very start of your design workflow, or later when you’re tweaking more mature layouts.

How to apply Smart Layout properties

Smart Layout works with groups, Artboards and Symbols. You can apply and edit Smart Layout properties via the Inspector, using keyboard shortcuts, or using the Menu Bar:

Via the Inspector

Select the groups or Artboards you want to apply Smart Layout to, then head to the Layout panel in the Inspector where you’ll find different Smart Layout properties. Elements with Smart Layout applied to them will show a new purple icon in the Layer List, indicating their layout direction. Similarly, groups with Smart Layout will show a grey icon.

Via shortcuts

Select the elements you want to apply Smart Layout to, then press ⌘L followed by ←,H,→,↑,V, or ↓ to set your layout direction. Press L to remove Smart Layout, or any other key to cancel the operation.

If you apply Smart Layout shortcuts on a multi-selection containing at least one layer, they’ll get grouped automatically.

Via the Menu Bar

Select the elements you want to apply Smart Layout to and head to Menu > Layer and select a layout property — or select Choose Smart Layout followed by the shortcuts (these will appear at the bottom of your screen).

Pausing Smart Layout

From time to time you may want to want to work on elements without Smart Layout affecting their layout — such as when making an image shorter while keeping the text in the same position, for example. In such cases, you can easily pause Smart Layout by pressing ⌥⌘L. When you clear your selection, Smart Layout will automatically resume.

Smart Layout settings

Smart Layout resizes your layouts vertically or horizontally, and will also follow a direction of your choosing:

Vertical Smart Layout will resize content from:

• Top to Bottom
• Bottom to Top
• Middle

Horizontal Smart Layout will resize content from:

• Left to Right
• Right to Left
• Center

Combining different layout directions

You can apply Smart Layout with both a horizontal layout and a vertical layout. To do this, 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.

Where to apply Smart Layout

Smart Layout works with:

Groups and Artboards: Use the Inspector, shortcuts, or Menu Bar to apply Smart Layout.

Smart Layout will trigger with groups when you:

• Resize, delete, cut ⌘X, scale or paste ⌘V layers in a group
• Add a layer(s) or Symbol from your document by dragging it over a group with Smart Layout. Hold ⌃ to ignore the group that has Smart Layout applied to it.
• Duplicate ⌘D a layer (if the layer is part of an evenly-spaced group, the same spacing will apply to the new duplicate too)
• Adjust spacing between a nested group’s (evenly spaced) layers using Smart Distribute handles in the parent group where Smart Layout is active
• Edit the content or font properties of any text layers within the group
• Swap Symbols within a group, or resize them to fit

Symbols: When you create a new Symbol, you can immediately apply Smart Layout via the Create Symbol sheet. And if you create a new Symbol from a group or Artboard that already uses Smart Layout, it will follow the same layout direction.

To apply Smart Layout to an existing Symbol, head to its Source by selecting any instance of that Symbol and pressing ⌘↵ — after which you can apply Smart Layout properties in the Layout panel in the Inspector.

Using resizing constraints with Smart Layout

You can also apply Resizing Constraints to a selection that uses Smart Layout. This gives you extra control over how your selection will behave, such as by ensuring it never grows or shrinks.

Keep in mind that when you apply Smart Layout to text layers, their alignment should be either auto height (for vertical layouts) or auto width (for horizontal layouts).

Smart Distribute and Smart Layout

Aside from resizing elements, another way to trigger Smart Layout is to adjust the spacing between them using Smart Distribute. Evenly spaced layers need to be contained in their own group, nested inside the Smart Layout group.

Smart Layout in Symbols

Smart Layout can dramatically speed up your design workflow because it helps make your Symbols more reusable while keeping their appearance consistent.

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.

If you detach a Symbol with Smart Layout, Sketch will apply those same properties to the resulting group.

Keep in mind that 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 in the Overrides panel in the Inspector will fix this (or go to Layer > Symbol > Size Instance to Fit Content).