Responsive Resize

Select any group in XD and enable Responsive Resize in the Property Inspector (the toggle at the top of the panel). XD analyses the group's child positions and auto-assigns constraints: elements close to the left edge get pinned-left, close to the right get pinned-right, central elements may get fixed or proportional width. Override the auto-assignment by clicking any child layer and adjusting its constraint handles. The four constraints per axis are: Fixed (maintains its current size), Proportional (scales as a percentage of parent), Left/Right pin (maintains distance from that edge), and Center (stays centred in parent).

Each XD Responsive Resize constraint has a direct CSS equivalent when implemented with flexbox or CSS Grid:

1XD constraint  ->  CSS equivalent
2
3Fixed width       flex-shrink: 0; width: Xpx;
4Proportional      flex: 1; or width: N%;
5Pin left          margin-left: Xpx; (in absolute layout)
6                  flex-start alignment (in flex)
7Pin right         margin-right: Xpx;
8                  flex-end / margin-left: auto (in flex)
9Pin both sides    left: X; right: X; (absolute)
10                  width: 100%; padding: 0 Xpx; (flow)
11Center            margin: 0 auto; or justify-content: center;
12Fixed height      height: Xpx; flex-shrink: 0;
13Proportional ht   height: N%; or aspect-ratio: W/H;

Document this mapping in a comment at the top of each component's CSS file — it makes the design intent explicit for future maintainers.

XD's Padding feature (available on groups with Responsive Resize enabled) lets you define top, right, bottom, and left padding values that are preserved when the group resizes. This is the equivalent of CSS padding on a flex container. Set padding to 24px top, 16px sides, 16px bottom on a card group and the internal content maintains those gutters regardless of how wide the card is dragged. This maps directly to the CSS padding property and eliminates the need to manually calculate child positions during implementation.

1/* XD Padding Group: T=24, R=16, B=24, L=16 -> CSS */
2.card {
3  padding: 24px 16px;
4  /* All child elements maintain this gutter automatically */
5  /* XD handles the layout; CSS padding handles the code */
6}

After configuring Responsive Resize and padding, test by selecting the group and dragging its resize handles to multiple widths: 320px (small mobile), 390px (iPhone), 768px (tablet), 1200px (desktop). Verify that: padding remains consistent, fixed-width elements (icons, badges) do not scale, flexible text layers wrap correctly, and no elements overlap. This pre-implementation testing is equivalent to testing a component in a browser at multiple viewport widths — surface reflow failures in XD where they cost nothing to fix, not in code review where they are expensive.

XD Responsive Resize and Sketch Smart Layout solve overlapping but different problems. Smart Layout resizes a Symbol based on content changes via overrides — it is content-driven. XD Responsive Resize resizes a group or component when the designer manually changes the container dimensions — it is container-driven. In CSS terms: Smart Layout maps to content-driven sizing (width: max-content, height: auto); Responsive Resize maps to container-constrained sizing (width: 100%, flex: 1). Both translate to CSS flexbox but from different directions. When migrating XD designs to code, Responsive Resize constraints are the primary signal for flex and grid layout direction and sizing rules.