Sketch Smart Layout: Building Responsive Symbols That Survive Real Overrides

Your design system has a button. Marketing pastes in a label twice as long as the original, and the symbol either clips the text or the designer detaches the instance to fix it manually — breaking the link to your library forever. Smart Layout exists to solve exactly this, but it only behaves predictably if you understand how it actually calculates sizes and where it quietly gives up.

The short version: Smart Layout is a directional flow engine applied to Symbol masters. When an override changes content size inside an instance, the master recalculates sibling positions and parent dimensions while keeping the instance linked. Think of it as a one-axis flexbox living inside your Sketch file.

How the layout engine actually recalculates

You set Smart Layout on a Symbol master, choosing horizontal or vertical flow plus a fixed spacing value. From that point, the master owns the geometry of its children along that axis. When an instance's text override wraps to two lines, the text layer grows, siblings shift, and the symbol's own bounds expand — all without detaching.

Text overrides respect the master's text style: line-height and paragraph spacing come from the style, not the override. So a multi-line override grows the instance along the layout axis while preserving the padding you defined in the master. This is the behavior that makes Smart Layout viable for real components like buttons, list rows, and form fields.

Groups inside a Smart Layout master keep their own resizing constraints — pin to edges, fix width or height, float in place. Mixing fixed and flexible children is how you approximate CSS's min-width / flex-grow combinations. A common pattern: an icon group pinned left with fixed size, a text layer that grows, and a chevron pinned right.

Nesting: where Smart Layout earns its keep

The genuinely useful property is upward propagation. Put a horizontal Smart Layout button inside a vertical Smart Layout card, and a two-line button label expands the card's height — provided both masters have "Resize to fit" enabled. This lets you compose components the way front-end developers compose flex containers.

Sketch 90 and later added per-instance spacing overrides: you can adjust inter-item padding in the Inspector without detaching. That's a deliberate governance decision — library maintainers keep control of the component while consumers get one-off breathing room. If you're maintaining a shared library, this removes the most common legitimate reason people detached instances.

A worked example you can verify in five minutes

1. Create a Symbol master with three text layers in a row. Enable Smart Layout: horizontal, left-to-right, spacing 8. Add padding via a background rectangle pinned to all edges.
2. Create an instance. Override the middle text layer with a string long enough to wrap.
3. Expected result: the instance grows wider (or the text wraps and the instance grows taller, depending on your text alignment), siblings reflow, and the background padding stays constant. The instance remains linked — check the Inspector; no "Detached" state.
4. Now nest that symbol inside a new vertical Smart Layout card master with "Resize to fit" on. Override the nested text again. The card's height should increase while its bottom padding stays fixed.

If step 4 fails, the usual culprit is a missing "Resize to fit" on one of the masters, or a child layer with a fixed-height constraint fighting the flow.

For debugging, open View → Show Developer and enable layout debugging to visualize constraint boundaries and recalculation regions in real time. This is the fastest way to see which layer's constraints are blocking reflow.

The limitations nobody mentions in the release notes

Smart Layout has sharp edges worth knowing before you commit a design system to it:

• No baseline alignment. Vertical centering across siblings uses geometric bounds, not font metrics. A horizontal row mixing 13px and 17px labels will look subtly misaligned. Workaround: fix line-heights so the geometric boxes match.
• Hidden layers don't reflow (before Sketch 95). Toggling a layer's visibility via override leaves its space reserved in older versions. If your components rely on show/hide states, verify behavior on your exact version or restructure into separate variants.
• Export is a snapshot. SVG or PNG export captures the instance at its current size. Handoff tools cannot reconstruct the responsive logic — document the intended behavior separately for engineers.
• Direction changes break consumers silently. Changing a published library master's flow from horizontal to vertical invalidates the assumptions of every existing instance's overrides. Treat direction as a breaking API change: version the library and announce it.
• Deep nesting costs performance. Hierarchies five or more levels deep with many text overrides can cause visible UI lag in large documents. Sketch caches layout trees and invalidates only affected branches, but there's a ceiling. If a page feels sluggish, flatten the nesting before blaming the file size.

What to do Monday morning

Audit your library for components that get detached most often — those are your Smart Layout candidates. Convert one (a button or list row is ideal), run the five-minute verification above, and check the behavior on the oldest Sketch version your team runs, since reflow behavior for hidden layers and spacing overrides changed across the 70–100+ range. Then write down the two rules your team must not break: never change a published master's layout direction, and never mix hidden-layer overrides with layout-critical spacing. That pair of constraints is most of what separates a Smart Layout system that holds up from one that collapses into detached instances within a quarter.