All courses > Design and Art > UX - User Experience ::

Responsive Behaviors in Adobe XD: Responsive Resize and Constraints

Capítulo 5

Estimated reading time: 8 minutes

What “Responsive” Means Inside Adobe XD

In Adobe XD, responsive behavior is about how objects react when an artboard changes size. Instead of redrawing layouts for every device, you define how elements should stretch, stay pinned, or maintain margins. XD offers two core tools for this:

Responsive Resize: XD attempts to infer resizing rules automatically based on object relationships and spacing.
Manual constraints: You explicitly pin edges and define fixed or flexible dimensions so the behavior is predictable.

Use Responsive Resize for quick wins and manual constraints for anything that must be exact (navigation bars, cards, forms, and complex layouts).

Responsive Resize vs. Manual Constraints (When to Use Which)

Responsive Resize

Best for: simple groups, cards with consistent padding, basic two-column sections, image + text blocks.
Watch out for: nested groups, mixed alignment (centered + pinned), and elements that should not scale (icons, strokes, corner radii).

Manual Constraints

Best for: fixed headers, pinned buttons, sidebars, modals, and any layout where margins must remain constant.
Benefit: you control which edges stay fixed and which dimensions stretch.

Common Responsive Patterns You’ll Build

1) Fixed Header (Pinned Left/Right/Top)

A fixed header typically stretches horizontally with the artboard while keeping a constant height.

Header container: pinned to Left and Right, pinned to Top, fixed height.
Logo: pinned Left and Top (do not scale).
Nav links: pinned Right and Top (or centered if your layout requires it, but avoid mixing centered elements with pinned edges unless tested).

2) Flexible Content Columns (Stretch + Maintain Gutters)

For a content area that grows with screen width, you usually want the container to stretch while inner columns maintain their spacing rules.

Content wrapper: pinned Left and Right so it expands.
Left column: pinned Left; right edge may be flexible depending on your column strategy.
Right column: pinned Right.

If columns should change width proportionally, allow them to stretch; if they should remain fixed width, keep their width fixed and let only the gutter space change.

Continue in our app.

Listen to the audio with the screen off.
Earn a certificate upon completion.
Over 5000 courses for you to explore!

Or continue reading below...

Download the app

3) Pinned Elements (Floating CTA, Bottom Bar, Badges)

Pinned elements keep their position relative to an edge when the artboard changes.

Floating action button: pinned Right and Bottom.
Bottom bar: pinned Left, Right, and Bottom with fixed height.
Notification badge: pinned to the corner of its parent group; ensure the badge is grouped with the icon so it moves correctly.

4) Scaling Rules for Cards and Images

Cards often need to stretch in width while keeping consistent padding and a stable text layout. Images may either crop (preferred for photography) or scale (preferred for illustrations).

Card container: pinned Left/Right (stretches), fixed height or flexible height depending on content.
Card padding: keep inner elements pinned to card edges so padding stays constant.
Images: decide whether the image frame should stretch while the image crops, or whether the image itself scales. Test both behaviors by resizing the artboard.

Workflow: Duplicate Artboards for Mobile / Tablet / Desktop

A practical way to design responsively in XD is to create a “base” artboard and duplicate it into target sizes. Then you adjust constraints and verify behavior by resizing artboards and previewing.

Step-by-step: Create device variants

Start from a primary artboard (often desktop or mobile, depending on your project). Keep your layout organized with meaningful grouping (header group, content group, card groups). Good grouping improves Responsive Resize results.
Duplicate the artboard for each breakpoint (e.g., Mobile, Tablet, Desktop). Use copy/paste or duplicate in the layers panel so structure stays identical.
Rename artboards clearly (e.g., Home - Mobile, Home - Tablet, Home - Desktop) to avoid editing the wrong version.
Resize each artboard to the target dimensions. As you resize, watch which elements break first; those are the ones that need constraints.

Applying Responsive Resize (Fast Pass)

Responsive Resize can be toggled per object or group. The goal is to let XD infer which distances should remain constant and which dimensions should stretch.

Step-by-step: Use Responsive Resize on a card

Select the card group (background rectangle + image + text + button).
Enable Responsive Resize in the properties panel.
Resize the artboard wider and narrower and observe the card behavior.
Fix misbehavior by regrouping: if the button scales oddly, separate it into its own group and pin it; if text overlaps, ensure text boxes are not set to scale in a way that distorts readability.

Tip: Responsive Resize works best when the group has a clear hierarchy: container first, then inner elements aligned with consistent padding.

Manual Constraints (Precision Pass)

Manual constraints are your “make it reliable” tool. Use them when Responsive Resize guesses wrong or when you need strict rules like fixed margins.

Step-by-step: Set constraints for a fixed header

Select the header background shape (or header group container).
Pin Left and Right so it stretches horizontally with the artboard.
Pin Top so it stays attached to the top edge.
Keep height fixed (avoid scaling vertically unless you intentionally want a taller header on tablet/desktop).
Select the logo and pin Left and Top; keep width/height fixed to prevent distortion.
Select the nav group and pin Right and Top. If spacing between links must remain constant, keep the nav group width fixed and adjust link distribution manually per breakpoint.

Step-by-step: Pin a floating CTA button

Select the CTA button group.
Pin Right and Bottom.
Test by resizing the artboard: the button should maintain the same offset from the bottom-right corner.

Step-by-step: Build a flexible two-column section

Select the content wrapper and pin Left/Right so the section expands with the artboard.
Select the left column group: pin Left; decide whether it should have fixed width (common for navigation) or flexible width (common for content).
Select the right column group: pin Right; set it to stretch if it should absorb extra width.
Check gutter behavior: if the gap collapses or grows too much, adjust column widths and constraints so the gutter remains within an acceptable range.

Text Reflow and Scaling: Avoiding Readability Breaks

Text is usually the first thing to break when resizing. The goal is to allow text to reflow (wrap) without scaling the font size unintentionally.

Prefer reflow over scaling: keep font sizes consistent across breakpoints unless you intentionally define a type scale per device.
Watch line length: on wide screens, long lines reduce readability; consider setting a max width for text blocks (fixed width text container centered within a flexible wrapper).
Buttons and labels: ensure padding remains consistent so labels don’t touch edges when translated or when the artboard narrows.

Checking Layout Integrity While Resizing

As you resize artboards and switch between variants, inspect the layout systematically. A small constraint mistake can create subtle misalignments that become obvious in prototype preview.

What to look for during resize

Unexpected scaling: icons, logos, and UI controls should rarely scale proportionally.
Overlapping layers: text over images, buttons over text, badges drifting away from their parent.
Padding drift: inner spacing changes because elements are not pinned to the correct edges.
Edge collisions: content touches the artboard edges on smaller sizes.

Practical Mini-Exercise: Make a Card Grid Responsive

This exercise focuses on a common real-world pattern: a grid of cards that becomes fewer columns on smaller screens.

Step-by-step

Desktop artboard: arrange cards in a multi-column layout. Group each card and ensure internal padding is consistent.
Duplicate to tablet: reduce the number of columns (e.g., from 3 to 2). Keep card widths consistent and adjust gutters.
Duplicate to mobile: move to a single-column stack. Increase vertical spacing if needed for touch comfort.
Within each card: pin text and buttons to left/right edges of the card so padding stays constant when the card width changes.
Images: decide whether images crop or scale. Test by resizing the card width slightly; the image should remain visually balanced.

Testing Checklist (Use This Every Time)

Run this checklist on each artboard size (mobile, tablet, desktop) and also while manually resizing the artboard to “in-between” widths.

Category	What to verify	Quick test
Spacing consistency	Margins and padding remain consistent; gutters don’t collapse; sections align to the same rhythm.	Resize the artboard wider/narrower and compare distances between repeated elements (cards, list items, form fields).
Text reflow	Text wraps cleanly; no clipping; no unintended font scaling; headings don’t overlap adjacent elements.	Narrow the artboard until the longest heading wraps; confirm line breaks still look intentional.
Touch target sizing	Buttons/links remain large enough on mobile; spacing prevents accidental taps; pinned elements don’t cover content.	On the mobile artboard, check primary actions and navigation items for comfortable tap areas and separation.
Avoid broken alignments	Elements stay aligned to columns; icons remain centered; badges stay attached; baseline alignment looks stable.	Toggle between artboards and look for “jumps” in alignment of repeated UI patterns (headers, cards, list rows).

Troubleshooting: Fast Fixes for Common Breaks

Problem: A button stretches and looks distorted

Keep the button’s height fixed; pin left/right only if it should become a full-width button on smaller screens.
Group label + background properly so padding stays stable.

Problem: Text overlaps an image when narrowing

Ensure the text container is pinned with appropriate margins and allowed to wrap.
If the layout is too tight, change the structure at that breakpoint (e.g., stack image above text on mobile).

Problem: A badge drifts away from its icon

Group the badge with the icon and apply constraints to the group, not to individual pieces.
Pin the badge relative to the icon’s corner within the group.

Problem: Columns don’t maintain gutters

Decide which column is flexible and which is fixed; don’t let both stretch unpredictably.
Use a wrapper that stretches, with inner columns pinned to opposite sides.

Now answer the exercise about the content:

When should you rely on manual constraints instead of Responsive Resize for responsive behavior in Adobe XD?

You are right! Congratulations, now go to the next page

You missed! Try again.

Manual constraints are best when resizing must be precise and predictable, such as keeping fixed margins or pinning UI elements (e.g., headers or CTAs) to specific edges.