Use Adobe XD's Responsive Resize feature and component padding groups to build designs that scale across breakpoints — and translate XD responsive constraints to CSS clamp(), min(), max(), and fluid layout techniques.
Adobe XD's Responsive Resize feature lets designers define how components and elements scale when the artboard or parent frame changes size. For developers, reading these constraints is essential — they encode the CSS layout behavior that the designer intended.
When you see a design where a button stays fixed-width on the right while the text on the left stretches, that is a constraint system telling you to use Flexbox with flex: 1 on the text and a fixed width on the button. XD's Responsive Resize makes these layout intentions explicit and readable.
This lesson covers how to read XD responsive constraints and translate them to modern CSS fluid layout techniques.
In Adobe XD, every element has resize constraints that define how it behaves when its parent frame changes size. These are set via the Design panel's 'Responsive Resize' section.
The four constraint modes for each axis (horizontal and vertical):
CSS translation table:
1XD Constraint → CSS equivalent
2Fixed width → width: {value}px (or rem)
3Scale (proportional) → width: {percent}% or flex: 1
4Pin Left → position: relative; left: 0; margin-right: auto
5Pin Right → position: relative; right: 0; margin-left: auto
6Pin Left + Pin Right → width: 100% or flex: 1 or align-self: stretch
7Fixed height → height: {value}px
8Pin Top → position: relative; top: 0; margin-bottom: auto
9Pin Bottom → position: relative; bottom: 0; margin-top: auto
10Pin Top + Pin Bottom → height: 100% or align-self: stretch
11Scale (vertical) → height: {percent}%Practical example — reading a hero section:
XD shows:
CSS implementation:
1.hero {
2 display: flex;
3 flex-direction: row;
4 align-items: center;
5 gap: 2rem;
6}
7
8.hero-content {
9 /* Pin Left + Pin Right (horizontal stretch) */
10 flex: 1; /* grows to fill available space */
11 min-width: 0; /* prevents flex overflow */
12}
13
14.hero-title {
15 /* Pin Left, Fixed — left-aligned, does not shrink */
16 flex-shrink: 0;
17}
18
19.hero-cta {
20 /* Pin Right, Fixed — fixed width, stays right */
21 flex-shrink: 0;
22 margin-left: auto; /* pushes to right within content */
23}
24
25.hero-image {
26 /* Scale both axes — proportional growth */
27 width: 40%;
28 aspect-ratio: 16 / 9; /* maintains proportion */
29 object-fit: cover;
30}XD's padding groups (introduced in a later version of XD) function like Auto Layout in Figma — they let designers add padding to a component that scales with the component. Before padding groups, XD used fixed-position elements for spacing.
Reading padding in XD components:
Translating XD padding to CSS:
1XD shows Padding: 12 24 12 24 (top right bottom left)
2→ CSS: padding: 0.75rem 1.5rem (12/16 rem and 24/16 rem)When XD does not use padding groups (older files), measure spacing:
Fluid padding with clamp():
When a design shows different padding at desktop vs mobile artboards:
1/* Desktop artboard: padding 24px, Mobile artboard: padding 16px */
2.card {
3 /* clamp(min, preferred, max) */
4 padding: clamp(1rem, 3vw, 1.5rem); /* scales between 16px and 24px */
5}
6
7/* Or with distinct vertical/horizontal values */
8.hero {
9 padding:
10 clamp(2rem, 5vw, 4rem) /* vertical: 32px → 64px */
11 clamp(1rem, 4vw, 2rem); /* horizontal: 16px → 32px */
12}Responsive grid from XD multi-artboard designs:
1/* XD desktop artboard: 3-column grid, gap 24px */
2/* XD mobile artboard: 1-column stack, gap 16px */
3
4.card-grid {
5 display: grid;
6 grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
7 gap: clamp(1rem, 3vw, 1.5rem); /* 16px mobile → 24px desktop */
8}XD designers typically create multiple artboards at different breakpoints — desktop (1440px or 1280px), tablet (768px), and mobile (375px or 320px). Reading these artboards side by side gives you the full responsive specification.
Standard XD artboard widths and their CSS breakpoint equivalents:
1XD 1440px artboard → CSS @media (min-width: 90rem) { ... } /* xl breakpoint */
2XD 1280px artboard → CSS @media (min-width: 80rem) { ... } /* lg breakpoint */
3XD 768px artboard → CSS @media (min-width: 48rem) { ... } /* md breakpoint */
4XD 375px artboard → CSS base styles (mobile-first)Responsive value extraction workflow:
Example: hero heading font size across artboards:
1Mobile (375px): font-size 32px, line-height 40px
2Tablet (768px): font-size 48px, line-height 56px
3Desktop (1440px): font-size 64px, line-height 72pxCSS with clamp() (smooth, no breakpoints needed):
1.hero-title {
2 /* clamp(minimum, preferred-fluid, maximum) */
3 font-size: clamp(2rem, 3.5vw + 0.5rem, 4rem);
4 /* At 375px: 2rem (32px) */
5 /* At 768px: ~3rem (48px) */
6 /* At 1440px: 4rem (64px) */
7
8 line-height: clamp(2.5rem, 4vw + 0.5rem, 4.5rem);
9}For the clamp() formula given two breakpoint values:
1min-vw = 23.4375rem (375px)
2max-vw = 90rem (1440px)
3min-size = 2rem (32px)
4max-size = 4rem (64px)
5
6slope = (max-size - min-size) / (max-vw - min-vw)
7 = (4 - 2) / (90 - 23.4375) = 0.0300...
8offset = min-size - slope * min-vw
9 = 2 - 0.03 * 23.4375 = 1.297rem
10
11result: clamp(2rem, 0.03 * 100vw + 1.297rem, 4rem)
12 = clamp(2rem, 3vw + 1.3rem, 4rem)Online tools: use 'Fluid type scale calculators' (type-scale.com or utopia.fyi) to automate this math from two breakpoint values.
Both XD and Figma use constraint systems for responsive layout. If you encounter files from both tools, here is a comparison table:
Horizontal constraint equivalents:
1XD Figma CSS
2Fixed left Left position: absolute; left: {n}px
3Fixed right Right position: absolute; right: {n}px
4Pin left+right Left and Right width: 100%
5Scale Scale width: {percent}% or flex: 1
6Center Center left: 50%; transform: translateX(-50%)Vertical constraint equivalents:
1XD Figma CSS
2Fixed top Top position: absolute; top: {n}px
3Fixed bottom Bottom position: absolute; bottom: {n}px
4Pin top+bottom Top and Bottom height: 100%
5Scale Scale height: {percent}%
6Center Center top: 50%; transform: translateY(-50%)When constraints use absolute positioning:
Both XD and Figma constraints show absolute positioning. In production, avoid absolute positioning for flow content — use Flexbox or Grid instead:
1/* XD shows: element pinned left at 24px, pinned right at 24px */
2/* Naive translation (avoid): */
3.element {
4 position: absolute;
5 left: 1.5rem;
6 right: 1.5rem;
7}
8
9/* Better CSS (in a Flexbox or Grid parent): */
10.element {
11 width: 100%; /* fills parent */
12 padding: 0 1.5rem; /* respects the 24px edge offset */
13 box-sizing: border-box;
14}
15/* or */
16.parent {
17 padding: 0 1.5rem; /* add padding to parent instead */
18}Rule of thumb: if the constraint pins to both edges, use width: 100% in normal flow, not position: absolute. Only use absolute positioning for overlapping elements (tooltips, badges, floating buttons).
Reading XD responsive constraints on a course card at mobile (375px) and desktop (1440px) artboards and implementing a fully fluid CSS card.
1/* XD course card constraints analysis:
2 Mobile artboard (375px):
3 - Card: width 327px (Pin Left+Right, 24px margin each side), height: hug
4 - Thumbnail: 327px × 184px, Pin Left+Right, Fixed height
5 - Body: Pin Left+Right, padding 16px, gap 8px
6 - Title: 18px/600/1.4 line-height, Pin Left+Right
7 - Price: 20px/700, Pin Left, Fixed
8 - Enroll button: 44px height, Pin Left+Right
9
10 Desktop artboard (1440px):
11 - Card: width 320px, Fixed width (grid positions it)
12 - Thumbnail: 320px × 180px, same fixed height
13 - Body: same padding, same gap
14 - Title: 18px/600/1.4 (same — no change)
15 - Price: 24px/700 (LARGER on desktop!)
16 - Enroll button: 44px height (same)
17*/
18
19/* CSS card implementation */
20
21.course-card {
22 /* Mobile: fills parent minus 24px margins (Pin Left+Right) */
23 /* Desktop: fixed 320px in a grid (read from grid container) */
24 display: flex;
25 flex-direction: column;
26 border-radius: 0.75rem;
27 border: 1px solid #e5e7eb;
28 background: #ffffff;
29 overflow: hidden;
30 transition: box-shadow 200ms ease, transform 200ms ease;
31}
32
33.course-card:hover {
34 box-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
35 transform: translateY(-2px);
36}
37
38/* Thumbnail: fixed height on all breakpoints */
39.course-card__thumbnail {
40 width: 100%; /* Pin Left+Right */
41 height: 11.5rem; /* 184px on mobile, 180px desktop — use 184px */
42 object-fit: cover;
43 flex-shrink: 0;
44 display: block;
45}
46
47/* Body: Auto Layout vertical, 16px padding, 8px gap */
48.course-card__body {
49 display: flex;
50 flex-direction: column;
51 gap: 0.5rem; /* 8px gap between all children */
52 padding: 1rem; /* 16px on all breakpoints */
53 flex: 1; /* fills remaining card height */
54}
55
56/* Title: same size on all breakpoints */
57.course-card__title {
58 font-size: 1.125rem; /* 18px */
59 font-weight: 600;
60 line-height: 1.4;
61 color: #111827;
62 margin: 0;
63 display: -webkit-box;
64 -webkit-line-clamp: 2;
65 -webkit-box-orient: vertical;
66 overflow: hidden;
67}
68
69/* Price: changes between mobile and desktop! */
70.course-card__price {
71 font-size: 1.25rem; /* mobile: 20px */
72 font-weight: 700;
73 color: #111827;
74 margin-top: auto; /* pushes to bottom of card body */
75}
76
77@media (min-width: 64rem) { /* 1024px+ (desktop artboard) */
78 .course-card__price {
79 font-size: 1.5rem; /* desktop: 24px */
80 }
81}
82
83/* Enroll button: full width, 44px height */
84.course-card__cta {
85 display: flex;
86 align-items: center;
87 justify-content: center;
88 width: 100%; /* Pin Left+Right */
89 height: 2.75rem; /* 44px */
90 background-color: #2563eb;
91 color: white;
92 font-size: 0.9375rem;
93 font-weight: 600;
94 border: none;
95 border-radius: 0.5rem;
96 cursor: pointer;
97 text-decoration: none;
98 transition: background-color 150ms ease;
99}
100.course-card__cta:hover { background-color: #1d4ed8; }
101
102/* Grid container: places cards at correct width per breakpoint */
103.card-grid {
104 display: grid;
105 /* Mobile: 1 col with 24px padding */
106 grid-template-columns: 1fr;
107 gap: 1rem;
108 padding: 0 1.5rem; /* 24px from XD mobile margin */
109}
110
111@media (min-width: 48rem) { /* Tablet: 2 columns */
112 .card-grid { grid-template-columns: repeat(2, 1fr); }
113}
114
115@media (min-width: 80rem) { /* Desktop: 3 columns, auto-fit to 320px */
116 .card-grid {
117 grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
118 padding: 0 4rem; /* larger margins on desktop */
119 }
120}The XD responsive analysis reveals that most card properties are identical on mobile and desktop — XD's 'fixed height' on the thumbnail, fixed padding, and fixed gap remain the same. Only the price font-size changes (20px → 24px), which requires a single media query. The Pin Left+Right constraint on the button translates to width: 100%. The card grid uses auto-fill with minmax(20rem, 1fr) to automatically distribute cards at the correct 320px width on desktop without JavaScript.
The next lesson covers XD Plugins for developers — how plugins like Overlay, Stark, Zeplin, and Batch Export extend XD's capability for developer workflows and accessibility testing.
Your progress is saved in this browser, on this device only.