Sketch Smart Layout: When to Use It, What It Can't Do, and How to Validate Handoff

The Decision: Use Smart Layout on Symbol Masters for Reusable Responsive Components

Sketch's Smart Layout (introduced in Sketch 70, refined through Sketch 90+) is the built-in responsive resizing engine for Symbols. It mimics flexbox behavior — direction, spacing, padding, and alignment — so a button, card, or form field adapts when its text or icon changes. The rule: apply Smart Layout only to Symbol masters, never to loose Groups. Groups lose layout rules on ungroup/regroup cycles, and overrides in instances won't propagate reliably.

Constraints You Must Accept

• Symbol master needs a fixed or min/max width/height defined.
• Text layers inside must use Fixed Width + Auto Height with explicit alignment (left, center, right). Auto Width breaks horizontal Smart Layout.
• Nested Smart Layout instances propagate constraints upward; a horizontal button inside a vertical card works, but distribution options are limited.
• No native flex-wrap, align-content, order, or per-child alignment override. "Space Between" distribution requires invisible spacer layers.

Axis & Direction Options — Quick Reference

Axis	Direction Values	Typical Use Case
Horizontal	Left→Right, Right→Left, Center	Buttons, chip groups, inline icon+label rows
Vertical	Top→Bottom, Bottom→Top, Center	Cards, lists, form field stacks

Spacing is a single fixed pixel gap between items. Padding is independent top/right/bottom/left on the container. These map 1:1 to CSS gap and padding in handoff.

Trade-offs vs Figma Auto Layout and CSS Flexbox

What Sketch Lacks (Figma Has)

• Wrap / multi-row flow — Sketch cannot flow items to a new line; each row needs its own horizontal Smart Layout group nested inside a vertical parent.
• Absolute positioning inside auto-layout frames — Badges, tooltips, or floating actions must sit outside the Smart Layout container.
• Per-child alignment override — All children share the container's align-items value; you can't center one item while others stretch.

What Sketch Maps Cleanly to CSS Flexbox

Smart Layout Property	CSS Flexbox Equivalent
Axis + Direction	flex-direction + justify-content (start/center/end)
Spacing	gap
Padding	padding
Nested Smart Layout	Nested display: flex containers

What Does Not Map

• flex-wrap, align-content, order, flex-grow/shrink/basis
• Developers must interpret nested Smart Layout as nested flex containers and define spacing tokens in a shared library.

Concrete Implementation: Responsive Button Symbol

Build a button that resizes horizontally with label length, keeps icon centered, and maintains constant padding.

1. Create the master: Draw a rectangle (background), add a Text layer (label) and an Icon (20×20). Select all → Create Symbol (⌘⌥K). Name it Button/Primary.
2. Enable Smart Layout: With the Symbol master selected, open Inspector → Layout panel. Check Smart Layout. Set:
   • Axis: Horizontal
   • Direction: Center
   • Spacing: 8px
   • Padding: 12 / 24 / 12 / 24 (top/right/bottom/left)
3. Configure text layer: Select the Text layer inside the master. In Inspector, set Width: Fixed, Height: Auto, Alignment: Center. This prevents the text from pushing the icon off-center when it wraps.
4. Lock icon size: Select the Icon layer → Width/Height: 20px fixed.
5. Test overrides: Insert three instances (⌘⌥D). Override labels: "OK", "Save changes", "Submit application for review". Width adapts; height stays constant unless text wraps (then height grows). Icon remains centered, padding constant.

Validation Checklist

1. Instance stress test: Insert 5+ instances with varying label lengths. Verify width adapts, icon centered, padding unchanged.
2. Manual resize suspension: Drag an instance wider manually — Smart Layout suspends. Reset via Size to Fit (⌘⇧R). Confirm layout re-engages.
3. SVG export inspection: Export the Symbol via Export Assets → SVG. Open in browser DevTools. Inspect <g transform="translate(...)"> groups — they should mirror the horizontal layout order and spacing.
4. Plugin handoff check: Run Anima or Sketch2React on the Symbol. Diff generated CSS against design spec: expect display:flex; flex-direction:row; justify-content:center; gap:8px; padding:12px 24px;. Flag any missing gap or incorrect justify-content.
5. Version regression guard: If opening a file from Sketch <70, select the Symbol master and click Update Smart Layout in the Inspector. Behavior changed in Sketch 70 (2021); older masters won't respond to overrides until updated.

Limitations & Workarounds

• "Space Between" distribution: Insert an invisible rectangle layer between items, set its width to 0, height to container height, and let Smart Layout treat it as a flexible spacer. Not ideal for token-driven spacing.
• Multi-row grids: Build each row as a horizontal Smart Layout Symbol, then nest those row Symbols inside a vertical Smart Layout container. Manual row management required.
• Plugin export fidelity: Anima/Sketch2React approximate flexbox but don't guarantee pixel parity. Always review generated code; treat it as a starting point, not final output.

Practical Verification You Can Run Today

1. Open Sketch ≥ 90. Create the Button Symbol above. Enable Smart Layout. Test overrides.
2. Recreate the same button in Figma using Auto Layout. Note missing Wrap and Absolute Position in Sketch.
3. Export SVG from Sketch. Open in Chrome. Inspect transform matrices and group structure.
4. Run Anima "Export to React" on the Symbol. Diff CSS flex properties against your design spec.
5. Check Sketch release notes for Smart Layout changes post-2024.

If all five steps pass, the Symbol is safe for library publication and developer handoff.