Use XD's Inspect panel and CSS code generation to extract accurate specifications for every element — from font metrics to shadow values — and translate the generated code into production-quality CSS without manual measurement.
XD's Inspect panel is the most important tool in the design-to-code workflow. It shows every visual property of every element — colors, sizes, fonts, shadows, spacing — in a format designed for developer consumption. The CSS code generation feature takes this further by outputting a CSS block you can copy directly into your codebase.
However, XD-generated CSS is not production-ready. It uses absolute pixel values for font sizes (should be rem), absolute line-heights (should be unitless ratios), and may include position: absolute for elements that belong in normal flow. Knowing what to correct is as important as knowing how to read the values.
This lesson covers the complete XD Inspect panel — every section and property — and teaches you to translate XD specifications into production CSS accurately.
The XD Inspect panel appears on the right side of the screen in Design mode when an element is selected. In the development share link, it appears on the right of the online inspector.
Panel sections from top to bottom:
1X: 40 → left offset from parent frame (px)
2Y: 24 → top offset from parent frame (px)
3W: 280 → element width in pixels
4H: 48 → element height in pixelsCSS translation: width and height map directly. X and Y are positions in the design grid — in normal flow CSS, they become padding/margin on the parent, not position values on the element.
1Opacity: 85% → opacity: 0.85
2Blend mode: Normal → mix-blend-mode: normal (default, omit)1Solid: #2563EB → background-color: #2563eb
2Gradient: 0° #2563EB → #1D4ED8 → background: linear-gradient(180deg, #2563eb, #1d4ed8)
3Image: background-image with contain/cover → background-size: cover/contain1Color: #D1D5DB → border-color: #d1d5db
2Width: 1 → border-width: 1px
3Align: Center → border (standard CSS border; center is default)
4Align: Inside → outline: 1px solid ... (inside = outline with negative offset)
5Style: Dashed → border-style: dashed1Drop Shadow: X:0 Y:4 B:16 S:0 Color:#00000026
2→ box-shadow: 0 4px 16px 0 rgb(0 0 0 / 0.15)
3(Note: #00000026 hex alpha = 26/255 ≈ 15% opacity)1Background Blur: 8 → backdrop-filter: blur(8px)
2Object Blur: 4 → filter: blur(4px)18 → border-radius: 0.5rem (8/16)
28,8,0,0 → border-radius: 0.5rem 0.5rem 0 0 (TL TR BR BL)1Padding: 10 20 10 20 → padding: 0.625rem 1.25rem
2Gap: 8 → gap: 0.5rem
3Direction: Horizontal → flex-direction: row
4Align: Center → align-items: centerTypography properties from XD require the most correction before use in production code. XD shows absolute pixel values for everything — font-size, line-height, letter-spacing — while CSS best practices use relative units.
XD typography Inspect panel output:
1Font: Inter
2Size: 16px
3Weight: 600
4Line Height: 24px
5Letter Spacing: 0.2px
6Align: Left
7Color: #374151
8Transform: NoneProduction CSS translation:
1/* What XD Inspect shows → what you write */
2
3font-family: 'Inter'; /* XD shows just family name */
4/* → add fallback stack: */
5font-family: 'Inter', system-ui, -apple-system, sans-serif;
6
7font-size: 16px;
8/* → convert to rem: 16 / 16 = 1rem */
9font-size: 1rem;
10
11font-weight: 600;
12/* → no change needed (600 is a valid numeric weight) */
13font-weight: 600;
14
15line-height: 24px;
16/* → convert to unitless: 24 / 16 = 1.5 */
17line-height: 1.5;
18/* Why unitless: scales correctly if font-size changes;
19 absolute values do not scale */
20
21letter-spacing: 0.2px;
22/* → convert to em: 0.2 / 16 = 0.0125em */
23letter-spacing: 0.0125em;
24/* Why em: scales with font-size, pixel values do not */
25
26color: #374151;
27/* → use CSS variable if color is a design token: */
28color: var(--color-text, #374151);
29
30/* Full corrected CSS: */
31.body-text {
32 font-family: 'Inter', system-ui, -apple-system, sans-serif;
33 font-size: 1rem; /* 16px */
34 font-weight: 600;
35 line-height: 1.5; /* 24px / 16px = 1.5 */
36 letter-spacing: 0.0125em; /* 0.2px / 16px = 0.0125em */
37 color: var(--color-text, #374151);
38}Complete typography conversion table:
1XD font-size rem XD line-height unitless ratio
210px 0.625rem 12px/10px 1.2
312px 0.75rem 16px/12px 1.33
413px 0.8125rem 18px/13px 1.38
514px 0.875rem 20px/14px 1.43
615px 0.9375rem 22px/15px 1.47
716px 1rem 24px/16px 1.5
818px 1.125rem 27px/18px 1.5
920px 1.25rem 28px/20px 1.4
1024px 1.5rem 32px/24px 1.33
1130px 1.875rem 40px/30px 1.33
1236px 2.25rem 44px/36px 1.22
1348px 3rem 56px/48px 1.17
1460px 3.75rem 72px/60px 1.2XD's shadow specification requires careful translation to CSS box-shadow. XD uses a hex color with alpha channel, while CSS box-shadow uses rgba() or the newer oklch/rgb with opacity syntax.
XD shadow Inspect panel format:
1Drop Shadow:
2 Color: #000000 with 20% opacity
3 X: 0
4 Y: 8
5 Blur: 24
6 Spread: 0How XD displays the hex with alpha:
CSS box-shadow translation:
1/* XD: Drop Shadow, X:0 Y:8 B:24 S:0 Color:#00000033 */
2box-shadow: 0 8px 24px 0 rgb(0 0 0 / 0.2);
3/* X Y Blur Spread Color-with-opacity */
4
5/* XD: Drop Shadow, X:0 Y:1 B:3 S:0 Color:#0000001A */
6/* #1A hex = 26/255 = 10% */
7box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
8
9/* XD: Drop Shadow, X:0 Y:4 B:8 S:-2 Color:#11182714 */
10/* #14 hex = 20/255 ≈ 8% */
11box-shadow: 0 4px 8px -2px rgb(17 24 39 / 0.08);
12/* Note: negative spread shrinks the shadow */Hex alpha quick reference:
1#00000005 = 2% opacity #00000040 = 25% opacity
2#0000000D = 5% opacity #00000080 = 50% opacity
3#0000001A = 10% opacity #000000BF = 75% opacity
4#00000026 = 15% opacity #000000FF = 100% opacity
5#00000033 = 20% opacityMultiple shadows:
1/* XD can show multiple drop shadows — comma-separate in CSS */
2box-shadow:
3 0 1px 2px 0 rgb(0 0 0 / 0.05), /* subtle base */
4 0 4px 8px 0 rgb(0 0 0 / 0.1); /* main elevation */Inner shadows:
1/* XD Inner Shadow: X:0 Y:2 B:4 Color:#000000 20% */
2box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.2);Background Blur (glassmorphism):
1/* XD Object Blur: 8 → blurs the element itself */
2filter: blur(8px);
3
4/* XD Background Blur: 8 → blurs content behind the element */
5backdrop-filter: blur(8px);
6-webkit-backdrop-filter: blur(8px); /* Safari */
7
8/* Typical glassmorphism card from XD:
9 Fill: #FFFFFF 40% + Background Blur: 12 + Border: 1px #FFFFFF 20% */
10.glass-card {
11 background-color: rgb(255 255 255 / 0.4);
12 backdrop-filter: blur(12px);
13 -webkit-backdrop-filter: blur(12px);
14 border: 1px solid rgb(255 255 255 / 0.2);
15 border-radius: 1rem;
16}XD's 'Copy CSS' button generates a CSS block for the selected element. It is a useful starting point, but requires corrections before production use.
Accessing the CSS code generator:
Example XD-generated CSS for a button:
1/* XD Generated CSS — DO NOT USE AS-IS */
2.rectangle {
3 width: 160px;
4 height: 48px;
5 background-color: #2563EB;
6 border-radius: 8px;
7 font-family: Inter;
8 font-size: 15px;
9 font-weight: 600;
10 color: #FFFFFF;
11 line-height: 22px;
12 letter-spacing: 0px;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16}Corrections needed:
1/* Corrected Production CSS */
2.btn-primary {
3 /* width/height: use padding + intrinsic sizing instead */
4 /* width: 160px → remove; let content + padding determine size */
5 min-width: 10rem; /* 160px — use min-width, not fixed width */
6 /* height: 48px → use padding instead */
7 /* height: 48px removed */
8 padding: 0.75rem 1.5rem; /* creates ~48px height with 15px text + 1.5 line-height */
9
10 background-color: #2563eb; /* lowercase hex */
11 border-radius: 0.5rem; /* 8px / 16 = 0.5rem */
12
13 /* Typography corrections */
14 font-family: 'Inter', system-ui, -apple-system, sans-serif; /* + fallbacks */
15 font-size: 0.9375rem; /* 15px / 16 = 0.9375rem */
16 font-weight: 600;
17 color: #ffffff;
18 line-height: 1.467; /* 22px / 15px = 1.467 → unitless */
19 letter-spacing: 0em; /* 0 — letter-spacing: 0 is fine */
20
21 /* Layout */
22 display: inline-flex; /* inline instead of full-block flex */
23 justify-content: center;
24 align-items: center;
25
26 /* Additional properties XD does not generate */
27 border: none;
28 cursor: pointer;
29 text-decoration: none;
30 white-space: nowrap;
31 transition: background-color 150ms ease;
32}XD CSS correction checklist:
Extracting all five button states from XD Inspect panel and building a complete, production-ready CSS button system.
1/*
2XD Inspect panel values for 'Primary Button' component (all 5 variants):
3
4Default:
5 W:160 H:48 | Fill:#2563EB | Radius:8 | Shadow: none
6 Text: Inter 15px/600/white | Line-height:22px | LS:0
7 Padding: 14px 24px
8
9Hover:
10 Fill:#1D4ED8 | Shadow: 0 4px 16px #2563EB40
11 (all other props same)
12
13Focus:
14 Fill:#2563EB | Outline: 2px solid #2563EB at 2px offset
15
16Active:
17 Fill:#1E40AF | Scale: 0.98 (implied by designer — confirm in prototype)
18
19Disabled:
20 Fill:#E5E7EB | Text:#9CA3AF | cursor:not-allowed
21 (no shadow, no hover effects)
22*/
23
24/* Production CSS from XD specifications */
25
26.btn {
27 /* Layout — from XD Auto Layout: 14px 24px padding, gap: 8px */
28 display: inline-flex;
29 align-items: center;
30 justify-content: center;
31 gap: 0.5rem; /* 8px — space between icon and label */
32 padding: 0.875rem 1.5rem; /* 14px 24px */
33 min-width: 10rem; /* 160px from XD fixed-width guide */
34
35 /* Shape */
36 border: none;
37 border-radius: 0.5rem; /* 8px */
38 cursor: pointer;
39 white-space: nowrap;
40 text-decoration: none;
41
42 /* Typography */
43 font-family: 'Inter', system-ui, -apple-system, sans-serif;
44 font-size: 0.9375rem; /* 15px */
45 font-weight: 600;
46 line-height: 1.467; /* 22px / 15px = 1.467 */
47 letter-spacing: 0;
48
49 /* Transition for all interactive states */
50 transition:
51 background-color 150ms ease,
52 box-shadow 150ms ease,
53 transform 100ms ease,
54 color 150ms ease;
55}
56
57/* Default state */
58.btn-primary {
59 background-color: #2563eb; /* XD Fill: #2563EB */
60 color: #ffffff;
61}
62
63/* Hover state */
64.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
65 background-color: #1d4ed8; /* XD Hover Fill: #1D4ED8 */
66 box-shadow: 0 4px 16px 0 rgb(37 99 235 / 0.25); /* XD Hover Shadow: 0 4 16 #2563EB40 */
67}
68
69/* Focus state — WCAG AA: visible focus ring */
70.btn-primary:focus-visible {
71 outline: 2px solid #2563eb; /* XD Focus Outline: 2px solid #2563EB */
72 outline-offset: 2px; /* XD Focus offset: 2px */
73 background-color: #2563eb; /* keeps default fill */
74}
75
76/* Active state */
77.btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
78 background-color: #1e40af; /* XD Active Fill: #1E40AF */
79 transform: scale(0.98); /* confirmed in prototype: subtle press effect */
80}
81
82/* Disabled state */
83.btn-primary:disabled,
84.btn-primary[aria-disabled="true"] {
85 background-color: #e5e7eb; /* XD Disabled Fill: #E5E7EB */
86 color: #9ca3af; /* XD Disabled Text: #9CA3AF */
87 cursor: not-allowed;
88 pointer-events: none;
89 box-shadow: none;
90 transform: none;
91}
92
93/* Secondary variant */
94.btn-secondary {
95 background-color: transparent;
96 color: #2563eb;
97 border: 1.5px solid #2563eb;
98}
99
100.btn-secondary:hover:not(:disabled) {
101 background-color: #eff6ff; /* blue-50 */
102 border-color: #1d4ed8;
103 color: #1d4ed8;
104}
105
106/* Size variants */
107.btn-sm {
108 padding: 0.5rem 0.875rem; /* 8px 14px */
109 font-size: 0.875rem; /* 14px */
110 min-width: 5rem;
111}
112
113.btn-lg {
114 padding: 1rem 2rem; /* 16px 32px */
115 font-size: 1rem; /* 16px */
116 min-width: 12.5rem; /* 200px */
117}
118
119/* Loading state */
120.btn[data-loading="true"] {
121 position: relative;
122 color: transparent;
123 pointer-events: none;
124}
125
126.btn[data-loading="true"]::after {
127 content: '';
128 position: absolute;
129 width: 1rem;
130 height: 1rem;
131 border: 2px solid #ffffff;
132 border-top-color: transparent;
133 border-radius: 50%;
134 animation: btn-spin 600ms linear infinite;
135}
136
137@keyframes btn-spin {
138 to { transform: rotate(360deg); }
139}Every value in this implementation is sourced from XD Inspect panel readings: fill colors for each state, border-radius, padding, font properties, and shadow. The corrections applied: font-size converted from 15px to 0.9375rem, line-height converted from 22px to the unitless ratio 1.467, border-radius converted from 8px to 0.5rem. The :not(:disabled):not([aria-disabled]) pattern on hover/active prevents these pseudo-class styles from applying when the button is disabled. The transform: scale(0.98) for active state came from reading the XD prototype's Auto-Animate, not the static design — always check the prototype for animation specs.
The next lesson covers Zeplin and Avocode as alternative handoff tools — enhanced measurement overlays, component documentation, and developer notes beyond what XD's built-in share links provide.
Your progress is saved in this browser, on this device only.