Design Specs & Export

Select any element in XD and the Property Inspector on the right displays all design values developers need: W and H in pixels, X/Y position relative to the artboard origin, fill color in hex with opacity, border color and width, corner radius, shadow (X offset, Y offset, blur, color), and blur radius. For text layers it adds font family, weight, size, line height, letter spacing, and paragraph spacing. All values are in pixels at 1x — the same as Sketch. Click any color swatch to copy its hex value. These are the authoritative source values for CSS implementation.

Select an element, then hover over another element while holding Option (Mac) or Alt (Win) — XD draws pink distance lines showing the gap in pixels. This works in all four directions simultaneously, revealing padding, margin, and gap values between any two elements on the canvas. XD's distance display is slightly more informative than Sketch's because it shows all four directional gaps at once rather than requiring separate hover interactions for each direction.

1/* XD Alt+hover measurements -> CSS */
2/* Card W=343, padding-top=24, padding-left=16 */
3/* gap between title and price: 12px */
4.product-card {
5  width: 343px;
6  padding: 24px 16px;
7  gap: 12px;
8  display: flex;
9  flex-direction: column;
10}

XD's Developer Specifications (Share > Share for Development) generates a public or password-protected web link where developers inspect every artboard in a browser. Clicking any element shows the same Property Inspector values plus auto-generated CSS code. The CSS uses absolute positioning and should be used as a value reference rather than copy-paste layout code — extract the dimension, color, typography, and shadow values and implement them in your component architecture.

1/* XD Dev Specs auto-generated CSS (value reference) */
2.button {
3  width: 160px;
4  height: 44px;
5  border-radius: 8px;
6  background-color: rgba(37, 99, 235, 1); /* #2563EB */
7  font-family: Inter;
8  font-size: 16px;
9  font-weight: 600;
10  line-height: 1.5; /* XD uses ratio, not absolute px */
11  letter-spacing: 0px;
12  color: rgba(255, 255, 255, 1);
13}

Select any element in XD and in the Property Inspector scroll to the Export section. Click the + icon to mark it for export. Choose Format (PNG, SVG, PDF, JPG), Scale (1x, 2x, 3x), and a suffix for each variant. Click Export All (Shift+Cmd+E / Shift+Ctrl+E) to export every marked element at once. For icons, always export SVG at 1x. For photographs or illustrations, export PNG at 1x and 2x minimum. XD exports clean SVG but run svgo afterwards for production use — the same optimisation workflow as Sketch.

1XD export configuration for icons:
2  Format: SVG     Scale: 1x  Suffix: (none)
3  Format: PNG     Scale: 1x  Suffix: (none)
4  Format: PNG     Scale: 2x  Suffix: @2x
5  Format: PNG     Scale: 3x  Suffix: @3x

XD Developer Specifications, Zeplin, and Figma Inspect all solve the same handoff problem with different trade-offs. XD Dev Specs: built-in, free, basic CSS only, no longer maintained since discontinuation. Zeplin with XD plugin: richer snippets (CSS, Swift, Kotlin), Styleguide generation, still works with XD files but plugin development has slowed. Figma Inspect: built into Figma, always current, supports CSS/iOS/Android, actively developed — the strongest choice for new projects. For legacy XD files, XD Dev Specs remains functional as long as the XD Cloud service continues, but do not depend on it indefinitely.

1Handoff tool comparison (2026):
2  XD Dev Specs:  functional for legacy files, not maintained
3  Zeplin + XD:   works but XD plugin updates are infrequent
4  Figma Inspect: best-in-class, actively developed
5                 -> migrate XD files to Figma for long-term handoff