Auto Layout's `border-box`: strokesIncludedInLayout

WHY IT EXISTS To provide explicit control over how an element's border (stroke) affects its size in a layout system. Without this, adding a 1px stroke to a 100px element could make it 102px wide, breaking precise alignments and causing frustrating, hard-to-debug layout shifts.

THE MENTAL MODEL Think of this property as a switch for an Auto Layout frame's box model, mirroring CSS. strokesIncludedInLayout: true is box-sizing: border-box, where the width and height you define are the final dimensions, including the border. strokesIncludedInLayout: false is box-sizing: content-box, where the border is painted outside the defined width and height, increasing the element's total occupied space.

HOW IT WORKS This is a boolean property on an Auto Layout frame. When true, the space for the stroke is taken from the inside of the frame's dimensions, effectively reducing the available space for child content but keeping the outer boundary fixed. When false (the default), the frame's dimensions define the content area, and the stroke is added externally. For a frame with a 2px stroke on all sides, setting this to false will make its total occupied width 4px wider than its width property.

WHEN TO USE IT Enable this for any component intended to be robust and reusable, especially buttons, form inputs, cards, or any element that might change its border state (e.g., on hover or focus). It creates predictable, self-contained components that don't cause layout shifts for their neighbors when their own visual style is updated. This is the key to stable component-based design systems.

WHEN NOT TO USE IT The main reason to leave it false is for backward compatibility with older designs or for specific decorative effects where you intentionally want a stroke to expand outwards without affecting the inner content area. For most modern UI development, true is the safer and more predictable choice.

ONE CANONICAL EXAMPLE A modal has a "Close" button and a "Confirm" button side-by-side with 8px spacing. Both are 100px wide. The "Confirm" button gets a 2px focus stroke. If strokesIncludedInLayout is false, the "Confirm" button becomes 104px wide, pushing the "Close" button aside. If true, the button remains 100px wide, the focus stroke is drawn inside its bounds, and the layout remains perfectly stable.