Create, configure, and manage Adobe XD share links for prototype review and developer handoff — understand link types, access control, comment workflows, and how to use the online inspector for CSS extraction without opening XD.
Adobe XD share links are the primary distribution mechanism for getting designs in front of developers, stakeholders, and QA reviewers. A well-configured share link eliminates the need for developers to have XD installed — everything they need to inspect CSS values, measure spacing, and download assets is available in the browser-based online inspector.
Understanding the full capability of XD share links means developers can work independently from the design file, only asking questions when values are ambiguous, not for every measurement. This lesson covers how to create, configure, and use share links as a developer-first handoff tool.
XD provides three types of share links, each serving a different audience:
Creating a share link:
Access control best practices:
Updating share links when designs change:
The XD online inspector (available at the development share link) provides the same inspection capability as the XD Inspect panel, but in the browser — no XD license required.
Navigating the online inspector:
Right panel sections in the online inspector:
All properties:
For text layers:
CSS export (the most useful feature):
Assets panel (left sidebar → grid icon):
Exporting assets from the online inspector:
Measuring spacing in the online inspector:
The comment system on XD share links enables design review, developer questions, and QA feedback without email chains or Slack screenshots.
Leaving comments on a share link:
Comment workflow for developers:
Asking implementation questions:
1Click on the button → Add comment:
2"Is the hover state bg-color correct here? Inspect panel shows #1D4ED8
3but the style guide card next to it shows #1E40AF. Which is correct?"Reporting implementation discrepancies:
1Add comment at problem area:
2"Implemented this card. The live version at:
3https://dev.staging.devbootstrap.com/courses
4has 0.5rem extra bottom padding. Can you check if the design has a 8px
5bottom padding on the card-body that I missed? #review"Designer annotations during active design:
1[Designer pins comment to animation element]
2"DEVELOPER NOTE: this card expand animation is Auto-Animate 300ms Ease Out.
3CSS: height auto does not animate — use max-height: 500px transition.
4Or use the CSS grid trick: grid-template-rows 0fr → 1fr."Managing comment notifications:
Comment-to-JIRA integration:
XD prototypes can be embedded in Notion, Confluence, and other documentation tools for in-context stakeholder review.
Embedding in Notion:
Embedding in Confluence:
XD embed URL format:
1# Standard share link
2https://xd.adobe.com/view/{file-id}/
3
4# Embedding with specific settings
5https://xd.adobe.com/embed/{file-id}/screen/{artboard-id}/
6
7# Link with comments hidden
8https://xd.adobe.com/view/{file-id}/?fullscreenSharing links with context (suggested message template):
1Subject: [Design] Course Detail page — ready for review
2
3Hi team,
4
5The Course Detail page design (v3) is ready for review:
6
7Prototype (interactive): https://xd.adobe.com/view/abc123/
8Development specs: https://xd.adobe.com/view/def456/
9
10What's changed since v2:
11- New lesson item layout with progress indicator (artboard: 'Course Detail - V3')
12- Updated mobile tab design (artboard: 'Course Detail - Mobile - V3')
13- Fixed contrast issue on category label (now neutral-600 as discussed)
14
15Review checklist:
16[ ] Overall layout and information hierarchy
17[ ] Mobile interaction patterns
18[ ] Color consistency with brand guide
19
20Deadline for feedback: Friday EODOrganizing share links in documentation:
1## Design Links Index
2
3| Page | Prototype | Development Specs | Status |
4|---------------|------------------------|------------------------|----------|
5| Home | [View prototype]() | [View specs]() | ✅ Final |
6| Course Detail | [View prototype]() | [View specs]() | 🔄 v3 |
7| Checkout | [View prototype]() | [View specs]() | ✏️ WIP |Implementing a navigation component using only the XD development share link — no XD desktop app required.
1/*
2Online Inspector workflow for implementing a navigation bar.
3
4Step 1: Open the development share link
5Step 2: Click the 'Header' frame in the artboard list
6Step 3: Read values from the Inspect panel
7
8Values extracted from online inspector:
9- Header height: 64px → 4rem
10- Header background: #FFFFFF → white
11- Header border-bottom: 1px solid #E5E7EB → var(--color-border)
12- Header padding: 0 32px → 0 2rem (horizontal)
13- Header position: sticky
14
15Navigation links:
16- Font: Inter 15px / 500 / #374151
17- Hover: background #F9FAFB, color #111827
18- Active: background #EFF6FF, color #2563EB, weight 600
19- Padding: 8px 12px, radius 6px
20
21CTA Button:
22- Width: 120px, Height: 40px → min-width: 7.5rem; height: 2.5rem
23- Background: #2563EB, hover: #1D4ED8
24- Text: Inter 15px / 600 / white
25- Padding: 10px 20px, radius 8px
26
27Logo image:
28- Alt: 'DevBootstrap'
29- Width: 140px → width: 8.75rem
30- Export: SVG from Assets panel → logo.svg
31*/
32
33/* CSS implementation from online inspector values */
34
35.site-header {
36 display: flex;
37 align-items: center;
38 justify-content: space-between;
39 height: 4rem; /* 64px from inspector */
40 padding: 0 2rem; /* 0 32px horizontal padding */
41 background-color: #ffffff;
42 border-bottom: 1px solid #e5e7eb;
43 position: sticky;
44 top: 0;
45 z-index: 100;
46 /* Developer addition: backdrop blur for depth */
47 backdrop-filter: blur(8px);
48 background-color: rgb(255 255 255 / 0.9);
49}
50
51.site-logo {
52 display: flex;
53 align-items: center;
54 flex-shrink: 0;
55}
56
57.site-logo img {
58 width: 8.75rem; /* 140px from inspector */
59 height: auto;
60}
61
62nav ul {
63 display: flex;
64 align-items: center;
65 list-style: none;
66 padding: 0;
67 margin: 0;
68 gap: 0.25rem;
69}
70
71.nav-link {
72 display: inline-flex;
73 align-items: center;
74 padding: 0.5rem 0.75rem; /* 8px 12px from inspector */
75 border-radius: 0.375rem; /* 6px from inspector */
76 font-size: 0.9375rem; /* 15px */
77 font-weight: 500;
78 color: #374151; /* #374151 from inspector */
79 text-decoration: none;
80 transition: background-color 150ms ease, color 150ms ease;
81}
82
83.nav-link:hover {
84 background-color: #f9fafb; /* hover bg from inspector */
85 color: #111827; /* hover text from inspector */
86}
87
88.nav-link[aria-current="page"] {
89 background-color: #eff6ff; /* active bg from inspector */
90 color: #2563eb; /* active text from inspector */
91 font-weight: 600;
92}
93
94.nav-cta {
95 display: inline-flex;
96 align-items: center;
97 justify-content: center;
98 min-width: 7.5rem; /* 120px from inspector */
99 height: 2.5rem; /* 40px from inspector */
100 padding: 0.625rem 1.25rem; /* 10px 20px from inspector */
101 border-radius: 0.5rem; /* 8px from inspector */
102 background-color: #2563eb;
103 color: white;
104 font-size: 0.9375rem;
105 font-weight: 600;
106 border: none;
107 cursor: pointer;
108 text-decoration: none;
109 white-space: nowrap;
110 transition: background-color 150ms ease;
111}
112
113.nav-cta:hover { background-color: #1d4ed8; } /* hover from inspector */
114.nav-cta:focus-visible {
115 outline: 2px solid #2563eb;
116 outline-offset: 2px;
117}Every CSS value — heights, paddings, border-radius, font sizes, font weights, colors — was extracted directly from the XD online inspector without opening the XD desktop app. The hover and active colors came from the Inspect panel on the corresponding variant frames. The only developer addition not from the inspector is the backdrop-filter blur effect on the sticky header — this is a developer enhancement not visible in static XD designs but improves readability as the page scrolls behind the header.
The next lesson covers Developer Specifications — how XD generates CSS code snippets for selected elements and how to use batch export to get all assets from a design file in one operation.
Your progress is saved in this browser, on this device only.