Smart Layout & Resizing

Smart Layout is a property applied to a Symbol master that tells Sketch how to resize the Symbol when content changes via overrides. It supports four directions: Left-to-Right, Right-to-Left, Top-to-Bottom, and Bottom-to-Top. Set a Button Symbol to Left-to-Right Smart Layout and change the text override from 'OK' to 'Save All Changes' — the button widens proportionally while maintaining the padding between the text and button edges. The Symbol acts like a flex container where content determines the frame size.

Each layer inside a Symbol has its own resizing rule in the Inspector: Fixed Width, Fixed Height, or Flexible. For a Button with icon + label + background: set the background to Flexible so it stretches, the label to Flexible so it expands with content, and the icon to Fixed so it stays at its original size. This replicates CSS flexbox behaviour precisely.

1Button Symbol (Smart Layout: Left-to-Right)
2  icon    Fixed 20pt x 20pt   [flex-shrink: 0]
3  label   Flexible Width       [flex: 1]
4  bg-rect Flexible Width       [flex container]
5  padding preserved from layer positions
6
7CSS equivalent:
8.btn { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
9.btn-icon { flex-shrink: 0; width: 20px; }
10.btn-label { flex: 1; }

Legacy Sketch used pin-and-resize constraints — pin to left/right/top/bottom edge with fixed or percentage width — similar to Xcode Auto Layout. Smart Layout supersedes this for Symbols but legacy constraints still apply to non-Symbol layers on artboards. Mixing systems in one Symbol causes unpredictable resize behaviour. If you inherit an older file, check which system is active: remove old pin rules and enable Smart Layout on the master to migrate cleanly.

After enabling Smart Layout, test every anticipated override combination. Create a test artboard with 5 instances using progressively longer text: 'OK', 'Save', 'Save Changes', 'Save All Changes', 'Save and Continue to Payment'. Verify padding remains consistent, icons stay aligned, and no layers overlap. If the Symbol breaks at any length, tighten the resizing rules before handoff. Developers will encounter these content lengths in production — surface failures now when they cost nothing to fix.

Smart Layout also works vertically. A Dropdown Menu Symbol with Top-to-Bottom Smart Layout grows downward as more list item Symbols are added. This maps directly to CSS flex-direction: column with height: auto. Document the minimum and maximum heights in spec notes so developers know to apply max-height and overflow: auto constraints.

1/* CSS equivalent of Top-to-Bottom Smart Layout dropdown */
2.dropdown {
3  display: flex;
4  flex-direction: column;
5  min-height: 44px;   /* single item */
6  max-height: 320px;  /* from spec notes */
7  overflow-y: auto;
8}
9.dropdown-item { flex-shrink: 0; height: 44px; }